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 main.js
.file index.html
.file license.md
.file styles.css
: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!
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. Bootstrap it to take control of the main web page
1. Write the main page (`index.html`)
1. Add some CSS (`styles.css`)
.l-sub-section
:marked
@ -257,6 +258,16 @@ code-example(format="").
metadata, finds the `my-app` selector, locates an element tag named `my-app`,
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
:marked
## Run!
@ -306,15 +317,17 @@ figure.image-display
.file main.js
.file index.html
.file package.json
.file styles.css
:marked
And here are the files:
+makeTabs(`
quickstart/js/app/app.component.js,
quickstart/js/app/main.js,
quickstart/js/index.html,
quickstart/js/package.1.json
quickstart/js/package.1.json,
quickstart/js/styles.1.css
`,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
.l-main-section

View File

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