fix(quickstart): add styles.css to js quickstart

Fix #1684

While looking at this, I saw that plunkers were getting some unintended unit testing files and added them to the default plunker builder ignore.
This commit is contained in:
Filipe Silva 2016-06-20 01:31:49 +01:00 committed by Naomi Black
parent 61c85a92a4
commit 3db8642113
3 changed files with 35 additions and 4 deletions

View File

@ -0,0 +1,14 @@
/* #docregion */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}
/*
* See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
* for the full set of master styles used by the documentation samples
*/

View File

@ -31,9 +31,9 @@ figure.image-display
.file app.component.js .file app.component.js
.file main.js .file main.js
.file index.html .file index.html
.file license.md .file styles.css
:marked :marked
Functionally, it's an `index.html` and two JavaScript files in an `app/` folder. Functionally, it's an `index.html`, `styles.css` and two JavaScript files in an `app/` folder.
We can handle that! We can handle that!
Of course we won't build many apps that only run in plunker. Of course we won't build many apps that only run in plunker.
@ -43,6 +43,7 @@ figure.image-display
1. Write the Angular root component for our app 1. Write the Angular root component for our app
1. Bootstrap it to take control of the main web page 1. Bootstrap it to take control of the main web page
1. Write the main page (`index.html`) 1. Write the main page (`index.html`)
1. Add some CSS (`styles.css`)
.l-sub-section .l-sub-section
:marked :marked
@ -257,6 +258,16 @@ code-example(format="").
metadata, finds the `my-app` selector, locates an element tag named `my-app`, metadata, finds the `my-app` selector, locates an element tag named `my-app`,
and loads our application between those tags. and loads our application between those tags.
:marked
### Add some style
Styles aren't essential but they're nice, and `index.html` assumes we have
a stylesheet called `styles.css`.
Create a `styles.css` file in the *#{_indexHtmlDir}* folder and start styling, perhaps with the minimal
styles shown below. For the full set of master styles used by the documentation samples,
see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css).
+makeExample('quickstart/js/styles.1.css', null, 'styles.css')(format=".")
.l-main-section .l-main-section
:marked :marked
## Run! ## Run!
@ -306,15 +317,17 @@ figure.image-display
.file main.js .file main.js
.file index.html .file index.html
.file package.json .file package.json
.file styles.css
:marked :marked
And here are the files: And here are the files:
+makeTabs(` +makeTabs(`
quickstart/js/app/app.component.js, quickstart/js/app/app.component.js,
quickstart/js/app/main.js, quickstart/js/app/main.js,
quickstart/js/index.html, quickstart/js/index.html,
quickstart/js/package.1.json quickstart/js/package.1.json,
quickstart/js/styles.1.css
`,null, `,null,
`app/app.component.js, app/main.js, index.html,package.json`) `app/app.component.js, app/main.js, index.html, package.json, styles.css`)
:marked :marked
.l-main-section .l-main-section

View File

@ -143,6 +143,10 @@ function initConfigAndCollectFileNames(configFileName) {
'!**/tslint.json', '!**/tslint.json',
'!**/.editorconfig', '!**/.editorconfig',
'!**/systemjs.config.js', '!**/systemjs.config.js',
'!**/wallaby.js',
'!**/karma-test-shim.js',
'!**/karma.conf.js',
'!**/spec.js'
]; ];
Array.prototype.push.apply(gpaths, defaultExcludes); Array.prototype.push.apply(gpaths, defaultExcludes);