@@ -5,11 +5,11 @@ include _util-fns
5
5
if you did everything by hand.
6
6
7
7
The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
8
- that can create a project, add files, and perform a variety of on-going development tasks such
8
+ that can create a project, add files, and perform a variety of ongoing development tasks such
9
9
as testing, bundling, and deployment.
10
10
11
- The goal in this CLI QuickStart chapter is to build and run a super- simple Angular
12
- application in TypeScript, using Angular CLI
11
+ The goal in this guide is to build and run a simple Angular
12
+ application in TypeScript, using the Angular CLI
13
13
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
14
14
benefit _every_ Angular project.
15
15
@@ -18,10 +18,10 @@ include _util-fns
18
18
19
19
You'll pursue these ends in the following high-level steps:
20
20
21
- 1. [Set up](#devenv) the development environment
22
- 2. [Create](#create-proj) a new project and skeleton application
23
- 3. [Serve](#serve) the application
24
- 4. [Edit](#first-component) the application
21
+ 1. [Set up](#devenv) the development environment.
22
+ 2. [Create](#create-proj) a new project and skeleton application.
23
+ 3. [Serve](#serve) the application.
24
+ 4. [Edit](#first-component) the application.
25
25
26
26
And you can also <a href="/resources/zips/cli-quickstart/cli-quickstart.zip">download the example.</a>
27
27
@@ -93,9 +93,9 @@ h2#first-component Step 4: Edit your first Angular component
93
93
+ makeExample('cli-quickstart/ts/src/app/app.component.ts' , 'title' , 'src/app/app.component.ts' )( format ="." )
94
94
95
95
:marked
96
- The browser reloads automatically and we see the revised title. That's nice, but we can make it look better.
96
+ The browser reloads automatically with the revised title. That's nice, but it could look better.
97
97
98
- Open `src/app/cli-quickstart.component.css` and give the component some style
98
+ Open `src/app/cli-quickstart.component.css` and give the component some style.
99
99
100
100
+ makeExample('cli-quickstart/ts/src/app/app.component.css' , null , 'src/app/app.component.css' )( format ="." )
101
101
@@ -133,7 +133,7 @@ block src-files
133
133
:marked
134
134
### The `src` folder
135
135
Your app lives in the `src` folder.
136
- All Angular components, templates, styles, images and anything else your app needs go here.
136
+ All Angular components, templates, styles, images, and anything else your app needs go here.
137
137
Any files outside of this folder are meant to support building your app.
138
138
139
139
.filetree
@@ -173,7 +173,7 @@ table(width="100%")
173
173
td <code >app/app.component.{ts,html,css,spec.ts}</code >
174
174
td
175
175
:marked
176
- Defines the `AppComponent` along with an HTML template, CSS stylesheet and a unit test.
176
+ Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
177
177
It is the **root** component of what will become a tree of nested components
178
178
as the application evolves.
179
179
tr
@@ -187,18 +187,18 @@ table(width="100%")
187
187
td <code >assets/*</code >
188
188
td
189
189
:marked
190
- A folder where you can put images and anything else you need to be copied wholesale
190
+ A folder where you can put images and anything else to be copied wholesale
191
191
when you build your application.
192
192
tr
193
193
td <code >environments/*</code >
194
194
td
195
195
:marked
196
196
This folder contains one file for each of your destination environments,
197
- each exporting simple configuration variables to use on your application.
198
- The files will be replaced on-the-fly when you build your app.
199
- You might use a different API endpoint for development than you do for production.
200
- Or maybe different analytics tokens.
201
- Maybe even some mock services.
197
+ each exporting simple configuration variables to use in your application.
198
+ The files are replaced on-the-fly when you build your app.
199
+ You might use a different API endpoint for development than you do for production
200
+ or maybe different analytics tokens.
201
+ You might even use some mock services.
202
202
Either way, the CLI has you covered.
203
203
tr
204
204
td <code >favicon.ico</code >
@@ -210,9 +210,9 @@ table(width="100%")
210
210
td <code >index.html</code >
211
211
td
212
212
:marked
213
- The main html page that is served when someone visits your site.
213
+ The main HTML page that is served when someone visits your site.
214
214
Most of the time you'll never need to edit it.
215
- The CLI will automatically add all `js` and `css` files when building your app so you
215
+ The CLI automatically adds all `js` and `css` files when building your app so you
216
216
never need to add any `<script>` or `<link>` tags here manually.
217
217
tr
218
218
td <code >main.ts</code >
@@ -221,8 +221,8 @@ table(width="100%")
221
221
The main entry point for your app.
222
222
Compiles the application with the [JIT compiler](glossary.html#jit)
223
223
and bootstraps the application's root module (`AppModule`) to run in the browser.
224
- You can also use the [AoT compiler](glossary.html#ahead-of-time-aot-compilation)
225
- without changing any code by passing on `--aot` to `ng build` or `ng serve`.
224
+ You can also use the [AOT compiler](glossary.html#ahead-of-time-aot-compilation)
225
+ without changing any code by passing in `--aot` to `ng build` or `ng serve`.
226
226
tr
227
227
td <code >polyfills.ts</code >
228
228
td
@@ -288,15 +288,15 @@ table(width="100%")
288
288
th File
289
289
th Purpose
290
290
tr
291
- td <code >e2e/* </code >
291
+ td <code >e2e/</code >
292
292
td
293
293
:marked
294
294
Inside `e2e/` live the End-to-End tests.
295
295
They shouldn't be inside `src/` because e2e tests are really a separate app that
296
296
just so happens to test your main app.
297
297
That's also why they have their own `tsconfig.e2e.json`.
298
298
tr
299
- td <code >node_modules/... </code >
299
+ td <code >node_modules/</code >
300
300
td
301
301
:marked
302
302
`Node.js` creates this folder and puts all third party modules listed in
@@ -364,6 +364,6 @@ table(width="100%")
364
364
:marked
365
365
### Next Step
366
366
367
- If you're new to Angular, we recommend staying on the
367
+ If you're new to Angular, continue on the
368
368
[learning path](guide/learning-angular.html "Angular learning path").
369
- You can skip the "Setup" chapter since you're already using the Angular CLI setup.
369
+ You can skip the "Setup" step since you're already using the Angular CLI setup.
0 commit comments