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

docs(aio): reorganise the sidenav menu (#16934) 

Reorganizes the items in the sidenav menu and consolidates the quickstart
and cli-quickstart guides into one.
This commit is contained in:
Kapunahele Wong 2017-06-09 17:48:53 -04:00 committed by Igor Minar
parent db5e5067a0
commit d56b7ed96d
10 changed files with 704 additions and 851 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/guide/architecture.md
View File

@ -38,7 +38,7 @@ This page introduces modules; the [Angular modules](guide/ngmodule) page covers
<br class="clear">
Every Angular app has at least one Angular module class, [the _root module_](guide/appmodule "AppModule: the root module"),
Every Angular app has at least one Angular module class, [the _root module_](guide/bootstrapping "AppModule: the root module"),
conventionally named `AppModule`.
While the _root module_ may be the only module in a small application, most apps have many more

29
aio/content/guide/appmodule.md → aio/content/guide/bootstrapping.md
View File

@ -1,8 +1,8 @@
# AppModule: the root module
# Bootstrapping
An Angular module class describes how the application parts fit together.
Every application has at least one Angular module, the _root_ module
that you [bootstrap](guide/appmodule#main) to launch the application.
Every application has at least one Angular module, the _root_ module
that you [bootstrap](guide/bootstrapping#main) to launch the application.
You can call it anything you want. The conventional name is `AppModule`.
The [setup](guide/setup) instructions produce a new project with the following minimal `AppModule`.
@ -10,7 +10,6 @@ You'll evolve this module as your application grows.
<code-example path="setup/src/app/app.module.ts" title="src/app/app.module.ts" linenums="false">
</code-example>
@ -26,7 +25,7 @@ The `@NgModule` decorator identifies `AppModule` as an Angular module class (als
* **_bootstrap_** &mdash; the _root_ component that Angular creates and inserts into the `index.html` host web page.
The [Angular Modules (NgModule)](guide/ngmodule) guide dives deeply into the details of Angular modules.
All you need to know at the moment is a few basics about these three properties.
All you need to know at the moment is a few basics about these three properties.
{@a imports}
@ -35,7 +34,7 @@ All you need to know at the moment is a few basics about these three properties.
### The _imports_ array
Angular modules are a way to consolidate features that belong together into discrete units.
Many features of Angular itself are organized as Angular modules.
Many features of Angular itself are organized as Angular modules.
HTTP services are in the `HttpModule`. The router is in the `RouterModule`.
Eventually you may create a feature module.
@ -67,7 +66,7 @@ are unrelated and have completely different jobs.
The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
so you can reference them within _this_ file.
You add `import` statements to almost every application file.
You add `import` statements to almost every application file.
They have nothing to do with Angular and Angular knows nothing about them.
The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
@ -86,10 +85,10 @@ that the application needs to function properly.
You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
As you create more components, you'll add them to `declarations`.
You must declare _every_ component in an `NgModule` class.
You must declare _every_ component in an `NgModule` class.
If you use a component without declaring it, you'll see a clear error message in the browser console.
You'll learn to create two other kinds of classes &mdash;
You'll learn to create two other kinds of classes &mdash;
[directives](guide/attribute-directives) and [pipes](guide/pipes) &mdash;
that you must also add to the `declarations` array.
@ -98,7 +97,7 @@ that you must also add to the `declarations` array.
**Only _declarables_** &mdash; _components_, _directives_ and _pipes_ &mdash; belong in the `declarations` array.
**Only _declarables_** &mdash; _components_, _directives_ and _pipes_ &mdash; belong in the `declarations` array.
Do not put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes.
@ -111,14 +110,14 @@ Do not put any other kind of class in `declarations`; _not_ `NgModule` classes,
### The _bootstrap_ array
You launch the application by [_bootstrapping_](guide/appmodule#main) the root `AppModule`.
You launch the application by [_bootstrapping_](guide/bootstrapping#main) the root `AppModule`.
Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
and inserts each one into the browser DOM.
Each bootstrapped component is the base of its own tree of components.
Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
While you can put more than one component tree on a host web page, that's not typical.
While you can put more than one component tree on a host web page, that's not typical.
Most applications have only one component tree and they bootstrap a single _root_ component.
You can call the one _root_ component anything you want but most developers call it `AppComponent`.
@ -143,7 +142,7 @@ The variations depend upon how you want to compile the application and where you
In the beginning, you will compile the application dynamically with the _Just-in-Time (JIT)_ compiler
and you'll run it in a browser. You can learn about other options later.
The recommended place to bootstrap a JIT-compiled browser application is in a separate file
The recommended place to bootstrap a JIT-compiled browser application is in a separate file
in the `src` folder named `src/main.ts`
<code-example path="setup/src/main.ts" title="src/main.ts" linenums="false">
@ -156,10 +155,10 @@ This code creates a browser platform for dynamic (JIT) compilation and
bootstraps the `AppModule` described above.
The _bootstrapping_ process sets up the execution environment,
digs the _root_ `AppComponent` out of the module's `bootstrap` array,
digs the _root_ `AppComponent` out of the module's `bootstrap` array,
creates an instance of the component and inserts it within the element tag identified by the component's `selector`.
The `AppComponent` selector &mdash; here and in most documentation samples &mdash; is `my-app`
The `AppComponent` selector &mdash; here and in most documentation samples &mdash; is `my-app`
so Angular looks for a `<my-app>` tag in the `index.html` like this one ...
<code-example path="setup/src/index.html" region="my-app" title="setup/src/index.html" linenums="false">

617
aio/content/guide/cli-quickstart.md
View File

@ -1,617 +0,0 @@
# CLI QuickStart
Good tools make application development quicker and easier to maintain than
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 ongoing development tasks such
as testing, bundling, and deployment.
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/styleguide) recommendations that
benefit _every_ Angular project.
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.
<!--
You'll pursue these ends in the following high-level steps:
1. [Set up](guide/cli-quickstart#devenv) the development environment.
2. [Create](guide/cli-quickstart#create-proj) a new project and skeleton application.
3. [Serve](guide/cli-quickstart#serve) the application.
4. [Edit](guide/cli-quickstart#first-component) the application.
-->
And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
<h2 id='devenv'>
Step 1. Set up the Development Environment
</h2>
You need to set up your development environment before you can do anything.
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
if they are not already on your machine.
<div class="l-sub-section">
**Verify that you are running at least node `6.9.x` and npm `3.x.x`**
by running `node -v` and `npm -v` in a terminal/console window.
Older versions produce errors, but newer versions are fine.
</div>
Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
<code-example language="sh" class="code-shell">
npm install -g @angular/cli
</code-example>
<h2 id='create-proj'>
Step 2. Create a new project
</h2>
Open a terminal window.
Generate a new project and skeleton application by running the following commands:
<code-example language="sh" class="code-shell">
ng new my-app
</code-example>
<div class="l-sub-section">
Patience please.
It takes time to set up a new project, most of it spent installing npm packages.
</div>
<h2 id='serve'>
Step 3: Serve the application
</h2>
Go to the project directory and launch the server.
<code-example language="sh" class="code-shell">
cd my-app
ng serve --open
</code-example>
The `ng serve` command launches the server, watches your files,
and rebuilds the app as you make changes to those files.
Using the `--open` (or just `-o`) option will automatically open your browser
on `http://localhost:4200/`.
Your app greets you with a message:
<figure>
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!">
</figure>
<h2 id='first-component'>
Step 4: Edit your first Angular component
</h2>
The CLI created the first Angular component for you.
This is the _root component_ and it is named `app-root`.
You can find it in `./src/app/app.component.ts`.
Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
<code-example path="cli-quickstart/src/app/app.component.ts" region="title" title="src/app/app.component.ts" linenums="false"></code-example>
The browser reloads automatically with the revised title. That's nice, but it could look better.
Open `src/app/app.component.css` and give the component some style.
<code-example path="cli-quickstart/src/app/app.component.css" title="src/app/app.component.css" linenums="false"></code-example>
<figure>
<img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app">
</figure>
Looking good!
## What's next?
That's about all you'd expect to do in a "Hello, World" app.
You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
a small application that demonstrates the great things you can build with Angular.
Or you can stick around a bit longer to learn about the files in your brand new project.
## Project file review
An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
The first file you should check out is `README.md`.
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
[the Angular CLI repository](https://github.com/angular/angular-cli) and
[Wiki](https://github.com/angular/angular-cli/wiki).
Some of the generated files might be unfamiliar to you.
### The `src` folder
Your app lives in the `src` folder.
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.
<div class='filetree'>
<div class='file'>src</div>
<div class='children'>
<div class='file'>app</div>
<div class='children'>
<div class='file'>app.component.css</div>
<div class='file'>app.component.html</div>
<div class="file">app.component.spec.ts</div>
<div class="file">app.component.ts</div>
<div class="file">app.module.ts</div>
</div>
<div class="file">assets</div>
<div class='children'>
<div class="file">.gitkeep</div>
</div>
<div class="file">environments</div>
<div class='children'>
<div class="file">environment.prod.ts</div>
<div class="file">environment.ts</div>
</div>
<div class="file">favicon.ico</div>
<div class="file">index.html</div>
<div class="file">main.ts</div>
<div class="file">polyfills.ts</div>
<div class="file">styles.css</div>
<div class="file">test.ts</div>
<div class="file">tsconfig.app.json</div>
<div class="file">tsconfig.spec.json</div>
</div>
</div>
<style>
td, th {vertical-align: top}
</style>
<table width="100%">
<col width="20%">
</col>
<col width="80%">
</col>
<tr>
<th>
File
</th>
<th>
Purpose
</th>
</tr>
<tr>
<td>
`app/app.component.{ts,html,css,spec.ts}`
</td>
<td>
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.
</td>
</tr>
<tr>
<td>
`app/app.module.ts`
</td>
<td>
Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
Right now it declares only the `AppComponent`.
Soon there will be more components to declare.
</td>
</tr>
<tr>
<td>
`assets/*`
</td>
<td>
A folder where you can put images and anything else to be copied wholesale
when you build your application.
</td>
</tr>
<tr>
<td>
`environments/*`
</td>
<td>
This folder contains one file for each of your destination environments,
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.
</td>
</tr>
<tr>
<td>
`favicon.ico`
</td>
<td>
Every site wants to look good on the bookmark bar.
Get started with your very own Angular icon.
</td>
</tr>
<tr>
<td>
`index.html`
</td>
<td>
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 automatically adds all `js` and `css` files when building your app so you
never need to add any `&lt;script&gt;` or `&lt;link&gt;` tags here manually.
</td>
</tr>
<tr>
<td>
`main.ts`
</td>
<td>
The main entry point for your app.
Compiles the application with the [JIT compiler](guide/glossary#jit)
and bootstraps the application's root module (`AppModule`) to run in the browser.
You can also use the [AOT compiler](guide/glossary#ahead-of-time-aot-compilation)
without changing any code by passing in `--aot` to `ng build` or `ng serve`.
</td>
</tr>
<tr>
<td>
`polyfills.ts`
</td>
<td>
Different browsers have different levels of support of the web standards.
Polyfills help normalize those differences.
You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
the [Browser Support guide](guide/browser-support) for more information.
</td>
</tr>
<tr>
<td>
`styles.css`
</td>
<td>
Your global styles go here.
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.
</td>
</tr>
<tr>
<td>
`test.ts`
</td>
<td>
This is the main entry point for your unit tests.
It has some custom configuration that might be unfamiliar, but it's not something you'll
need to edit.
</td>
</tr>
<tr>
<td>
`tsconfig.{app|spec}.json`
</td>
<td>
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
and for the unit tests (`tsconfig.spec.json`).
</td>
</tr>
</table>
### The 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.
These files go in the root folder next to `src/`.
<div class='filetree'>
<div class="file">my-app</div>
<div class='children'>
<div class="file">e2e</div>
<div class='children'>
<div class="file">app.e2e-spec.ts</div>
<div class="file">app.po.ts</div>
<div class="file">tsconfig.e2e.json</div>
</div>
<div class="file">node_modules/...</div>
<div class="file">src/...</div>
<div class="file">.angular-cli.json</div>
<div class="file">.editorconfig</div>
<div class="file">.gitignore</div>
<div class="file">karma.conf.js</div>
<div class="file">package.json</div>
<div class="file">protractor.conf.js</div>
<div class="file">README.md</div>
<div class="file">tsconfig.json</div>
<div class="file">tslint.json</div>
</div>
</div>
<style>
td, th {vertical-align: top}
</style>
<table width="100%">
<col width="20%">
</col>
<col width="80%">
</col>
<tr>
<th>
File
</th>
<th>
Purpose
</th>
</tr>
<tr>
<td>
`e2e/`
</td>
<td>
Inside `e2e/` live the End-to-End tests.
They shouldn't be inside `src/` because e2e tests are really a separate app that
just so happens to test your main app.
That's also why they have their own `tsconfig.e2e.json`.
</td>
</tr>
<tr>
<td>
`node_modules/`
</td>
<td>
`Node.js` creates this folder and puts all third party modules listed in
`package.json` inside of it.
</td>
</tr>
<tr>
<td>
`.angular-cli.json`
</td>
<td>
Configuration for Angular CLI.
In this file you can set several defaults and also configure what files are included
when your project is build.
Check out the official documentation if you want to know more.
</td>
</tr>
<tr>
<td>
`.editorconfig`
</td>
<td>
Simple configuration for your editor to make sure everyone that uses your project
has the same basic configuration.
Most editors support an `.editorconfig` file.
See http://editorconfig.org for more information.
</td>
</tr>
<tr>
<td>
`.gitignore`
</td>
<td>
Git configuration to make sure autogenerated files are not commited to source control.
</td>
</tr>
<tr>
<td>
`karma.conf.js`
</td>
<td>
Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
used when running `ng test`.
</td>
</tr>
<tr>
<td>
`package.json`
</td>
<td>
`npm` configuration listing the third party packages your project uses.
You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
</td>
</tr>
<tr>
<td>
`protractor.conf.js`
</td>
<td>
End-to-end test configuration for [Protractor](http://www.protractortest.org/),
used when running `ng e2e`.
</td>
</tr>
<tr>
<td>
`README.md`
</td>
<td>
Basic documentation for your project, pre-filled with CLI command information.
Make sure to enhance it with project documentation so that anyone
checking out the repo can build your app!
</td>
</tr>
<tr>
<td>
`tsconfig.json`
</td>
<td>
TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
</td>
</tr>
<tr>
<td>
`tslint.json`
</td>
<td>
Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
[Codelyzer](http://codelyzer.com/), used when running `ng lint`.
Linting helps keep your code style consistent.
</td>
</tr>
</table>
<div class="l-sub-section">
### Next Step
If you're new to Angular, continue with the
[tutorial](tutorial "Tour of Heroes tutorial").
You can skip the "Setup" step since you're already using the Angular CLI setup.
</div>

2
aio/content/guide/ngmodule.md
View File

@ -12,7 +12,7 @@ making some of them public so external components can use them.
And there are many more options covered here.
Before reading this page, read the
[The Root Module](guide/appmodule) page, which introduces NgModules and the essentials
[The Root Module](guide/bootstrapping) page, which introduces NgModules and the essentials
of creating and maintaining a single root `AppModule` for the entire application.
This page covers NgModules in greater depth.

602
aio/content/guide/quickstart.md
View File

@ -1,79 +1,617 @@
<h1 class="no-toc">QuickStart</h1>
# QuickStart
Angular applications are made up of _components_.
A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:
Good tools make application development quicker and easier to maintain than
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 ongoing development tasks such
as testing, bundling, and deployment.
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/styleguide) recommendations that
benefit _every_ Angular project.
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.
<!--
You'll pursue these ends in the following high-level steps:
1. [Set up](guide/cli-quickstart#devenv) the development environment.
2. [Create](guide/cli-quickstart#create-proj) a new project and skeleton application.
3. [Serve](guide/cli-quickstart#serve) the application.
4. [Edit](guide/cli-quickstart#first-component) the application.
-->
And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">download the example.</a>
<code-example path="quickstart/src/app/app.component.ts" title="src/app/app.component.ts" linenums="false">
<h2 id='devenv'>
Step 1. Set up the Development Environment
</h2>
You need to set up your development environment before you can do anything.
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
if they are not already on your machine.
<div class="l-sub-section">
**Verify that you are running at least node `6.9.x` and npm `3.x.x`**
by running `node -v` and `npm -v` in a terminal/console window.
Older versions produce errors, but newer versions are fine.
</div>
Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
<code-example language="sh" class="code-shell">
npm install -g @angular/cli
</code-example>
<h2 id='create-proj'>
Step 2. Create a new project
</h2>
Open a terminal window.
Generate a new project and skeleton application by running the following commands:
<code-example language="sh" class="code-shell">
ng new my-app
</code-example>
<div class="l-sub-section">
Try this **<live-example noDownload>QuickStart example on Plunker</live-example>** without installing anything.
Try it locally with the [***QuickStart seed***](guide/setup "Setup for local development with the QuickStart seed")
and prepare for development of a real Angular application.
Patience please.
It takes time to set up a new project, most of it spent installing npm packages.
</div>
Every component begins with an `@Component` [decorator](guide/glossary#decorator '"decorator" explained')
function that takes a _metadata_ object. The metadata object describes how the HTML template and component class work together.
The `selector` property tells Angular to display the component inside a custom `<my-app>` tag in the `index.html`.
<h2 id='serve'>
Step 3: Serve the application
</h2>
<code-example path="quickstart/src/index.html" region="my-app" title="index.html (inside &lt;body&gt;)" linenums="false">
Go to the project directory and launch the server.
<code-example language="sh" class="code-shell">
cd my-app
ng serve --open
</code-example>
The `template` property defines a message inside an `<h1>` header.
The message starts with "Hello" and ends with `{{name}}`,
which is an Angular [interpolation binding](guide/displaying-data) expression.
At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
Interpolation binding is one of many Angular features you'll discover in this documentation.
The `ng serve` command launches the server, watches your files,
and rebuilds the app as you make changes to those files.
Using the `--open` (or just `-o`) option will automatically open your browser
on `http://localhost:4200/`.
Your app greets you with a message:
In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
<div class="callout is-helpful">
<figure>
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!">
</figure>
<header>
A word about TypeScript
</header>
<h2 id='first-component'>
Step 4: Edit your first Angular component
</h2>
<p>
This example is written in <a href="http://www.typescriptlang.org/" title="TypeScript">TypeScript</a>, a superset of JavaScript. Angular
uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; [this guide](guide/ts-to-js] explains how.
The CLI created the first Angular component for you.
This is the _root component_ and it is named `app-root`.
You can find it in `./src/app/app.component.ts`.
</p>
Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
<code-example path="cli-quickstart/src/app/app.component.ts" region="title" title="src/app/app.component.ts" linenums="false"></code-example>
The browser reloads automatically with the revised title. That's nice, but it could look better.
Open `src/app/app.component.css` and give the component some style.
<code-example path="cli-quickstart/src/app/app.component.css" title="src/app/app.component.css" linenums="false"></code-example>
<figure>
<img src='generated/images/guide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app">
</figure>
Looking good!
## What's next?
That's about all you'd expect to do in a "Hello, World" app.
You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
a small application that demonstrates the great things you can build with Angular.
Or you can stick around a bit longer to learn about the files in your brand new project.
## Project file review
An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
The first file you should check out is `README.md`.
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
[the Angular CLI repository](https://github.com/angular/angular-cli) and
[Wiki](https://github.com/angular/angular-cli/wiki).
Some of the generated files might be unfamiliar to you.
### The `src` folder
Your app lives in the `src` folder.
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.
<div class='filetree'>
<div class='file'>src</div>
<div class='children'>
<div class='file'>app</div>
<div class='children'>
<div class='file'>app.component.css</div>
<div class='file'>app.component.html</div>
<div class="file">app.component.spec.ts</div>
<div class="file">app.component.ts</div>
<div class="file">app.module.ts</div>
</div>
<div class="file">assets</div>
<div class='children'>
<div class="file">.gitkeep</div>
</div>
<div class="file">environments</div>
<div class='children'>
<div class="file">environment.prod.ts</div>
<div class="file">environment.ts</div>
</div>
<div class="file">favicon.ico</div>
<div class="file">index.html</div>
<div class="file">main.ts</div>
<div class="file">polyfills.ts</div>
<div class="file">styles.css</div>
<div class="file">test.ts</div>
<div class="file">tsconfig.app.json</div>
<div class="file">tsconfig.spec.json</div>
</div>
</div>
<style>
td, th {vertical-align: top}
</style>
<table width="100%">
<col width="20%">
</col>
<col width="80%">
</col>
<tr>
<th>
File
</th>
<th>
Purpose
</th>
</tr>
<tr>
<td>
`app/app.component.{ts,html,css,spec.ts}`
</td>
<td>
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.
</td>
</tr>
<tr>
<td>
`app/app.module.ts`
</td>
<td>
Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application.
Right now it declares only the `AppComponent`.
Soon there will be more components to declare.
</td>
</tr>
<tr>
<td>
`assets/*`
</td>
<td>
A folder where you can put images and anything else to be copied wholesale
when you build your application.
</td>
</tr>
<tr>
<td>
`environments/*`
</td>
<td>
This folder contains one file for each of your destination environments,
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.
</td>
</tr>
<tr>
<td>
`favicon.ico`
</td>
<td>
Every site wants to look good on the bookmark bar.
Get started with your very own Angular icon.
</td>
</tr>
<tr>
<td>
`index.html`
</td>
<td>
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 automatically adds all `js` and `css` files when building your app so you
never need to add any `&lt;script&gt;` or `&lt;link&gt;` tags here manually.
</td>
</tr>
<tr>
<td>
`main.ts`
</td>
<td>
The main entry point for your app.
Compiles the application with the [JIT compiler](guide/glossary#jit)
and bootstraps the application's root module (`AppModule`) to run in the browser.
You can also use the [AOT compiler](guide/glossary#ahead-of-time-aot-compilation)
without changing any code by passing in `--aot` to `ng build` or `ng serve`.
</td>
</tr>
<tr>
<td>
`polyfills.ts`
</td>
<td>
Different browsers have different levels of support of the web standards.
Polyfills help normalize those differences.
You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
the [Browser Support guide](guide/browser-support) for more information.
</td>
</tr>
<tr>
<td>
`styles.css`
</td>
<td>
Your global styles go here.
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.
</td>
</tr>
<tr>
<td>
`test.ts`
</td>
<td>
This is the main entry point for your unit tests.
It has some custom configuration that might be unfamiliar, but it's not something you'll
need to edit.
</td>
</tr>
<tr>
<td>
`tsconfig.{app|spec}.json`
</td>
<td>
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
and for the unit tests (`tsconfig.spec.json`).
</td>
</tr>
</table>
### The 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.
These files go in the root folder next to `src/`.
<div class='filetree'>
<div class="file">my-app</div>
<div class='children'>
<div class="file">e2e</div>
<div class='children'>
<div class="file">app.e2e-spec.ts</div>
<div class="file">app.po.ts</div>
<div class="file">tsconfig.e2e.json</div>
</div>
<div class="file">node_modules/...</div>
<div class="file">src/...</div>
<div class="file">.angular-cli.json</div>
<div class="file">.editorconfig</div>
<div class="file">.gitignore</div>
<div class="file">karma.conf.js</div>
<div class="file">package.json</div>
<div class="file">protractor.conf.js</div>
<div class="file">README.md</div>
<div class="file">tsconfig.json</div>
<div class="file">tslint.json</div>
</div>
</div>
<style>
td, th {vertical-align: top}
</style>
<table width="100%">
<col width="20%">
</col>
<col width="80%">
</col>
<tr>
<th>
File
</th>
<th>
Purpose
</th>
</tr>
<tr>
<td>
`e2e/`
</td>
<td>
Inside `e2e/` live the End-to-End tests.
They shouldn't be inside `src/` because e2e tests are really a separate app that
just so happens to test your main app.
That's also why they have their own `tsconfig.e2e.json`.
</td>
</tr>
<tr>
<td>
`node_modules/`
</td>
<td>
`Node.js` creates this folder and puts all third party modules listed in
`package.json` inside of it.
</td>
</tr>
<tr>
<td>
`.angular-cli.json`
</td>
<td>
Configuration for Angular CLI.
In this file you can set several defaults and also configure what files are included
when your project is build.
Check out the official documentation if you want to know more.
</td>
</tr>
<tr>
<td>
`.editorconfig`
</td>
<td>
Simple configuration for your editor to make sure everyone that uses your project
has the same basic configuration.
Most editors support an `.editorconfig` file.
See http://editorconfig.org for more information.
</td>
</tr>
<tr>
<td>
`.gitignore`
</td>
<td>
Git configuration to make sure autogenerated files are not commited to source control.
</td>
</tr>
<tr>
<td>
`karma.conf.js`
</td>
<td>
Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
used when running `ng test`.
</td>
</tr>
<tr>
<td>
`package.json`
</td>
<td>
`npm` configuration listing the third party packages your project uses.
You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
</td>
</tr>
<tr>
<td>
`protractor.conf.js`
</td>
<td>
End-to-end test configuration for [Protractor](http://www.protractortest.org/),
used when running `ng e2e`.
</td>
</tr>
<tr>
<td>
`README.md`
</td>
<td>
Basic documentation for your project, pre-filled with CLI command information.
Make sure to enhance it with project documentation so that anyone
checking out the repo can build your app!
</td>
</tr>
<tr>
<td>
`tsconfig.json`
</td>
<td>
TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
</td>
</tr>
<tr>
<td>
`tslint.json`
</td>
<td>
Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
[Codelyzer](http://codelyzer.com/), used when running `ng lint`.
Linting helps keep your code style consistent.
</td>
</tr>
</table>
<div class="l-sub-section">
### Next Step
### Next step
Start the [**tutorial**](tutorial "Tour of Heroes tutorial").
If you're new to Angular, continue with the
[tutorial](tutorial "Tour of Heroes tutorial").
You can skip the "Setup" step since you're already using the Angular CLI setup.
</div>

22
aio/content/guide/setup.md
View File

@ -3,11 +3,11 @@
{@a develop-locally}
The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.
It's not where you'd develop a real application.
It's not where you'd develop a real application.
You [should develop locally](guide/setup#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
Make sure you have [node and npm installed](guide/setup#install-prerequisites "What if you don't have node and npm?").
@ -124,7 +124,7 @@ Open a terminal window in the project folder and enter the following commands fo
The **QuickStart seed** contains the same application as the QuickStart playground.
But its true purpose is to provide a solid foundation for _local_ development.
Consequently, there are _many more files_ in the project folder on your machine,
Consequently, there are _many more files_ in the project folder on your machine,
most of which you can [learn about later](guide/setup-systemjs-anatomy "Setup Anatomy").
@ -187,7 +187,7 @@ Focus on the following three TypeScript (`.ts`) files in the **`/src`** folder.
All guides and cookbooks have _at least these core files_.
All guides and cookbooks have _at least these core files_.
Each file has a distinct purpose and evolves independently as the application grows.
Files outside `src/` concern building, deploying, and testing your app.
@ -239,7 +239,7 @@ The following are all in `src/`
Defines the same `AppComponent` as the one in the QuickStart playground.
It is the **root** component of what will become a tree of nested components
as the application evolves.
as the application evolves.
</td>
</tr>
@ -253,7 +253,7 @@ The following are all in `src/`
<td>
Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application.
Right now it declares only the `AppComponent`.
Soon there will be more components to declare.
</td>
@ -270,7 +270,7 @@ The following are all in `src/`
Compiles the application with the [JIT compiler](guide/glossary#jit) and
[bootstraps](guide/appmodule#main "bootstrap the application")
[bootstraps](guide/bootstrapping#main "bootstrap the application")
the application's main module (`AppModule`) to run in the browser.
The JIT compiler is a reasonable choice during the development of most projects and
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
@ -315,8 +315,8 @@ Get them now</a> if they're not already installed on your machine.
by running the commands `node -v` and `npm -v` in a terminal/console window.
Older versions produce errors.
We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
use other versions of node and npm.
@ -334,7 +334,7 @@ You can play with the sample code, share your changes with friends, and download
The [QuickStart](guide/quickstart "Angular QuickStart Playground") shows just the `AppComponent` file.
It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
so the reader can discover Angular without distraction.
The other samples are based on the QuickStart seed.
The other samples are based on the QuickStart seed.
As much fun as this is ...
@ -343,7 +343,7 @@ As much fun as this is ...
* transpiling TypeScript in the browser is slow
* the type support, refactoring, and code completion only work in your local IDE
Use the <live-example title="QuickStart Seed in Plunker">live coding</live-example> environment as a _playground_,
Use the <live-example title="QuickStart Seed in Plunker">live coding</live-example> environment as a _playground_,
a place to try the documentation samples and experiment on your own.
It's the perfect place to reproduce a bug when you want to
<a href="https://github.com/angular/angular/issues/new" title="File a documentation issue">file a documentation issue</a> or

2
aio/content/marketing/docs.md
View File

@ -16,8 +16,6 @@ Angular is a platform that makes it easy to build applications with the web. Ang
<p class="card-footer" >
<a href="guide/quickstart" title="Angular Quickstart">Quickstart</a>
</p>
<!--<p class="card-footer"><a href="guide/quickstart">Quickstart</a></p>
<p class="card-footer"><a href="guide/tutorial">Tutorial</a></p>-->
</div>
<a href="guide/architecture" class="docs-card" title="Angular Architecture">

267
aio/content/navigation.json
View File

@ -55,21 +55,10 @@
},
{
"url": "guide/quickstart",
"title": "Getting Started",
"tooltip": "A gentle introduction to Angular.",
"children": [
{
"url": "guide/quickstart",
"title": "Basic Quickstart",
"tooltip": "A quick look at an Angular app without tooling."
},
{
"url": "guide/cli-quickstart",
"title": "CLI Quickstart",
"tooltip": "A quick look at an Angular app built with the Angular CLI."
}
]},
"tooltip": "A gentle introduction to Angular."
},
{
"title": "Tutorial",
@ -117,43 +106,14 @@
"title": "Fundamentals",
"tooltip": "The fundamentals of Angular",
"children": [
{
"url": "guide/animations",
"title": "Animations",
"tooltip": "A guide to Angular's animation system."
},
{
"title": "Angular Modules",
"tooltip": "Learn how directives modify the layout and behavior of elements.",
"children": [
{
"url": "guide/appmodule",
"title": "The Root AppModule",
"tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
},
{
"url": "guide/ngmodule",
"title": "NgModule",
"tooltip": "Define application modules with @NgModule."
},
{
"url": "guide/ngmodule-faq",
"title": "Angular Module FAQs",
"tooltip": "Answers to frequently asked questions about @NgModule."
}
]},
{
"url": "guide/architecture",
"title": "Architecture",
"tooltip": "The basic building blocks of Angular applications."
},
{
"title": "Components",
"tooltip": "Components present information to users and collect their input.",
"title": "Template & Data Binding",
"tooltip": "Template & Data Binding",
"children": [
{
"url": "guide/displaying-data",
@ -175,23 +135,86 @@
"title": "Component Interaction",
"tooltip": "Share information between different directives and components."
},
{
"url": "guide/component-styles",
"title": "Component Styles",
"tooltip": "Learn how to apply CSS styles to components."
},
{
"url": "guide/dynamic-component-loader",
"title": "Dynamic Components",
"tooltip": "Load components dynamically."
},
{
"url": "guide/attribute-directives",
"title": "Attribute Directives",
"tooltip": "Attribute directives attach behavior to elements."
},
{
"url": "guide/structural-directives",
"title": "Structural Directives",
"tooltip": "Structural directives manipulate the layout of the page."
},
{
"url": "guide/pipes",
"title": "Pipes",
"tooltip": "Pipes transform displayed values within a template."
},
{
"url": "guide/animations",
"title": "Animations",
"tooltip": "A guide to Angular's animation system."
}
]
},
{
"title": "Forms",
"tooltip": "Angular Forms",
"children": [
{
"url": "guide/user-input",
"title": "User Input",
"tooltip": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models."
},
{
"url": "guide/forms",
"title": "Template-driven Forms",
"tooltip": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors."
},
{
"url": "guide/form-validation",
"title": "Form Validation",
"tooltip": "Validate user's form entries."
},
{
"url": "guide/reactive-forms",
"title": "Reactive Forms",
"tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
},
{
"url": "guide/dynamic-form",
"title": "Dynamic forms",
"tooltip": "Render dynamic forms with FormGroup."
}
]
},
{
"url": "guide/bootstrapping",
"title": "Bootstrapping",
"tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
},
{
"title": "NgModules",
"tooltip": "Learn how to use NgModules to make your apps efficient.",
"children": [
{
"url": "guide/ngmodule",
"title": "NgModules",
"tooltip": "Define application modules with @NgModule."
},
{
"url": "guide/ngmodule-faq",
"title": "NgModule FAQs",
"tooltip": "Answers to frequently asked questions about @NgModule."
}
]},
{
"title": "Dependency Injection",
@ -215,73 +238,26 @@
]
},
{
"title": "Directives",
"tooltip": "Learn how directives modify the layout and behavior of elements.",
"children": [
{
"url": "guide/attribute-directives",
"title": "Attribute Directives",
"tooltip": "Attribute directives attach behavior to elements."
},
{
"url": "guide/structural-directives",
"title": "Structural Directives",
"tooltip": "Structural directives manipulate the layout of the page."
}
]
},
{
"url": "guide/http",
"title": "HTTP",
"title": "Server Communication",
"tooltip": "Use HTTP to talk to a remote server."
},
{
"url": "guide/i18n",
"title": "Internationalization (i18n)",
"tooltip": "Translate the app's template text into multiple languages."
},
{
"url": "guide/router",
"title": "Routing & Navigation",
"tooltip": "Discover the basics of screen navigation with the Angular Router."
},
{
"title": "User Input",
"tooltip": "User Input",
"children": [
{
"url": "guide/user-input",
"title": "User Input",
"tooltip": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models."
},
{
"url": "guide/forms",
"title": "Template-driven Forms",
"tooltip": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors."
},
{
"url": "guide/reactive-forms",
"title": "Reactive Forms",
"tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
},
{
"url": "guide/form-validation",
"title": "Form Validation",
"tooltip": "Validate user's form entries."
},
{
"url": "guide/dynamic-form",
"title": "Dynamic forms",
"tooltip": "Render dynamic forms with FormGroup."
}
]}
"url": "guide/testing",
"title": "Testing",
"tooltip": "Techniques and practices for testing an Angular app."
},
{
"url": "guide/cheatsheet",
"title": "Cheat Sheet",
"tooltip": "A quick guide to common Angular coding techniques."
}
]},
{
@ -289,18 +265,21 @@
"tooltip": "Techniques for putting Angular to work in your environment",
"children": [
{
"url": "guide/i18n",
"title": "Internationalization (i18n)",
"tooltip": "Translate the app's template text into multiple languages."
},
{
"url": "guide/security",
"title": "Security",
"tooltip": "Developing for content security in Angular applications."
},
{
"url": "guide/set-document-title",
"title": "Set the document tab title",
"tooltip": "Set the browser tab title dynamically with the Angular Title service"
"url": "guide/ts-to-js",
"title": "TypeScript to JavaScript",
"tooltip": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript."
},
{
"title": "Setup & Deployment",
"tooltip": "Setup and Deployment",
@ -344,31 +323,19 @@
]
},
{
"url": "guide/testing",
"title": "Testing",
"tooltip": "Techniques and practices for testing an Angular app."
},
{
"url": "guide/ts-to-js",
"title": "TypeScript to JavaScript",
"tooltip": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript."
},
{
"title": "Upgrading",
"tooltip": "Incrementally upgrade an AngularJS application to Angular.",
"children": [
{
"url": "guide/ajs-quick-reference",
"title": "AngularJS to Angular",
"tooltip": "Learn how AngularJS concepts and techniques map to Angular."
},
{
"url": "guide/upgrade",
"title": "Upgrading from AngularJS",
"tooltip": "Incrementally upgrade an AngularJS application to Angular."
},
{
"url": "guide/ajs-quick-reference",
"title": "AngularJS to Angular",
"tooltip": "Learn how AngularJS concepts and techniques map to Angular."
}
]
},
@ -378,11 +345,15 @@
"title": "Visual Studio 2015 QuickStart",
"tooltip": "Use Visual Studio 2015 with the QuickStart files."
},
{
"url": "guide/webpack",
"title": "Webpack: An Introduction",
"tooltip": "Create Angular applications with Webpack based tooling."
"url": "guide/styleguide",
"title": "Style Guide",
"tooltip": "Write Angular with style."
},
{
"url": "guide/glossary",
"title": "Glossary",
"tooltip": "Brief definitions of the most important words in the Angular vocabulary."
}
]
},
@ -391,36 +362,6 @@
"title": "API",
"tooltip": "Details of the Angular classes and values.",
"url": "api"
},
{
"title": "References",
"tooltip": "References on Angular usage and style.",
"children": [
{
"url": "guide/change-log",
"title": "Change Log",
"tooltip": "An annotated history of recent documentation improvements."
},
{
"url": "guide/cheatsheet",
"title": "Cheat Sheet",
"tooltip": "A quick guide to common Angular coding techniques."
},
{
"url": "guide/glossary",
"title": "Glossary",
"tooltip": "Brief definitions of the most important words in the Angular vocabulary."
},
{
"url": "guide/styleguide",
"title": "Style Guide",
"tooltip": "Write Angular with style."
}
]
}
],

11
aio/content/tutorial/index.md
View File

@ -1,12 +1,5 @@
@title
Tutorial: Tour of Heroes
@intro
The Tour of Heroes tutorial takes you through the steps of creating an Angular application in TypeScript.
@description
# Tutorial: Tour of Heroes
The grand plan for this tutorial is to build an app that helps a staffing agency manage its stable of heroes.
@ -34,7 +27,7 @@ When you're done with this tutorial, the app will look like this <live-example n
## The end game
## What you'll build
Here's a visual idea of where this tutorial leads, beginning with the "Dashboard"
view and the most heroic heroes:

1
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -135,6 +135,7 @@ button.vertical-menu-item {
font-weight: 400;
padding-left: 20px;
transition: background-color 0.2s;
text-transform: uppercase;
}
.level-2 {