docs(cli-quickstart): copy edits (#3298)
This commit is contained in:
Kapunahele Wong
Jules Kremer
parent
ad5df0dc60
commit
db26c5780b
|
|
@ -18,7 +18,7 @@
|
|||
"icon": "query-builder",
|
||||
"title": "CLI Quickstart",
|
||||
"subtitle": "TypeScript",
|
||||
"banner": "Use the CLI tool to quickly build Angular applications"
|
||||
"banner": "Use the CLI tool to quickly build Angular applications."
|
||||
},
|
||||
|
||||
"tutorial": {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ include _util-fns
|
|||
if you did everything by hand.
|
||||
|
||||
The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
|
||||
that can create a project, add files, and perform a variety of on-going development tasks such
|
||||
that can create a project, add files, and perform a variety of ongoing development tasks such
|
||||
as testing, bundling, and deployment.
|
||||
|
||||
The goal in this CLI QuickStart chapter is to build and run a super-simple Angular
|
||||
application in TypeScript, using Angular CLI
|
||||
The goal in this guide is to build and run a simple Angular
|
||||
application in TypeScript, using the Angular CLI
|
||||
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
|
||||
benefit _every_ Angular project.
|
||||
|
||||
|
|
@ -18,10 +18,10 @@ include _util-fns
|
|||
|
||||
You'll pursue these ends in the following high-level steps:
|
||||
|
||||
1. [Set up](#devenv) the development environment
|
||||
2. [Create](#create-proj) a new project and skeleton application
|
||||
3. [Serve](#serve) the application
|
||||
4. [Edit](#first-component) the application
|
||||
1. [Set up](#devenv) the development environment.
|
||||
2. [Create](#create-proj) a new project and skeleton application.
|
||||
3. [Serve](#serve) the application.
|
||||
4. [Edit](#first-component) the application.
|
||||
|
||||
And you can also <a href="/resources/zips/cli-quickstart/cli-quickstart.zip">download the example.</a>
|
||||
|
||||
|
|
@ -93,9 +93,9 @@ h2#first-component Step 4: Edit your first Angular component
|
|||
+makeExample('cli-quickstart/ts/src/app/app.component.ts', 'title', 'src/app/app.component.ts')(format=".")
|
||||
|
||||
:marked
|
||||
The browser reloads automatically and we see the revised title. That's nice, but we can make it look better.
|
||||
The browser reloads automatically with the revised title. That's nice, but it could look better.
|
||||
|
||||
Open `src/app/cli-quickstart.component.css` and give the component some style
|
||||
Open `src/app/cli-quickstart.component.css` and give the component some style.
|
||||
|
||||
+makeExample('cli-quickstart/ts/src/app/app.component.css', null, 'src/app/app.component.css')(format=".")
|
||||
|
||||
|
|
@ -133,7 +133,7 @@ block src-files
|
|||
:marked
|
||||
### The `src` folder
|
||||
Your app lives in the `src` folder.
|
||||
All Angular components, templates, styles, images and anything else your app needs go here.
|
||||
All Angular components, templates, styles, images, and anything else your app needs go here.
|
||||
Any files outside of this folder are meant to support building your app.
|
||||
|
||||
.filetree
|
||||
|
|
@ -173,7 +173,7 @@ table(width="100%")
|
|||
td <code>app/app.component.{ts,html,css,spec.ts}</code>
|
||||
td
|
||||
:marked
|
||||
Defines the `AppComponent` along with an HTML template, CSS stylesheet and a unit test.
|
||||
Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
|
||||
It is the **root** component of what will become a tree of nested components
|
||||
as the application evolves.
|
||||
tr
|
||||
|
|
@ -187,18 +187,18 @@ table(width="100%")
|
|||
td <code>assets/*</code>
|
||||
td
|
||||
:marked
|
||||
A folder where you can put images and anything else you need to be copied wholesale
|
||||
A folder where you can put images and anything else to be copied wholesale
|
||||
when you build your application.
|
||||
tr
|
||||
td <code>environments/*</code>
|
||||
td
|
||||
:marked
|
||||
This folder contains one file for each of your destination environments,
|
||||
each exporting simple configuration variables to use on your application.
|
||||
The files will be replaced on-the-fly when you build your app.
|
||||
You might use a different API endpoint for development than you do for production.
|
||||
Or maybe different analytics tokens.
|
||||
Maybe even some mock services.
|
||||
each exporting simple configuration variables to use in your application.
|
||||
The files are replaced on-the-fly when you build your app.
|
||||
You might use a different API endpoint for development than you do for production
|
||||
or maybe different analytics tokens.
|
||||
You might even use some mock services.
|
||||
Either way, the CLI has you covered.
|
||||
tr
|
||||
td <code>favicon.ico</code>
|
||||
|
|
@ -210,9 +210,9 @@ table(width="100%")
|
|||
td <code>index.html</code>
|
||||
td
|
||||
:marked
|
||||
The main html page that is served when someone visits your site.
|
||||
The main HTML page that is served when someone visits your site.
|
||||
Most of the time you'll never need to edit it.
|
||||
The CLI will automatically add all `js` and `css` files when building your app so you
|
||||
The CLI automatically adds all `js` and `css` files when building your app so you
|
||||
never need to add any `<script>` or `<link>` tags here manually.
|
||||
tr
|
||||
td <code>main.ts</code>
|
||||
|
|
@ -221,8 +221,8 @@ table(width="100%")
|
|||
The main entry point for your app.
|
||||
Compiles the application with the [JIT compiler](glossary.html#jit)
|
||||
and bootstraps the application's root module (`AppModule`) to run in the browser.
|
||||
You can also use the [AoT compiler](glossary.html#ahead-of-time-aot-compilation)
|
||||
without changing any code by passing on `--aot` to `ng build` or `ng serve`.
|
||||
You can also use the [AOT compiler](glossary.html#ahead-of-time-aot-compilation)
|
||||
without changing any code by passing in `--aot` to `ng build` or `ng serve`.
|
||||
tr
|
||||
td <code>polyfills.ts</code>
|
||||
td
|
||||
|
|
@ -288,7 +288,7 @@ table(width="100%")
|
|||
th File
|
||||
th Purpose
|
||||
tr
|
||||
td <code>e2e/*</code>
|
||||
td <code>e2e/</code>
|
||||
td
|
||||
:marked
|
||||
Inside `e2e/` live the End-to-End tests.
|
||||
|
|
@ -296,7 +296,7 @@ table(width="100%")
|
|||
just so happens to test your main app.
|
||||
That's also why they have their own `tsconfig.e2e.json`.
|
||||
tr
|
||||
td <code>node_modules/...</code>
|
||||
td <code>node_modules/</code>
|
||||
td
|
||||
:marked
|
||||
`Node.js` creates this folder and puts all third party modules listed in
|
||||
|
|
@ -364,6 +364,6 @@ table(width="100%")
|
|||
:marked
|
||||
### Next Step
|
||||
|
||||
If you're new to Angular, we recommend staying on the
|
||||
If you're new to Angular, continue on the
|
||||
[learning path](guide/learning-angular.html "Angular learning path").
|
||||
You can skip the "Setup" chapter since you're already using the Angular CLI setup.
|
||||
You can skip the "Setup" step since you're already using the Angular CLI setup.
|
||||
|
|
|
|||
Loading…
Reference in New Issue