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:
parent
61c85a92a4
commit
3db8642113
|
@ -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
|
||||
*/
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Reference in New Issue