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 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
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue