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

docs(cli-quickstart): fix incorrect filename for example (#3356)

This commit is contained in:
Kapunahele Wong 2017-03-09 00:14:36 -05:00 committed by Jules Kremer
parent 361d645d31
commit ff727cf5bd
1 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,23 +1,23 @@
include _util-fns include _util-fns
:marked :marked
Good tools make application development quicker and easier to maintain than Good tools make application development quicker and easier to maintain than
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 ongoing 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 guide is to build and run a simple Angular The goal in this guide is to build and run a simple Angular
application in TypeScript, using the 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.
By the end of the chapter, you'll have a basic understanding of development with the CLI By the end of the chapter, you'll have a basic understanding of development with the CLI
and a foundation for both these documentation samples and for real world applications. and a foundation for both these documentation samples and for real world applications.
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.
@ -29,7 +29,7 @@ include _util-fns
h2#devenv Step 1. Set up the Development Environment h2#devenv Step 1. Set up the Development Environment
:marked :marked
You need to set up your development environment before you can do anything. You need to set up your development environment before you can do anything.
Install **[Node.js® and npm](https://nodejs.org/en/download/)** Install **[Node.js® and npm](https://nodejs.org/en/download/)**
if they are not already on your machine. if they are not already on your machine.
.l-sub-section .l-sub-section
@ -39,10 +39,10 @@ h2#devenv Step 1. Set up the Development Environment
Older versions produce errors, but newer versions are fine. Older versions produce errors, but newer versions are fine.
:marked :marked
Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally. Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
code-example(language="sh" class="code-shell"). code-example(language="sh" class="code-shell").
npm install -g @angular/cli npm install -g @angular/cli
.l-main-section .l-main-section
h2#create-project Step 2. Create a new project h2#create-project Step 2. Create a new project
:marked :marked
@ -56,7 +56,7 @@ code-example(language="sh" class="code-shell").
.l-sub-section .l-sub-section
:marked :marked
Patience please. Patience please.
It takes time to set up a new project, most of it spent installing npm packages. It takes time to set up a new project, most of it spent installing npm packages.
.l-main-section .l-main-section
@ -67,41 +67,41 @@ h2#serve Step 3: Serve the application
code-example(language="sh" class="code-shell"). code-example(language="sh" class="code-shell").
cd my-app cd my-app
ng serve --open ng serve --open
:marked :marked
The `ng serve` command launches the server, watches your files, The `ng serve` command launches the server, watches your files,
and rebuilds the app as you make changes to those files. and rebuilds the app as you make changes to those files.
Using the `--open` (or just `-o`) option will automatically open your browser Using the `--open` (or just `-o`) option will automatically open your browser
on `http://localhost:4200/`. on `http://localhost:4200/`.
Your app greets you with a message: Your app greets you with a message:
figure.image-display figure.image-display
img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="The app works!") img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="The app works!")
.l-main-section .l-main-section
h2#first-component Step 4: Edit your first Angular component h2#first-component Step 4: Edit your first Angular component
:marked :marked
The CLI created the first Angular component for you. The CLI created the first Angular component for you.
This is the _root component_ and it is named `app-root`. This is the _root component_ and it is named `app-root`.
You can find it in `./src/app/app.component.ts`. You can find it in `./src/app/app.component.ts`.
:marked :marked
Open the component file and change the `title` property from _app works!_ to _My First Angular App_: Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
+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 with the revised title. That's nice, but it could 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/app.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=".")
figure.image-display figure.image-display
img(src='/resources/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app") img(src='/resources/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app")
:marked :marked
Looking good! Looking good!
@ -123,11 +123,11 @@ figure.image-display
The first file you should check out is `README.md`. The first file you should check out is `README.md`.
It has some basic information on how to use CLI commands. It has some basic information on how to use CLI commands.
Whenever you want to know more about how Angular CLI works make sure to visit Whenever you want to know more about how Angular CLI works make sure to visit
[the Angular CLI repository](https://github.com/angular/angular-cli) and [the Angular CLI repository](https://github.com/angular/angular-cli) and
[Wiki](https://github.com/angular/angular-cli/wiki). [Wiki](https://github.com/angular/angular-cli/wiki).
Some of the generated files might be unfamiliar to you. Some of the generated files might be unfamiliar to you.
block src-files block src-files
:marked :marked
@ -175,7 +175,7 @@ table(width="100%")
: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
td <code>app/app.module.ts</code> td <code>app/app.module.ts</code>
td td
@ -187,8 +187,8 @@ 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 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
@ -196,7 +196,7 @@ table(width="100%")
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 in your application. each exporting simple configuration variables to use in your application.
The files are 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.
You might even use some mock services. You might even use some mock services.
Either way, the CLI has you covered. Either way, the CLI has you covered.
@ -212,7 +212,7 @@ table(width="100%")
: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 automatically adds 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>
@ -235,7 +235,7 @@ table(width="100%")
td <code>styles.css</code> td <code>styles.css</code>
td td
:marked :marked
Your global styles go here. Your global styles go here.
Most of the time you'll want to have local styles in your components for easier maintenance, Most of the time you'll want to have local styles in your components for easier maintenance,
but styles that affect all of your app need to be in a central place. but styles that affect all of your app need to be in a central place.
tr tr
@ -249,15 +249,15 @@ table(width="100%")
td <code>tsconfig.{app|spec}.json</code> td <code>tsconfig.{app|spec}.json</code>
td td
:marked :marked
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`) TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
and for the unit tests (`tsconfig.spec.json`). and for the unit tests (`tsconfig.spec.json`).
block root-files block root-files
:marked :marked
### The root folder ### The root folder
The `src/` folder is just one of the items inside the project's root folder. The `src/` folder is just one of the items inside the project's root folder.
Other files help you build, test, maintain, document, and deploy the app. Other files help you build, test, maintain, document, and deploy the app.
These files go in the root folder next to `src/`. These files go in the root folder next to `src/`.
.filetree .filetree
@ -277,8 +277,8 @@ block root-files
.file package.json .file package.json
.file protractor.conf.js .file protractor.conf.js
.file README.md .file README.md
.file tsconfig.json .file tsconfig.json
.file tslint.json .file tslint.json
style td, th {vertical-align: top} style td, th {vertical-align: top}
table(width="100%") table(width="100%")
@ -291,15 +291,15 @@ table(width="100%")
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.
They shouldn't be inside `src/` because e2e tests are really a separate app that They shouldn't be inside `src/` because e2e tests are really a separate app that
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
`package.json` inside of it. `package.json` inside of it.
tr tr
td <code>.angular-cli.json</code> td <code>.angular-cli.json</code>
@ -359,11 +359,11 @@ table(width="100%")
Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
[Codelyzer](http://codelyzer.com/), used when running `ng lint`. [Codelyzer](http://codelyzer.com/), used when running `ng lint`.
Linting helps keep your code style consistent. Linting helps keep your code style consistent.
.l-sub-section .l-sub-section
:marked :marked
### Next Step ### Next Step
If you're new to Angular, continue 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" step since you're already using the Angular CLI setup. You can skip the "Setup" step since you're already using the Angular CLI setup.