iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(cli-quickstart): copy edits (#3298)

This commit is contained in:
Kapunahele Wong 2017-03-01 12:15:42 -05:00 committed by Jules Kremer
parent ad5df0dc60
commit db26c5780b
2 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/ts/latest/_data.json
View File

@ -18,7 +18,7 @@
"icon": "query-builder", "icon": "query-builder",
"title": "CLI Quickstart", "title": "CLI Quickstart",
"subtitle": "TypeScript", "subtitle": "TypeScript",
"banner": "Use the CLI tool to quickly build Angular applications" "banner": "Use the CLI tool to quickly build Angular applications."
}, },
"tutorial": { "tutorial": {

50
public/docs/ts/latest/cli-quickstart.jade
View File

@ -5,11 +5,11 @@ include _util-fns
if you did everything by hand. if you did everything by hand.
The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool 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. as testing, bundling, and deployment.
The goal in this CLI QuickStart chapter is to build and run a super-simple Angular The goal in this guide is to build and run a simple Angular
application in TypeScript, using Angular CLI application in TypeScript, using the Angular CLI
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
benefit _every_ Angular project. benefit _every_ Angular project.
@ -18,10 +18,10 @@ include _util-fns
You'll pursue these ends in the following high-level steps: You'll pursue these ends in the following high-level steps:
1. [Set up](#devenv) the development environment 1. [Set up](#devenv) the development environment.
2. [Create](#create-proj) a new project and skeleton application 2. [Create](#create-proj) a new project and skeleton application.
3. [Serve](#serve) the application 3. [Serve](#serve) the application.
4. [Edit](#first-component) 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> 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=".") +makeExample('cli-quickstart/ts/src/app/app.component.ts', 'title', 'src/app/app.component.ts')(format=".")
:marked :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=".") +makeExample('cli-quickstart/ts/src/app/app.component.css', null, 'src/app/app.component.css')(format=".")
@ -133,7 +133,7 @@ block src-files
:marked :marked
### The `src` folder ### The `src` folder
Your app lives in 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. Any files outside of this folder are meant to support building your app.
.filetree .filetree
@ -173,7 +173,7 @@ table(width="100%")
td <code>app/app.component.{ts,html,css,spec.ts}</code> td <code>app/app.component.{ts,html,css,spec.ts}</code>
td td
:marked :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 It is the **root** component of what will become a tree of nested components
as the application evolves. as the application evolves.
tr tr
@ -187,18 +187,18 @@ table(width="100%")
td <code>assets/*</code> td <code>assets/*</code>
td td
:marked :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. when you build your application.
tr tr
td <code>environments/*</code> td <code>environments/*</code>
td td
:marked :marked
This folder contains one file for each of your destination environments, This folder contains one file for each of your destination environments,
each exporting simple configuration variables to use on your application. each exporting simple configuration variables to use in your application.
The files will be replaced on-the-fly when you build your app. 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. You might use a different API endpoint for development than you do for production
Or maybe different analytics tokens. or maybe different analytics tokens.
Maybe even some mock services. You might even use some mock services.
Either way, the CLI has you covered. Either way, the CLI has you covered.
tr tr
td <code>favicon.ico</code> td <code>favicon.ico</code>
@ -210,9 +210,9 @@ table(width="100%")
td <code>index.html</code> td <code>index.html</code>
td td
:marked :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. 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. never need to add any `<script>` or `<link>` tags here manually.
tr tr
td <code>main.ts</code> td <code>main.ts</code>
@ -221,8 +221,8 @@ table(width="100%")
The main entry point for your app. The main entry point for your app.
Compiles the application with the [JIT compiler](glossary.html#jit) Compiles the application with the [JIT compiler](glossary.html#jit)
and bootstraps the application's root module (`AppModule`) to run in the browser. 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) 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`. without changing any code by passing in `--aot` to `ng build` or `ng serve`.
tr tr
td <code>polyfills.ts</code> td <code>polyfills.ts</code>
td td
@ -288,7 +288,7 @@ table(width="100%")
th File th File
th Purpose th Purpose
tr tr
td <code>e2e/*</code> td <code>e2e/</code>
td td
:marked :marked
Inside `e2e/` live the End-to-End tests. Inside `e2e/` live the End-to-End tests.
@ -296,7 +296,7 @@ table(width="100%")
just so happens to test your main app. just so happens to test your main app.
That's also why they have their own `tsconfig.e2e.json`. That's also why they have their own `tsconfig.e2e.json`.
tr tr
td <code>node_modules/...</code> td <code>node_modules/</code>
td td
:marked :marked
`Node.js` creates this folder and puts all third party modules listed in `Node.js` creates this folder and puts all third party modules listed in
@ -364,6 +364,6 @@ table(width="100%")
:marked :marked
### Next Step ### 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"). [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.