-
+
{{hero.name}}
diff --git a/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart
index 5e7a1b6168..d200d831ee 100644
--- a/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart
@@ -1,10 +1,10 @@
// #docplaster
// #docregion , v2
import 'dart:async';
-import 'dart:html';
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
+import 'package:angular2/platform/common.dart';
import 'hero.dart';
import 'hero_service.dart';
@@ -18,12 +18,13 @@ class HeroDetailComponent implements OnInit {
Hero hero;
final HeroService _heroService;
final RouteParams _routeParams;
+ final Location _location;
- HeroDetailComponent(this._heroService, this._routeParams);
+ HeroDetailComponent(this._heroService, this._routeParams, this._location);
Future ngOnInit() async {
- var idString = _routeParams.get('id');
- var id = int.parse(idString, onError: (_) => null);
+ var _id = _routeParams.get('id');
+ var id = int.parse(_id ?? '', onError: (_) => null);
if (id != null) hero = await (_heroService.getHero(id));
}
@@ -34,7 +35,5 @@ class HeroDetailComponent implements OnInit {
}
// #enddocregion save
- void goBack() {
- window.history.back();
- }
+ void goBack() => _location.back();
}
diff --git a/public/docs/_examples/toh-6/ts/tsconfig-aot.json b/public/docs/_examples/toh-6/ts/tsconfig-aot.json
index 97d6f592a0..e8bf8c3aee 100644
--- a/public/docs/_examples/toh-6/ts/tsconfig-aot.json
+++ b/public/docs/_examples/toh-6/ts/tsconfig-aot.json
@@ -6,7 +6,7 @@
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
- "removeComments": false,
+ "lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
diff --git a/public/docs/_examples/tsconfig.json b/public/docs/_examples/tsconfig.json
index ba08b1131d..41a6efb13d 100644
--- a/public/docs/_examples/tsconfig.json
+++ b/public/docs/_examples/tsconfig.json
@@ -8,7 +8,7 @@
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
- "removeComments": false,
+ "lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json
index 9c7e5dd2d0..54f73776dd 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json
@@ -4,12 +4,7 @@
"version": "0.0.0",
"description": "A tutorial application for AngularJS",
"repository": "https://github.com/angular/angular-phonecat",
- "licenses": [
- {
- "type": "MIT",
- "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
- }
- ],
+ "license": "MIT",
"devDependencies": {
"bower": "^1.7.7",
"http-server": "^0.9.0",
diff --git a/public/docs/_examples/user-input/ts/app/keyup.components.ts b/public/docs/_examples/user-input/ts/app/keyup.components.ts
index 79736c8a4c..aaf62bebaf 100644
--- a/public/docs/_examples/user-input/ts/app/keyup.components.ts
+++ b/public/docs/_examples/user-input/ts/app/keyup.components.ts
@@ -20,15 +20,14 @@ export class KeyUpComponent_v1 {
// #enddocregion key-up-component-1-class, key-up-component-1-class-no-type
/*
// #docregion key-up-component-1-class-no-type
- // without strong typing
- onKey(event:any) {
+ onKey(event:any) { // without type info
this.values += event.target.value + ' | ';
}
// #enddocregion key-up-component-1-class-no-type
*/
// #docregion key-up-component-1-class
- // with strong typing
- onKey(event: KeyboardEvent) {
+
+ onKey(event: KeyboardEvent) { // with type info
this.values += (event.target).value + ' | ';
}
// #docregion key-up-component-1-class-no-type
@@ -53,23 +52,22 @@ export class KeyUpComponent_v2 {
}
// #enddocregion key-up-component-2
-
//////////////////////////////////////////
// #docregion key-up-component-3
@Component({
selector: 'key-up3',
template: `
-
- {{values}}
+
+ {{value}}
`
})
export class KeyUpComponent_v3 {
- values = '';
+ value = '';
+ onEnter(value: string) { this.value = value; }
}
// #enddocregion key-up-component-3
-
//////////////////////////////////////////
// #docregion key-up-component-4
@@ -77,13 +75,14 @@ export class KeyUpComponent_v3 {
selector: 'key-up4',
template: `
+ (keyup.enter)="update(box.value)"
+ (blur)="update(box.value)">
- {{values}}
+ {{value}}
`
})
export class KeyUpComponent_v4 {
- values = '';
+ value = '';
+ update(value: string) { this.value = value; }
}
// #enddocregion key-up-component-4
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index 553ca9338a..8a19341afe 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -7,12 +7,7 @@
"test": "karma start",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
},
- "licenses": [
- {
- "type": "MIT",
- "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
- }
- ],
+ "license": "MIT",
"dependencies": {
"@angular/common": "~2.2.0",
"@angular/compiler": "~2.2.0",
@@ -27,7 +22,6 @@
"zone.js": "^0.6.25"
},
"devDependencies": {
- "@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"@types/jasmine": "^2.5.35",
"angular2-template-loader": "^0.4.0",
diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json
index 31180217a5..8eb566a5ef 100644
--- a/public/docs/dart/latest/_data.json
+++ b/public/docs/dart/latest/_data.json
@@ -7,12 +7,19 @@
"banner": "AngularDart is 2.0. View the change log to see enhancements, fixes, and breaking changes."
},
+ "cli-quickstart": {
+ "icon": "query-builder",
+ "title": "CLI Quickstart",
+ "subtitle": "TypeScript",
+ "description": "Use the CLI tool to quickly build Angular applications",
+ "hide": true
+ },
+
"quickstart": {
"icon": "query-builder",
"title": "Quickstart",
"subtitle": "Dart",
- "description": "Get up and running with Angular",
- "banner": "This QuickStart guide demonstrates how to build and run a simple Angular application."
+ "banner": "A quick look at Angular basics"
},
"tutorial": {
diff --git a/public/docs/dart/latest/_util-fns.jade b/public/docs/dart/latest/_util-fns.jade
index 86925a3fa4..49d1115ba7 100644
--- a/public/docs/dart/latest/_util-fns.jade
+++ b/public/docs/dart/latest/_util-fns.jade
@@ -22,7 +22,10 @@ include ../../../_includes/_util-fns
- var _ngRepoURL = 'https://github.com/dart-lang/angular2';
//- Don't override this value quite yet:
//- var _ngDocRepoURL = 'https://github.com/dart-lang/site-webdev';
-- var _qsRepo = 'https://github.com/angular-examples/quickstart/archive/master.zip'
+- var _qsRepo = 'https://github.com/angular-examples/quickstart'
+- var _qsRepoZip = _qsRepo + '/archive/master.zip';
+
+- var _npm = 'pub';
//- NgModule related
- var _AppModuleVsAppComp = 'AppComponent'
diff --git a/public/docs/dart/latest/glossary.jade b/public/docs/dart/latest/glossary.jade
index 6d0e7cb136..79e48a1447 100644
--- a/public/docs/dart/latest/glossary.jade
+++ b/public/docs/dart/latest/glossary.jade
@@ -19,11 +19,13 @@ block annotation-defn
block bootstrap-defn-top
:marked
- We launch an Angular application by "bootstrapping" it with the
- [bootstrap][bootstrap] method. The `bootstrap` method identifies an
- application's top level "root" [Component](#component) and optionally
+ You launch an Angular application by "bootstrapping" it with the
+ [bootstrap][bootstrap] method. Bootstraping identifies an
+ application's top level "root" [component](#component), which is
+ the first component that is loaded for the application, and optionally
registers service [providers](#provider) with the [dependency injection
system](#dependency-injection).
+ For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
[bootstrap]: !{docsLatest}/api/angular2.platform.browser/bootstrap.html
@@ -42,17 +44,6 @@ block module-defn
the chapter on "Libraries and Scripts" in the
[Dart Language Specification](https://www.dartlang.org/docs/spec/).
-block routing-component-defn
- :marked
- A [Component](#component) with an attached router.
-
- In most cases, the component became attached to a [router](#router) by means
- of a `@RouterConfig` #{decorator} that defined routes to views controlled by this component.
-
- The component's template has a `RouterOutlet` element where it can display views produced by the router.
-
- It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
-
block append snake-case-defn
:marked
Library and file names are often spelled in snake_case. Examples include:
@@ -63,6 +54,6 @@ block zone-defn
Zones are a mechanism for encapsulating and intercepting
a Dart application's asynchronous activity.
- To learn more, consult the [zones article][zones].
+ Learn more about zones in this [article][zones].
[zones]: https://www.dartlang.org/articles/libraries/zones
diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json
index c7e0240089..23f05e1019 100644
--- a/public/docs/dart/latest/guide/_data.json
+++ b/public/docs/dart/latest/guide/_data.json
@@ -2,11 +2,29 @@
"index": {
"title": "Documentation Overview",
"navTitle": "Overview",
- "description": "How to read and use this documentation",
+ "intro": "How to read and use this documentation",
"nextable": true,
"basics": true
},
+ "setup": {
+ "title": "Setup for local development",
+ "navTitle": "Setup",
+ "intro": "Install the Angular QuickStart seed for faster, more efficient development on your machine",
+ "nextable": true,
+ "hideNextPage": true,
+ "basics": true
+ },
+
+ "learning-angular": {
+ "title": "Learning Angular",
+ "navTitle": "Learning Angular",
+ "intro": "A suggested path through the documentation for Angular newcomers",
+ "nextable": true,
+ "hideNextPage": true,
+ "basics": true
+ },
+
"architecture": {
"title": "Architecture Overview",
"navTitle": "Architecture",
@@ -17,7 +35,7 @@
"displaying-data": {
"title": "Displaying Data",
- "intro": "Interpolation and other forms of property binding help us show app data in the UI.",
+ "intro": "Property binding helps show app data in the UI.",
"nextable": true,
"basics": true
},
@@ -63,16 +81,29 @@
"basics": true
},
+ "glossary": {
+ "title": "Glossary",
+ "intro": "Brief definitions of the most important words in the Angular vocabulary",
+ "basics": true
+ },
+
+ "change-log": {
+ "hide": true,
+ "title": "Change Log",
+ "intro": "An annotated history of recent documentation improvements.",
+ "basics": true
+ },
+
"ngmodule": {
+ "hide": true,
"title": "Angular Modules (NgModule)",
- "intro": "Define application modules with @NgModule",
- "hide": true
+ "intro": "Define application modules with @NgModule"
},
"animations": {
+ "hide": true,
"title": "Animations",
- "intro": "A guide to Angular's animation system.",
- "hide": true
+ "intro": "A guide to Angular's animation system."
},
"attribute-directives": {
@@ -90,12 +121,6 @@
"intro": "Learn how to apply CSS styles to components."
},
- "glossary": {
- "title": "Glossary",
- "intro": "Angular中最重要的词汇的简要定义",
- "basics": true
- },
-
"hierarchical-dependency-injection": {
"title": "Hierarchical Dependency Injectors",
"navTitle": "Hierarchical Injectors",
@@ -104,7 +129,7 @@
"server-communication": {
"title": "HTTP Client",
- "intro": "Talk to a remote server with an HTTP Client."
+ "intro": "Use an HTTP Client to talk to a remote server."
},
"lifecycle-hooks": {
@@ -113,9 +138,9 @@
},
"npm-packages": {
+ "hide": true,
"title": "Npm Packages",
- "intro": "Details of the recommended npm packages and the different kinds of package dependencies",
- "hide": true
+ "intro": "Recommended npm packages, and how to specify package dependencies"
},
"pipes": {
@@ -125,7 +150,7 @@
"router": {
"title": "Routing & Navigation",
- "intro": "Discover the basics of screen navigation with the Angular Component Router."
+ "intro": "Discover the basics of screen navigation with the Angular Router."
},
"security": {
@@ -133,32 +158,38 @@
"intro": "Developing for content security in Angular applications"
},
+ "setup-systemjs-anatomy": {
+ "hide": true,
+ "title": "Setup Anatomy",
+ "intro": "Inside the local development environment for SystemJS"
+ },
+
"structural-directives": {
"title": "Structural Directives",
"intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements."
},
"testing": {
+ "hide": true,
"title": "Testing",
- "intro": "Techniques and practices for testing an Angular app",
- "hide": true
+ "intro": "Techniques and practices for testing an Angular app"
},
"typescript-configuration": {
+ "hide": true,
"title": "TypeScript Configuration",
- "intro": "TypeScript configuration for Angular developers",
- "hide": true
+ "intro": "TypeScript configuration for Angular developers"
},
"upgrade": {
+ "hide": true,
"title": "Upgrading from 1.x",
- "intro": "Angular 1 applications can be incrementally upgraded to Angular 2.",
- "hide": true
+ "intro": "Incrementally upgrade an Angular 1 application to Angular 2."
},
"webpack": {
+ "hide": true,
"title": "Webpack: an introduction",
- "intro": "Create your Angular applications with a Webpack based tooling",
- "hide": true
+ "intro": "Create Angular applications with a Webpack based tooling"
}
}
diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade
index fb6313e574..12e8f76c4d 100644
--- a/public/docs/dart/latest/guide/dependency-injection.jade
+++ b/public/docs/dart/latest/guide/dependency-injection.jade
@@ -10,6 +10,34 @@ block ctor-syntax
We also leveraged Dart's constructor syntax for declaring parameters and
initializing properties simultaneously.
+block register-provider-ngmodule
+ :marked
+ Before we do, let's see an example of provider registration during bootstrapping:
+
+ +makeExcerpt('app/main.1.ts (discouraged)', 'bootstrap-discouraged', '')
+
+ :marked
+ The injector now knows about our `HeroService`.
+ An instance of our `HeroService` will be available for injection across our entire application.
+
+ Of course we can't help wondering about that comment telling us not to do it this way.
+ It *will* work. It's just not a best practice.
+ The bootstrap provider option is intended for configuring and overriding Angular's own
+ preregistered services, such as its routing support.
+
+ The preferred approach is to register application providers in application components.
+ Because the `HeroService` is used within the *Heroes* feature area —
+ and nowhere else — the ideal place to register it is in the top-level `HeroesComponent`.
+
+block ngmodule-vs-component
+ :marked
+ Look at the `providers` part of the `@Component` annotation.
+ An instance of the `HeroService` is now available for injection in this `HeroesComponent`
+ and all of its child components.
+
+ The `HeroesComponent` itself doesn't happen to need the `HeroService`.
+ But its child `HeroListComponent` does, so we head there next.
+
block injectable-not-always-needed-in-ts
//- The [Angular Dart Transformer](https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer)
//- generates static code to replace the use of dart:mirrors. It requires that types be
diff --git a/public/docs/dart/latest/guide/index.jade b/public/docs/dart/latest/guide/index.jade
index 7173f74d79..2b5aff7742 100644
--- a/public/docs/dart/latest/guide/index.jade
+++ b/public/docs/dart/latest/guide/index.jade
@@ -2,3 +2,4 @@ extends ../../../ts/_cache/guide/index.jade
block includes
include ../_util-fns
+ - var _angular_io = 'website';
diff --git a/public/docs/dart/latest/guide/learning-angular.jade b/public/docs/dart/latest/guide/learning-angular.jade
new file mode 100644
index 0000000000..4a5788269f
--- /dev/null
+++ b/public/docs/dart/latest/guide/learning-angular.jade
@@ -0,0 +1,4 @@
+extends ../../../ts/_cache/guide/learning-angular.jade
+
+block includes
+ include ../_util-fns
diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade
new file mode 100644
index 0000000000..95da8838da
--- /dev/null
+++ b/public/docs/dart/latest/guide/setup.jade
@@ -0,0 +1,58 @@
+extends ../../../ts/_cache/guide/setup.jade
+
+block includes
+ include ../_util-fns
+ - var _prereq = 'the Dart SDK';
+ - var _playground = 'repository';
+ - var _Install = 'Get';
+ //- npm/pub commands
+ - var _install = 'get';
+ - var _start = 'serve';
+
+block qs-seed
+ :marked
+ The QuickStart project can
+ conveniently be used to seed new projects. It contains the following core files:
+
+block core-files
+ +makeTabs(`
+ quickstart/ts/app/app.component.ts,
+ quickstart/ts/app/main.ts,
+ quickstart/ts/index.html,
+ quickstart/dart/pubspec.yaml,
+ quickstart/ts/styles.css`,
+ ',,,,quickstart',
+ `app/app.component.ts,
+ app/main.ts,
+ index.html,
+ pubspec.yaml,
+ styles.css (excerpt)`)
+
+ :marked
+ These files are organized as follows:
+
+ .filetree
+ .file angular_quickstart
+ .children
+ .file lib
+ .children
+ .file app_component.dart
+ .file pubspec.yaml
+ .file web
+ .children
+ .file index.html
+ .file main.dart
+ .file styles.css
+
+block install-tooling
+ :marked
+ Install the **[Dart SDK](https://www.dartlang.org/downloads/)**,
+ if not already on your machine, and any tools you like to use with Dart.
+ The Dart SDK includes tools such as **[pub][pub]**, the Dart package manager.
+ If you don't have a favorite Dart editor already, try
+ [WebStorm][WS], which comes with a Dart plugin.
+ You can also download [Dart plugins for other IDEs and editors][DT].
+
+ [WS]: https://confluence.jetbrains.com/display/WI/Getting+started+with+Dart
+ [DT]: https://www.dartlang.org/tools/
+ [pub]: https://www.dartlang.org/tools/pub/
diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade
index 838a02f45e..5e8d57687e 100644
--- a/public/docs/dart/latest/quickstart.jade
+++ b/public/docs/dart/latest/quickstart.jade
@@ -2,209 +2,4 @@ extends ../../ts/_cache/quickstart.jade
block includes
include _util-fns
- - var _Install = 'Get'
- - var _prereq = 'the Dart SDK'
- - var _angular_browser_uri = 'angular2/platform/browser.dart'
- - var _angular_core_uri = 'angular2/core.dart'
- - var _stepInit = 3
-
-block setup-tooling
- :marked
- Install the **[Dart SDK](https://www.dartlang.org/downloads/)**,
- if not already on your machine, and any tools you like to use with Dart.
- The Dart SDK includes tools such as **[pub][pub]**, the Dart package manager.
- If you don't have a favorite Dart editor already, try
- [WebStorm][WS], which comes with a Dart plugin.
- You can also download [Dart plugins for other IDEs and editors][DT].
-
- [WS]: https://confluence.jetbrains.com/display/WI/Getting+started+with+Dart
- [DT]: https://www.dartlang.org/tools/
- [pub]: https://www.dartlang.org/tools/pub/
-
-block package-and-config-files
- :marked
- In the project folder just created, create a file named
- **[pubspec.yaml][pubspec]** with the code below.
- This pubspec must specify the **angular2** and **browser**
- packages as dependencies, as well as the `angular2` transformer.
- It can also specify other packages and transformers for the app to use,
- such as [dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter).
-
- [pubspec]: https://www.dartlang.org/tools/pub/pubspec.html
-
- +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml')
-
-block install-packages
- :marked
- From the project folder, run `pub get` to install the angular2 and browser
- packages (along with the packages they depend on).
-
- code-example(language="sh" class="code-shell").
- pub get
-
-block create-your-app
- :marked
- Let's create a folder to hold our application and add a super-simple Angular component.
-
-block annotation-fields
- :marked
- The call to the `@Component` constructor has two
- named parameters, `selector` and `template`.
-
-block create-main
- p.
- Now we need something to tell Angular to load the root component.
- Create:
- ul
- li a #[b folder named #[code web]]
- li a file named #[code #[+adjExPath('app/main.ts')]] with the following content:
-
-block commentary-on-index-html
- :marked
- Note the `` tag in the ``, this is *where your app lives!*
-
-block run-app
- p.
- We have a few options for running our app.
- One is to launch a local HTTP server
- and then view the app in
- Dartium.
- We can use any web server, such as WebStorm's server
- or Python's SimpleHTTPServer.
- p.
- Another option is to build and serve the app using pub serve,
- and then run it by visiting http://localhost:8080 in any modern browser.
- Pub serve generates JavaScript on the fly,
- which can take a while when first visiting the page.
- Pub serve also runs in watch mode, and will recompile and subsequently serve
- any changed assets.
- p.
- Once the app is running, the browser window should show the following:
-
-block build-app
- //- Remove details of building from QS for now. (It is too early for these details.)
- if false
- .alert.is-important
- :marked
- If you don't see **Hello Angular!**, make sure you've entered all the code correctly,
- in the [proper folders](#wrap-up),
- and run `pub get`.
-
- .l-verbose-section#section-angular-run-app
- :marked
- ### Building the app (generating JavaScript)
-
- Before deploying the app, we need to generate JavaScript files.
- The `pub build` command makes that easy.
-
- code-example(language="sh" class="code-shell").
- > pub build
- Loading source assets...
-
- :marked
- The generated JavaScript appears, along with supporting files,
- under a directory named `build`.
-
- #angular_transformer
- h4 Using the Angular transformer
-
- p.
- When generating JavaScript for an Angular app,
- be sure to use the Angular transformer.
- It analyzes the Dart code,
- converting reflection-using code to static code
- that Dart's build tools can compile to faster, smaller JavaScript.
- The highlighted lines in pubspec.yaml
- configure the Angular transformer:
-
- - var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm };
- +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
-
- p.
- The entry_points item
- identifies the Dart file in our app
- that has a main() function.
- For more information, see the
- Angular
- transformer wiki page.
-
- .l-sub-section#performance
- h3 Performance, the transformer, and Angular libraries
- p.
- When an app imports bootstrap.dart,
- it also gets dart:mirrors,
- a reflection library that
- causes performance problems when compiled to JavaScript.
- Don't worry,
- the Angular transformer converts the app's entry points
- (entry_points in pubspec.yaml)
- so that they don't use mirrors.
-
- #dart_to_js_script_rewriter
- h4 Using dart_to_js_script_rewriter
-
- :marked
- To improve the app's performance, convert the
- HTML file to directly include the generated JavaScript;
- one way to do that is with `dart_to_js_script_rewriter`.
- To use the rewriter, specify `dart_to_js_script_rewriter` in both
- the `dependencies` and `transformers` sections of the pubspec.
-
- - var stylePattern = { otl: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)|(dependencies:)|(transformers:)/gm };
- +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
-
- .alert.is-important
- :marked
- The `dart_to_js_script_rewriter` transformer must be
- **after** the `angular2` transformer in `pubspec.yaml`.
-
- :marked
- For more information, see the docs for
- [dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter).
-
-block server-watching
- :marked
- To see the new version, just reload the page.
-
- .alert.is-important
- :marked
- Be sure to terminate your local server once you stop working on this app.
-
-block project-file-structure
- .filetree
- .file angular_quickstart
- .children
- .file lib
- .children
- .file app_component.dart
- .file pubspec.yaml
- .file web
- .children
- .file index.html
- .file main.dart
- .file styles.css
-
- .l-verbose-section
- :marked
- This figure doesn't show generated files and directories.
- For example, a `pubspec.lock` file
- specifies versions and other identifying information for
- the packages that our app depends on.
- The `pub build` command creates a `build` directory
- containing the JavaScript version of our app.
- Pub, IDEs, and other tools often create
- other directories and dotfiles.
-
-block project-files
- +makeTabs(`
- quickstart/ts/app/app.component.ts,
- quickstart/ts/app/main.ts,
- quickstart/ts/index.html,
- quickstart/dart/pubspec.yaml,
- quickstart/ts/styles.css`,
- ',,,,quickstart',
- `app/app.component.ts,
- app/main.ts,
- index.html,
- pubspec.yaml,
- styles.css (excerpt)`)
+ - var _on_Plunkr = '';
diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade
index 372a45d129..f9425e846d 100644
--- a/public/docs/dart/latest/tutorial/toh-pt5.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt5.jade
@@ -42,7 +42,7 @@ block angular-router
:marked
The Angular router is a combination of multiple services
(`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), and a
- configuration annotation (`RouteConfig`). We'll get them all by importing
+ configuration annotation (`RouteConfig`). You get them all by importing
the router library:
+makeExcerpt('app/app.component.ts (router imports)', 'import-router')
@@ -53,22 +53,22 @@ block angular-router
Not all apps need routing, which is why the Angular *Component Router* is
in a separate, optional library module.
- Like for any service, we make router services available to the application
- by adding them to the `providers` list. Let's update the `directives` and
+ Like for any service, you make router services available to the application
+ by adding them to the `providers` list. Update the `directives` and
`providers` lists to include the router assets:
+makeExcerpt('app/app.component.ts (excerpt)', 'directives-and-providers')
:marked
- Notice that we also removed the `HeroesComponent` from the `directives` list.
- `AppComponent` no longer shows heroes; that will be the router's job.
- We'll soon remove `` from the template too.
+ `AppComponent` no longer shows heroes, that will be the router's job,
+ so you can remove the `HeroesComponent` from the `directives` list.
+ You'll soon remove `` from the template too.
block router-config-intro
:marked
### Configure routes and add the router
- The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig`
+ The `AppComponent` doesn't have a router yet. You'll use the `@RouteConfig`
annotation to simultaneously:
- Assign a router to the component
@@ -77,12 +77,12 @@ block router-config-intro
block routerLink
:marked
Notice the `[routerLink]` binding in the anchor tag.
- We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list
+ You bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list
that tells the router where to navigate when the user clicks the link.
- We define a *routing instruction* with a *link parameters list*.
+ You define a *routing instruction* with a *link parameters list*.
The list only has one element in our little sample, the quoted ***name* of the route** to follow.
- Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`.
+ Looking back at the route configuration, confirm that `'Heroes'` is the name of the route to the `HeroesComponent`.
.l-sub-section
:marked
Learn about the *link parameters list*
@@ -90,8 +90,8 @@ block routerLink
block redirect-vs-use-as-default
:marked
- We don't need a route definition for that. Instead,
- we add `useAsDefault: true` to the dashboard *route definition* and the
+ You don't need a route definition for that. Instead,
+ add `useAsDefault: true` to the dashboard *route definition* and the
router will display the dashboard when the browser URL doesn't match an existing route.
block templateUrl-path-resolution
@@ -105,7 +105,7 @@ block templateUrl-path-resolution
block route-params
:marked
- We will no longer receive the hero in a parent component property binding.
+ You will no longer receive the hero in a parent component property binding.
The new `HeroDetailComponent` should take the `id` parameter from the router's
`RouteParams` service and use the `HeroService` to fetch the hero with that `id`.
@@ -116,12 +116,12 @@ block ngOnInit
block extract-id
:marked
- Notice how we extract the `id` by calling the `RouteParams.get` method.
+ Notice how you can extract the `id` by calling the `RouteParams.get` method.
block heroes-component-cleanup
:marked
Because the template for `HeroesComponent` no longer uses `HeroDetailComponent`
- directly — instead using the router to _navigate_ to it — we can
+ directly — instead using the router to _navigate_ to it — you can
drop the `directives` argument from `@Component` and remove the unused hero detail
import. The revised `@Component` looks like this:
@@ -138,7 +138,7 @@ block router-link-active
**The *router-link-active* class**
The Angular Router adds the `router-link-active` class to the HTML navigation element
- whose route matches the active route. All we have to do is define the style for it. Sweet!
+ whose route matches the active route. All you have to do is define the style for it. Sweet!
block file-tree-end
.filetree
diff --git a/public/docs/index.jade b/public/docs/index.jade
index ee71bf83fa..e0b4e62697 100644
--- a/public/docs/index.jade
+++ b/public/docs/index.jade
@@ -10,4 +10,4 @@
h3 Dart
- p:
Angular Dart - 最新版本
\ No newline at end of file
+ p: Angular Dart - 最新版本
\ No newline at end of file
diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index a439063f05..600b9f6b94 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -208,7 +208,7 @@ code-example(format="").
:marked
The `template` property holds the component's companion template.
A template is a form of HTML that tells Angular how to render a view.
- Our template is a single line of HTML announcing "Hello Angular!".
+ Our template is a single line of HTML announcing "Hello Angular".
Now we need something to tell Angular to load this component.
diff --git a/public/docs/ts/_cache/glossary.jade b/public/docs/ts/_cache/glossary.jade
index a9d1003708..8b4b6dae4f 100644
--- a/public/docs/ts/_cache/glossary.jade
+++ b/public/docs/ts/_cache/glossary.jade
@@ -13,7 +13,7 @@ block includes
Most Angular terms are everyday English words
with a specific meaning within the Angular system.
- We have gathered here the most prominent terms
+ This glossary lists the most prominent terms
and a few less familiar ones that have unusual or
unexpected definitions.
@@ -23,30 +23,28 @@ block includes
.l-main-section#A
+a#aot
+:marked
+ ## Ahead-of-Time (AoT) compilation
+.l-sub-section
+ :marked
+ You can compile Angular applications at build-time.
+ By compiling your application
using the compiler-cli, `ngc`, you can bootstrap directly
+ to a
module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
+ Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
+
+ifDocsFor('ts')
- a#aot
:marked
- ## Ahead-of-Time (AoT) Compilation
+ ## Angular module
.l-sub-section
:marked
- Angular applications can be compiled by developers at build-time.
- By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly
- to a Module Factory, meaning you don't need to include the Angular compiler in your javascript bundle.
- Ahead-of-time compiled applications also benefit from decreased load time and increased
- performance.
+ Helps you organize an application into cohesive blocks of functionality.
+ An Angular module identifies the components, directives, and pipes that the application uses along with the list of external Angular modules that the application needs, such as `FormsModule`.
- :marked
- ## Angular Module
- .l-sub-section
- :marked
- Helps us organize an application into cohesive blocks of functionality.
- An Angular module identifies the components, directives, and pipes that are used by the application
- along with the list of external Angular modules that the application needs, such as `FormsModule`.
+ Every Angular application has an application root module class. By convention, the class is
+ called `AppModule` and resides in a file named `app.module.ts`.
- Every Angular application has an application root module class. By convention the class is
- called `AppModule` and resides in a file named `app.component.ts`.
-
- See the [Angular Module](!{docsLatest}/guide/ngmodule.html) chapter for details and examples.
+ For details and examples, see the [Angular Module](!{docsLatest}/guide/ngmodule.html) page.
+ifDocsFor('ts|dart')
:marked
@@ -57,15 +55,14 @@ block includes
In practice, a synonym for [Decoration](#decorator).
:marked
- ## Attribute Directive
+ ## Attribute directive
.l-sub-section
:marked
- A category of [Directive](#directive) that can listen to and modify the behavior of
+ A category of [directive](#directive) that can listen to and modify the behavior of
other HTML elements, attributes, properties, and components. They are usually represented
as HTML attributes, hence the name.
- The `ngClass` directive for adding and removing CSS class names is a good example of
- an Attribute Directive.
+ A good example of an attribute directive is the `ngClass` directive for adding and removing CSS class names.
.l-main-section#B
@@ -74,7 +71,7 @@ block includes
## Barrel
.l-sub-section
:marked
- A barrel is a way to *rollup exports* from several ES2015 modules into a single convenience ES2015 module.
+ A barrel is a way to *rollup exports* from several ES2015 modules into a single convenient ES2015 module.
The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
Imagine three ES2015 modules in a `heroes` folder:
@@ -94,7 +91,7 @@ block includes
import { Hero } from '../heroes/hero.model.ts';
import { HeroService } from '../heroes/hero.service.ts';
:marked
- We can add a barrel to the `heroes` folder (called `index` by convention) that exports all of these items:
+ You can add a barrel to the `heroes` folder (called `index`, by convention) that exports all of these items:
code-example.
export * from './hero.model.ts'; // re-export all of its exports
export * from './hero.service.ts'; // re-export all of its exports
@@ -106,13 +103,9 @@ block includes
:marked
The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
- That's why we can write this:
-
- +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
-
.alert.is-important
:marked
- Note that you can often achieve this same goal using [Angular modules](#angular-module) instead.
+ Note that you can often achieve this using [Angular modules](#angular-module) instead.
:marked
## Binding
@@ -121,8 +114,8 @@ block includes
Almost always refers to [Data Binding](#data-binding) and the act of
binding an HTML object property to a data object property.
- May refer to a [Dependency Injection](#dependency-injection) binding
- between a "token" or "key" and a dependency [provider](#provider).
+ May refer to a [dependency injection](#dependency-injection) binding
+ between a "token", also referred to as a "key", and a dependency [provider](#provider).
This more rare usage should be clear in context.
:marked
@@ -130,11 +123,10 @@ block includes
.l-sub-section
block bootstrap-defn-top
:marked
- We launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
- The bootstraping identifies an application's top level "root" [Component](#component), which is the first
- component that is loaded for the application. For more information see the [QuickStart](!{docsLatest}/quickstart.html).
+ You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application.
+ For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
:marked
- One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
+ You can bootstrap multiple apps in the same `index.html`, each with its own top level root.
.l-main-section#C
:marked
@@ -142,31 +134,29 @@ block includes
.l-sub-section
:marked
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
- _except the first letter which is a lowercase letter_.
+ _except the first letter, which is lowercase_.
- Function, property, and method names are typically spelled in camelCase. Examples include: `square`, `firstName` and `getHeroes`.
+ Function, property, and method names are typically spelled in camelCase. Examples include: `square`, `firstName` and `getHeroes`. Notice that `square` is an example of how you write a single word in camelCase.
- This form is also known as **lower camel case**, to distinguish it from **upper camel case** which we call [PascalCase](#pascalcase).
- When we write "camelCase" in this documentation we always mean *lower camel case*.
+ This form is also known as **lower camel case**, to distinguish it from **upper camel case**, which is [PascalCase](#pascalcase).
+ When you see "camelCase" in this documentation it always means *lower camel case*.
:marked
## Component
.l-sub-section
:marked
- An Angular class responsible for exposing data
- to a [View](#view) and handling most of the view’s display
- and user-interaction logic.
+ An Angular class responsible for exposing data to a [view](#view) and handling most of the view’s display and user-interaction logic.
- The Component is one of the most important building blocks in the Angular system.
- It is, in fact, an Angular [Directive](#directive) with a companion [Template](#template).
+ The *component* is one of the most important building blocks in the Angular system.
+ It is, in fact, an Angular [directive](#directive) with a companion [template](#template).
- The developer applies the `!{_at}Component` !{_decoratorLink} to
+ You apply the `!{_at}Component` !{_decoratorLink} to
the component class, thereby attaching to the class the essential component metadata
that Angular needs to create a component instance and render it with its template
as a view.
Those familiar with "MVC" and "MVVM" patterns will recognize
- the Component in the role of "Controller" or "View Model".
+ the component in the role of "controller" or "view model".
.l-main-section#D
:marked
@@ -181,56 +171,48 @@ block includes
spelled in dash-case.
:marked
- ## Data Binding
+ ## Data binding
.l-sub-section
:marked
Applications display data values to a user and respond to user
actions (clicks, touches, keystrokes).
- We could push application data values into HTML, attach
- event listeners, pull changed values from the screen, and
- update application data values ... all by hand.
-
- Or we could declare the relationship between an HTML widget
- and an application data source ... and let a data binding
+ Instead of manually pushing application data values into HTML, attaching
+ event listeners, pulling changed values from the screen, and
+ updating application data values, you can use data binding by declaring the relationship between an HTML widget and data source and let the
framework handle the details.
- Data Binding is that second approach. Angular has a rich
- data binding framework with a variety of data binding
+ Angular has a rich data binding framework with a variety of data binding
operations and supporting declaration syntax.
- The many forms of binding include:
- * [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation)
- * [Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding)
- * [Event Binding](!{docsLatest}/guide/template-syntax.html#event-binding)
- * [Attribute Binding](!{docsLatest}/guide/template-syntax.html#attribute-binding)
- * [Class Binding](!{docsLatest}/guide/template-syntax.html#class-binding)
- * [Style Binding](!{docsLatest}/guide/template-syntax.html#style-binding)
- * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ng-model)
+ Read about the forms of binding in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) page:
+ * [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation).
+ * [Property binding](!{docsLatest}/guide/template-syntax.html#property-binding).
+ * [Event binding](!{docsLatest}/guide/template-syntax.html#event-binding).
+ * [Attribute binding](!{docsLatest}/guide/template-syntax.html#attribute-binding).
+ * [Class binding](!{docsLatest}/guide/template-syntax.html#class-binding).
+ * [Style binding](!{docsLatest}/guide/template-syntax.html#style-binding).
+ * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ngModel).
- Learn more about data binding in the
- [Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) chapter.
+ifDocsFor('ts|dart')
a#decorator
a#decoration
:marked
- ## Decorator | Decoration
+ ## Decorator | decoration
.l-sub-section
block decorator-defn
:marked
- A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
+ A decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
- We apply a decorator by positioning it
- immediately above or to the left of the thing it decorates.
+ To apply a decorator, position it immediately above or to the left of the thing it decorates.
- Angular has its own set of decorators to help it interoperate with our application parts.
+ Angular has its own set of decorators to help it interoperate with your application parts.
Here is an example of a `@Component` decorator that identifies a
- class as an Angular [Component](#component) and an `@Input` decorator applied to a property
- of that component.
- The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
+ class as an Angular [component](#component) and an `@Input` decorator applied to the `name` property
+ of that component. The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
```
@Component({...})
export class AppComponent {
@@ -244,77 +226,75 @@ block includes
.alert.is-important
:marked
- Always include the parentheses `()` when applying a decorator.
- A decorator is a **function** that must be called when applied.
+ Always include parentheses `()` when applying a decorator.
:marked
- ## Dependency Injection
+ ## Dependency injection
.l-sub-section
:marked
- Dependency Injection is both a design pattern and a mechanism
+ Dependency injection is both a design pattern and a mechanism
for creating and delivering parts of an application to other
parts of an application that request them.
Angular developers prefer to build applications by defining many simple parts
- that each do one thing well and then wire them together at runtime.
+ that each do one thing well and then wiring them together at runtime.
- These parts often rely on other parts. An Angular [Component](#component)
- part might rely on a service part to get data or perform a calculation. When a
- part "A" relies on another part "B", we say that "A" depends on "B" and
+ These parts often rely on other parts. An Angular [component](#component)
+ part might rely on a service part to get data or perform a calculation. When
+ part "A" relies on another part "B", you say that "A" depends on "B" and
that "B" is a dependency of "A".
- We can ask a "Dependency Injection System" to create "A"
+ You can ask a "dependency injection system" to create "A"
for us and handle all the dependencies.
If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies
and returns a fully prepared instance of "A".
Angular provides and relies upon its own sophisticated
- [Dependency Injection](dependency-injection.html) system
+ [dependency injection](dependency-injection.html) system
to assemble and run applications by "injecting" application parts
into other application parts where and when needed.
- At the core there is an [`Injector`](#injector) that returns dependency values on request.
+ At the core there is an [`injector`](#injector) that returns dependency values on request.
The expression `injector.get(token)` returns the value associated with the given token.
- A token is an Angular type (`OpaqueToken`). We rarely deal with tokens directly; most
+ A token is an Angular type (`OpaqueToken`). You rarely deal with tokens directly; most
methods accept a class name (`Foo`) or a string ("foo") and Angular converts it
- to a token. When we write `injector.get(Foo)`, the injector returns
+ to a token. When you write `injector.get(Foo)`, the injector returns
the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
- Angular makes similar requests internally during many of its operations
- as when it creates a [`Component`](#component) for display.
+ During many of its operations, Angular makes similar requests internally, such as when it creates a [`component`](#component) for display.
The `Injector` maintains an internal map of tokens to dependency values.
If the `Injector` can't find a value for a given token, it creates
a new value using a `Provider` for that token.
- A [Provider](#provider) is a recipe for
+ A [provider](#provider) is a recipe for
creating new instances of a dependency value associated with a particular token.
An injector can only create a value for a given token if it has
- a `Provider` for that token in its internal provider registry.
+ a `provider` for that token in its internal provider registry.
Registering providers is a critical preparatory step.
Angular registers some of its own providers with every injector.
We can register our own providers.
- Learn more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) chapter.
+ Read more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) page.
:marked
## Directive
.l-sub-section
:marked
- An Angular class responsible for creating, re-shaping, and interacting with HTML elements
+ An Angular class responsible for creating, reshaping, and interacting with HTML elements
in the browser DOM. Directives are Angular's most fundamental feature.
A Directive is almost always associated with an HTML element or attribute.
We often refer to such an element or attribute as the directive itself.
When Angular finds a directive in an HTML template,
it creates the matching directive class instance
- and gives that instance control over that portion of the browser DOM.
+ and gives the instance control over that portion of the browser DOM.
- Developers can invent custom HTML markup (e.g., `
`) to
- associate with their custom directives. They add this custom markup to HTML templates
- as if they were writing native HTML. In this way, directives become extensions of
+ You can invent custom HTML markup (for example, ``) to
+ associate with your custom directives. You add this custom markup to HTML templates
+ as if you were writing native HTML. In this way, directives become extensions of
HTML itself.
Directives fall into one of three categories:
@@ -324,12 +304,12 @@ block includes
They are the building blocks of an Angular application and the
developer can expect to write a lot of them.
- 1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
+ 1. [Attribute directives](#attribute-directive) that can listen to and modify the behavior of
other HTML elements, attributes, properties, and components. They are usually represented
as HTML attributes, hence the name.
- 1. [Structural Directives](#structural-directive), a directive responsible for
- shaping or re-shaping HTML layout, typically by adding, removing, or manipulating
+ 1. [Structural directives](#structural-directive), a directive responsible for
+ shaping or reshaping HTML layout, typically by adding, removing, or manipulating
elements and their children.
.l-main-section#E
@@ -342,9 +322,9 @@ block includes
The latest approved version of JavaScript is
[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
- (AKA "ES2016" or "ES7") and many Angular developers will write their applications
+ (AKA "ES2016" or "ES7") and many Angular developers write their applications
either in this version of the language or a dialect that strives to be
- compatible with it such as [TypeScript](#typesScript).
+ compatible with it, such as [TypeScript](#typescript).
Most modern browsers today only support the much older "ECMAScript 5" (AKA ES5) standard.
Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
@@ -356,17 +336,17 @@ block includes
## ES2015
.l-sub-section
:marked
- Short hand for "[ECMAScript 2015](#ecmascript=2015)".
+ Short hand for [ECMAScript](#ecmascript) 2015.
:marked
## ES6
.l-sub-section
:marked
- Short hand for "[ECMAScript 2015](#ecmascript=2015)".
+ Short hand for [ECMAScript](#ecmascript) 2015.
:marked
## ES5
.l-sub-section
:marked
- Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers.
+ Short hand for [ECMAScript](#ecmascript) 5, the version of JavaScript run by most modern browsers.
See [ECMAScript](#ecmascript).
a#F
@@ -386,41 +366,39 @@ a#H
.l-sub-section
:marked
A directive property that can be the ***target*** of a
- [Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding).
+ [property binding](!{docsLatest}/guide/template-syntax.html#property-binding) (explained in detail in the [Template Syntax](!{docsLatest}/guide/template-syntax.html) page).
Data values flow *into* this property from the data source identified
in the template expression to the right of the equal sign.
- See the [Template Syntax](!{docsLatest}/guide/template-syntax.html#inputs-outputs) chapter.
+ See the [Input and output properties](!{docsLatest}/guide/template-syntax.html#inputs-outputs) section of the [Template Syntax](!{docsLatest}/guide/template-syntax.html) page.
:marked
## Interpolation
.l-sub-section
:marked
- A form of [Property Data Binding](#data-binding) in which a
+ A form of [property data binding](#data-binding) in which a
[template expression](#template-expression) between double-curly braces
renders as text. That text may be concatenated with neighboring text
before it is assigned to an element property
- or displayed between element tags as in this example.
+ or displayed between element tags, as in this example.
code-example(language="html" escape="html").
:marked
- Learn more about interpolation in the
- [Template Syntax](!{docsLatest}/guide/template-syntax.html#interpolation) chapter.
+ Read more about [interpolation](!{docsLatest}/guide/template-syntax.html#interpolation) in the
+ [Template Syntax](!{docsLatest}/guide/template-syntax.html) page.
.l-main-section#J
-+ifDocsFor('ts')
- a#jit
+a#jit
+:marked
+ ## Just-in-Time (JiT) compilation
+.l-sub-section
:marked
- ## Just-in-Time (JiT) Compilation
- .l-sub-section
- :marked
- With Angular _Just-in-time_ bootstrapping you compile your components and modules in the
- browser
- and launch the application dynamically. This is a good choice during development.
- Consider the [Ahead-of-time](#aot) mode for production apps.
+ With Angular _just-in-time_ bootstrapping you compile your components and modules in the browser
+ and launch the application dynamically. This is a good choice during development.
+ Consider using the [ahead-of-time](#aot) mode for production apps.
.l-main-section#K
:marked
@@ -431,29 +409,29 @@ a#H
.l-main-section#L
:marked
- ## Lifecycle Hooks
+ ## Lifecycle hooks
.l-sub-section
:marked
- [Directives](#directive) and [Components](#component) have a lifecycle
- managed by Angular as it creates, updates and destroys them.
+ [Directives](#directive) and [components](#component) have a lifecycle
+ managed by Angular as it creates, updates, and destroys them.
- Developers can tap into key moments in that lifecycle by implementing
- one or more of the "Lifecycle Hook" interfaces.
+ You can tap into key moments in that lifecycle by implementing
+ one or more of the lifecycle hook interfaces.
Each interface has a single hook method whose name is the interface name prefixed with `ng`.
- For example, the `OnInit` interface has a hook method names `ngOnInit`.
+ For example, the `OnInit` interface has a hook method named `ngOnInit`.
Angular calls these hook methods in the following order:
- * `ngOnChanges` - called when an [input](#input)/[output](#output) binding values change
- * `ngOnInit` - after the first `ngOnChanges`
- * `ngDoCheck` - developer's custom change detection
- * `ngAfterContentInit` - after component content initialized
- * `ngAfterContentChecked` - after every check of component content
- * `ngAfterViewInit` - after component's view(s) are initialized
- * `ngAfterViewChecked` - after every check of a component's view(s)
+ * `ngOnChanges` - when an [input](#input)/[output](#output) binding value changes.
+ * `ngOnInit` - after the first `ngOnChanges`.
+ * `ngDoCheck` - developer's custom change detection.
+ * `ngAfterContentInit` - after component content initialized.
+ * `ngAfterContentChecked` - after every check of component content.
+ * `ngAfterViewInit` - after component's view(s) are initialized.
+ * `ngAfterViewChecked` - after every check of a component's view(s).
* `ngOnDestroy` - just before the directive is destroyed.
- Learn more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks.html) chapter.
+ Read more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks.html) page.
.l-main-section#M
@@ -465,14 +443,13 @@ a#H
:marked
In Angular, there are two types of modules:
- [Angular modules](#angular-module).
- See the [Angular Module](!{docsLatest}/guide/ngmodule.html) chapter for details and examples.
- - ES2015 modules as described in this section.
+ For details and examples, see the [Angular Modules](!{docsLatest}/guide/ngmodule.html) page.
+ - ES2015 modules, as described in this section.
:marked
Angular apps are modular.
- In general, we assemble our application from many modules, both the ones we write ourselves
- and the ones we acquire from others.
+ In general, you assemble your application from many modules, both the ones you write and the ones you acquire from others.
A typical module is a cohesive block of code dedicated to a single purpose.
@@ -480,21 +457,19 @@ a#H
A module that needs that thing, **imports** it.
The structure of Angular modules and the import/export syntax
- is based on the [ES2015](#es2015) module standard
- described [here](http://www.2ality.com/2014/09/es6-modules-final.html).
+ is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html).
An application that adheres to this standard requires a module loader to
- load modules on request and resolve inter-module dependencies.
+ load modules on request, and resolve inter-module dependencies.
Angular does not ship with a module loader and does not have a preference
- for any particular 3rd party library (although most samples use SystemJS).
- Application developers may pick any module library that conforms to the standard
+ for any particular 3rd party library (although most examples use SystemJS).
+ You may pick any module library that conforms to the standard.
Modules are typically named after the file in which the exported thing is defined.
The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts)
class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
- Developers rarely access Angular feature modules directly.
- We usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
+ You rarely access Angular feature modules directly. You usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
a#N
.l-main-section#O
@@ -504,8 +479,8 @@ a#N
## Observable
.l-sub-section
:marked
- We can think of an observable as an array whose items arrive asynchronously over time.
- Observables help us manage asynchronous data, such as data coming from a backend service.
+ You can think of an observable as an array whose items arrive asynchronously over time.
+ Observables help you manage asynchronous data, such as data coming from a backend service.
Observables are used within Angular itself, including Angular's event system and its http client service.
To use observables, Angular uses a third-party library called Reactive Extensions (RxJS).
@@ -515,12 +490,12 @@ a#N
## Output
.l-sub-section
:marked
- A directive property that can be the ***target*** of an
- [Event Binding](!{docsLatest}/guide/template-syntax.html#property-binding).
+ A directive property that can be the ***target*** of
+ [event binding](!{docsLatest}/guide/template-syntax.html#event-binding).
Events stream *out* of this property to the receiver identified
in the template expression to the right of the equal sign.
- See the [Template Syntax](!{docsLatest}/guide/template-syntax.html#inputs-outputs) chapter.
+ See the [Input and output properties](!{docsLatest}/guide/template-syntax.html#inputs-outputs) section of the [Template Syntax](!{docsLatest}/guide/template-syntax.html) page.
.l-main-section#P
@@ -528,20 +503,18 @@ a#N
## PascalCase
.l-sub-section
:marked
- The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter.
- Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`.
+ The practice of writing individual words, compound words, or phrases such that each word or abbreviation begins with a capital letter. Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`.
- This form is also known as **upper camel case**, to distinguish it from **lower camel case** which we simply call [camelCase](#camelcase).
- In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*.
+ This form is also known as **upper camel case** to distinguish it from **lower camel case**, which is simply called [camelCase](#camelcase). In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*.
:marked
## Pipe
.l-sub-section
:marked
An Angular pipe is a function that transforms input values to output values for
- display in a [view](#view). We use the `!{_at}Pipe` !{_decoratorLink}
- to associate the pipe function with a name. We can then use that
- name in our HTML to declaratively transform values on screen.
+ display in a [view](#view). Use the `!{_at}Pipe` !{_decoratorLink}
+ to associate the pipe function with a name. You then use that
+ name in your HTML to declaratively transform values on screen.
Here's an example that uses the built-in `currency` pipe to display
a numeric value in the local currency.
@@ -549,24 +522,22 @@ a#N
code-example(language="html" escape="html").
{{product.price | currency}}
:marked
- Learn more in the chapter on [pipes](!{docsLatest}/guide/pipes.html) .
+ Read more in the page on [pipes](!{docsLatest}/guide/pipes.html).
-- var _ProviderUrl = docsLatest+'/api/'+(lang == 'dart' ? 'angular2.core' : 'core/index')+'/Provider-class.html'
:marked
## Provider
.l-sub-section
:marked
- A [Provider](!{_ProviderUrl}) creates a new instance of a dependency for the
- [Dependency Injection](#dependency-injection) system.
- It relates a lookup token to code — sometimes called a "recipe" —
- that can create a dependency value.
+ A _provider_ creates a new instance of a dependency for the
+ [dependency injection](#dependency-injection) system.
+ It relates a lookup token to code—sometimes called a "recipe"—that can create a dependency value.
a#Q
.l-main-section#R
+ifDocsFor('ts|js')
:marked
- ## Reactive Forms
+ ## Reactive forms
.l-sub-section
:marked
A technique for building Angular forms through code in a component.
@@ -578,24 +549,22 @@ a#Q
- The template input elements do *not* use `ngModel`.
- The associated Angular directives are all prefixed with `Form` such as `FormGroup`, `FormControl`, and `FormControlName`.
- Reactive forms are powerful, flexible, and great for more complex data entry form scenarios, such as dynamic generation
- of form controls.
+ Reactive forms are powerful, flexible, and great for more complex data entry form scenarios such as dynamic generation of form controls.
:marked
## Router
.l-sub-section
:marked
Most applications consist of many screens or [views](#view).
- The user navigates among them by clicking links and buttons
- and taking other similar actions that cause the application to
+ The user navigates among them by clicking links and buttons,
+ and performing other similar actions that cause the application to
replace one view with another.
- The Angular [Component Router](!{docsLatest}/guide/router.html) is a richly featured mechanism for configuring
- and managing the entire view navigation process including the creation and destruction
+ The Angular [component router](!{docsLatest}/guide/router.html) is a richly featured mechanism for configuring and managing the entire view navigation process including the creation and destruction
of views.
+ifDocsFor('ts|js')
:marked
- In most cases, components becomes attached to a [router](#router) by means
+ In most cases, components become attached to a [router](#router) by means
of a `RouterConfig` that defines routes to views.
A [routing component's](#routing-component) template has a `RouterOutlet` element
@@ -604,31 +573,30 @@ a#Q
Other views in the application likely have anchor tags or buttons with `RouterLink`
directives that users can click to navigate.
- See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more.
+ For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
+ifDocsFor('ts|js')
:marked
- ## RouterModule
+ ## Router module
.l-sub-section
:marked
A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
- See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more.
+ For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
:marked
- ## Routing Component
+ ## Routing component
.l-sub-section
- block routing-component-defn
- :marked
- An Angular [Component](#component) with a RouterOutlet that displays views based on router navigations.
+ :marked
+ An Angular [component](#component) with a `RouterOutlet` that displays views based on router navigations.
- See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more.
+ For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
.l-main-section#S
+ifDocsFor('ts|js')
:marked
- ## Scoped Package
+ ## Scoped package
.l-sub-section
:marked
Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
@@ -636,9 +604,9 @@ a#Q
A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
- We import a scoped package the same way we'd import a *normal* package.
+ You import a scoped package the same way that you'd import a *normal* package.
The only difference, from a consumer perspective,
- is that the package name begins with the Angular *scope name*, `@angular`.
+ is that the *scoped package* name begins with the Angular *scope name*, `@angular`.
+makeExcerpt('architecture/ts/app/app.component.ts', 'import', '')
@@ -649,38 +617,34 @@ a#snake-case
.l-sub-section
block snake-case-defn
:marked
- The practice of writing compound words or phrases such that each word is separated by an
- underscore (`_`). This form is also known as **underscore case**.
+ The practice of writing compound words or phrases such that an
+ underscore (`_`) separates one word from the next. This form is also known as **underscore case**.
:marked
## Service
.l-sub-section
:marked
- Components are great and all, but what do we do with data or logic that are not associated
- with a specific view or that we want to share across components? We build services!
+ For data or logic that is not associated
+ with a specific view or that you want to share across components, build services.
Applications often require services such as a hero data service or a logging service.
- Our components depend on these services to do the heavy lifting.
A service is a class with a focused purpose.
We often create a service to implement features that are
independent from any specific view,
- provide share data or logic across components, or encapsulate external interactions.
+ provide shared data or logic across components, or encapsulate external interactions.
- See the [Services](!{docsLatest}/tutorial/toh-pt4.html) chapter of the tutorial to learn more.
+ For more information, see the [Services](!{docsLatest}/tutorial/toh-pt4.html) page of the [Tour of Heroes](!{docsLatest}/tutorial/) tutorial.
:marked
- ## Structural Directive
+ ## Structural directive
.l-sub-section
:marked
- A category of [Directive](#directive) that can
- shape or re-shape HTML layout, typically by adding, removing, or manipulating
- elements and their children.
+ A category of [directive](#directive) that can
+ shape or reshape HTML layout, typically by adding, removing, or manipulating
+ elements and their children; for example, the `ngIf` "conditional element" directive and the `ngFor` "repeater" directive.
- The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
- good examples in this category.
-
- See the [Structural Directives](!{docsLatest}/guide/structural-directives.html) chapter to learn more.
+ Read more in the [Structural Directives](!{docsLatest}/guide/structural-directives.html) page.
.l-main-section#T
:marked
@@ -688,14 +652,13 @@ a#snake-case
.l-sub-section
:marked
A template is a chunk of HTML that Angular uses to render a [view](#view) with
- the support and continuing guidance of an Angular [Directive](#directive),
- most notably a [Component](#component).
+ the support and continuing guidance of an Angular [directive](#directive),
+ most notably a [component](#component).
- We write templates in a special [Template Syntax](!{docsLatest}/guide/template-syntax.html).
+ifDocsFor('ts|js')
:marked
- ## Template-Driven Forms
+ ## Template-driven forms
.l-sub-section
:marked
A technique for building Angular forms using HTML forms and input elements in the view.
@@ -704,47 +667,47 @@ a#snake-case
When building template-driven forms:
- The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
- [Two-way binding](#data-binding) with `ngModel` keeps the component model in synchronization with the user's entry into the input elements.
- - Behind the scenes, Angular creates a new control for each input element that has a `name` attribute and
- two-way binding set up.
+ - Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input.
- The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
- Template-driven forms are convenient, quick, and simple and are a good choice for many basic data entry form scenarios.
+ Template-driven forms are convenient, quick, and simple. They are a good choice for many basic data entry form scenarios.
- Learn how to build template-driven forms
- in the [Forms](!{docsLatest}/guide/forms.html) chapter.
+ Read about how to build template-driven forms
+ in the [Forms](!{docsLatest}/guide/forms.html) page.
:marked
- ## Template Expression
+ ## Template expression
.l-sub-section
:marked
An expression is a !{_Lang}-like syntax that Angular evaluates within
- a [data binding](#data-binding). Learn how to write template expressions
- in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#template-expressions) chapter.
+ a [data binding](#data-binding).
+
+ Read about how to write template expressions
+ in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#template-expressions) page.
:marked
## Transpile
.l-sub-section
:marked
The process of transforming code written in one form of JavaScript
- (e.g., TypeScript) into another form of JavaScript (e.g., [ES5](#es5)).
+ (for example, TypeScript) into another form of JavaScript (for example, [ES5](#es5)).
:marked
## TypeScript
.l-sub-section
:marked
- A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015)
- language features and many features that may arrive in future versions
- of JavaScript such as [Decorators](#decorator).
+ A version of JavaScript that supports most [ECMAScript 2015](#es2015)
+ language features such as [decorators](#decorator).
- TypeScript is also noteable for its optional typing system which gives
- us compile-time type-checking and strong tooling support (e.g. "intellisense",
+ TypeScript is also noteable for its optional typing system, which gives
+ us compile-time type checking and strong tooling support (for example, "intellisense",
code completion, refactoring, and intelligent search). Many code editors
and IDEs support TypeScript either natively or with plugins.
TypeScript is the preferred language for Angular development although
- we are welcome to write in other JavaScript dialects such as [ES5](#es5).
+ you can use other JavaScript dialects such as [ES5](#es5).
- Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
+ Read more about TypeScript at [typescript.org](http://www.typescriptlang.org/).
a#U
.l-main-section#V
@@ -756,10 +719,10 @@ a#U
A view is a portion of the screen that displays information and responds
to user actions such as clicks, mouse moves, and keystrokes.
- Angular renders a view under the control of one or more [Directives](#directive),
- especially [Component](#component) directives and their companion [Templates](#template).
- The Component plays such a prominent role that we often
- find it convenient to refer to a component as a view.
+ Angular renders a view under the control of one or more [directives](#directive),
+ especially [component](#component) directives and their companion [templates](#template).
+ The component plays such a prominent role that it's often
+ convenient to refer to a component as a view.
Views often contain other views and any view might be loaded and unloaded
dynamically as the user navigates through the application, typically
@@ -779,16 +742,16 @@ a#Y
a JavaScript application's asynchronous activity.
The browser DOM and JavaScript have a limited number
- of asynchronous activities, activities such as DOM events (e.g., clicks),
+ of asynchronous activities, activities such as DOM events (for example, clicks),
[promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and
[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
calls to remote servers.
Zones intercept all of these activities and give a "zone client" the opportunity
- to take action before and after the async activity completes.
+ to take action before and after the async activity finishes.
- Angular runs our application in a zone where it can respond to
- asynchronous events by checking for data changes and updating
+ Angular runs your application in a zone where it can respond to
+ asynchronous events by checking for data changes, and updating
the information it displays via [data bindings](#data-binding).
Learn more about zones in this
diff --git a/public/docs/ts/_cache/guide/dependency-injection.jade b/public/docs/ts/_cache/guide/dependency-injection.jade
index 54ece28d23..59ec0cc72f 100644
--- a/public/docs/ts/_cache/guide/dependency-injection.jade
+++ b/public/docs/ts/_cache/guide/dependency-injection.jade
@@ -247,43 +247,49 @@ block ctor-syntax
We don't have to create an Angular injector.
Angular creates an application-wide injector for us during the bootstrap process.
-+makeExample('dependency-injection/ts/app/main.ts', 'bootstrap', 'app/main.ts (excerpt)')(format='.')
++makeExcerpt('app/main.ts', 'bootstrap')
:marked
We do have to configure the injector by registering the **providers**
that create the services our application requires.
We'll explain what [providers](#providers) are later in this chapter.
- Before we do, let's see an example of provider registration during bootstrapping:
-+makeExample('dependency-injection/ts/app/main.1.ts', 'bootstrap-discouraged')(format='.')
+block register-provider-ngmodule
+ :marked
+ We can either register a provider within an [NgModule](ngmodule.html) or in application components
-:marked
- The injector now knows about our `HeroService`.
- An instance of our `HeroService` will be available for injection across our entire application.
+ ### Registering providers in an NgModule
+ Here's our AppModule where we register a `Logger`, a `UserService`, and an `APP_CONFIG` provider.
- Of course we can't help wondering about that comment telling us not to do it this way.
- It *will* work. It's just not a best practice.
- The bootstrap provider option is intended for configuring and overriding Angular's own
- preregistered services, such as its routing support.
-
- The preferred approach is to register application providers in application components.
- Because the `HeroService` is used within the *Heroes* feature area —
- and nowhere else — the ideal place to register it is in the top-level `HeroesComponent`.
+ - var app_module_ts = 'app/app.module.ts';
+ +makeExcerpt(app_module_ts + ' (excerpt)', 'ngmodule', app_module_ts, { otl: /(providers:)/ })
+ //- The preferred approach is to register application providers in application components.
+ //- Because the `HeroService` is used within the *Heroes* feature area —
+ //- and nowhere else — the ideal place to register it is in the top-level `HeroesComponent`.
:marked
### Registering providers in a component
+
Here's a revised `HeroesComponent` that registers the `HeroService`.
-- var stylePattern = { otl: /(providers:.*),/ };
-+makeExample('dependency-injection/ts/app/heroes/heroes.component.1.ts', 'full','app/heroes/heroes.component.ts', stylePattern)(format='.')
+- var stylePattern = { otl: /(providers:[^,]+),/ };
++makeExample('app/heroes/heroes.component.1.ts', 'full', 'app/heroes/heroes.component.ts', stylePattern)(format='.')
-:marked
- Look closely at the `providers` part of the `@Component` metadata.
- An instance of the `HeroService` is now available for injection in this `HeroesComponent`
- and all of its child components.
+block ngmodule-vs-component
+ :marked
+ ### When to use the NgModule and when an application component?
- The `HeroesComponent` itself doesn't happen to need the `HeroService`.
- But its child `HeroListComponent` does, so we head there next.
+ On the one hand, a provider in an NgModule is registered in the root injector. That means that every provider
+ registered within an NgModule will be accessible in the _entire application_.
+
+ On the other hand, a provider registered in an application component is available only on that component and all its children.
+
+ We want the `APP_CONFIG` service to be available all across the application, but a `HeroService` is only used within the *Heroes*
+ feature area and nowhere else.
+
+ .l-sub-section
+ :marked
+ Also see *"Should I add app-wide providers to the root `AppModule` or the root `AppComponent`?"* in the [NgModule FAQ](../cookbook/ngmodule-faq.html#root-component-or-module).
:marked
### Preparing the HeroListComponent for injection
@@ -387,7 +393,6 @@ block ctor-syntax
The constructor now asks for an injected instance of a `Logger` and stores it in a private property called `#{_priv}logger`.
We call that property within our `getHeroes` method when anyone asks for heroes.
-//- FIXME refer to Dart API when that page becomes available.
- var injUrl = '../api/core/index/Injectable-decorator.html';
h3#injectable Why @Injectable()?
:marked
@@ -462,7 +467,7 @@ block injectable-not-always-needed-in-ts
Our logger service is quite simple:
-+makeExample('dependency-injection/ts/app/logger.service.ts', null, 'app/logger.service.ts')
++makeExample('app/logger.service.ts')
block real-logger
//- N/A
@@ -470,9 +475,9 @@ block real-logger
:marked
We're likely to need the same logger service everywhere in our application,
so we put it in the project's `#{_appDir}` folder, and
- we register it in the `providers` #{_array} of the metadata for our application root component, `AppComponent`.
+ we register it in the `providers` #{_array} of our application !{_moduleVsComp}, `!{_AppModuleVsAppComp}`.
-+makeExcerpt('app/providers.component.ts','providers-logger','app/app.component.ts (excerpt)')
++makeExcerpt('app/providers.component.ts (excerpt)', 'providers-logger','app/app.module.ts')
:marked
If we forget to register the logger, Angular throws an exception when it first looks for the logger:
@@ -497,7 +502,7 @@ code-example(format="nocode").
We must register a service *provider* with the injector, or it won't know how to create the service.
- Earlier we registered the `Logger` service in the `providers` #{_array} of the metadata for the `AppComponent` like this:
+ Earlier we registered the `Logger` service in the `providers` #{_array} of the metadata for the `AppModule` like this:
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-logger')
@@ -766,7 +771,7 @@ block what-should-we-use-as-token
The TypeScript interface disappears from the generated JavaScript.
There is no interface type information left for Angular to find at runtime.
-//- FIXME simplify once APIs are defined for Dart.
+//- FIXME update once https://github.com/dart-lang/angular2/issues/16 is addressed.
- var opaquetoken = _docsFor == 'dart' ? 'OpaqueToken' : 'OpaqueToken'
:marked
### OpaqueToken
@@ -796,9 +801,9 @@ block what-should-we-use-as-token
block dart-map-alternative
:marked
- Or we can provide and inject the configuration object in our top-level `AppComponent`.
+ Or we can provide and inject the configuration object in an ngModule like `AppModule`.
- +makeExcerpt('app/app.component.ts','providers')
+ +makeExcerpt('app/app.module.ts','ngmodule-providers')
#optional
:marked
diff --git a/public/docs/ts/_cache/guide/index.jade b/public/docs/ts/_cache/guide/index.jade
index ad7da30ac7..cd3db9d015 100644
--- a/public/docs/ts/_cache/guide/index.jade
+++ b/public/docs/ts/_cache/guide/index.jade
@@ -1,19 +1,6 @@
block includes
include ../_util-fns
-
-figure
- img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px")
-
-:marked
- This is a practical guide to Angular for experienced programmers who
- are building client applications in HTML and #{_Lang}.
-
- ## Organization
-
- The documentation is divided into major thematic sections, each
- a collection of pages devoted to that theme.
-
-block js-alert
+ - var _angular_io = 'angular.io';
- var __lang = _docsFor || current.path[1] || 'ts';
- var guideData = public.docs[__lang].latest.guide._data;
@@ -22,6 +9,19 @@ block js-alert
- if (!guideData[page].basics && !guideData[page].hide) { advancedLandingPage = page; break; }
- }
- var advancedUrl = './' + advancedLandingPage + '.html'
+
+
+:marked
+ This page describes the Angular documentation at a high level.
+ If you're new to Angular, you may want to visit "[Learning Angular](learning-angular.html)" first.
+
+ ## Themes
+
+ The documentation is divided into major thematic sections, each
+ a collection of pages devoted to that theme.
+
+block js-alert
+
- var top="vertical-align:top"
table(width="100%")
col(width="15%")
@@ -30,19 +30,22 @@ table(width="100%")
td QuickStart
td
:marked
- The foundation for every page and sample in this documentation.
+ A first taste of Angular with zero installation.
+ Run "Hello World" in an online code editor and start playing with live code.
tr(style=top)
- td Guide
+ td Guide
td
:marked
- The essential ingredients of Angular development.
+ Learn the Angular basics (you're already here!) like the setup for local development,
+ displaying data and accepting user input, injecting application services into components,
+ and building simple forms.
tr(style=top)
- td API Reference
+ td API Reference
td
:marked
- Authoritative details about each member of the Angular libraries.
+ Authoritative details about each of the Angular libraries.
tr(style=top)
- td Tutorial
+ td Tutorial
td
:marked
A step-by-step, immersive approach to learning Angular that
@@ -53,62 +56,37 @@ table(width="100%")
:marked
In-depth analysis of Angular features and development practices.
tr(style=top)
- td Cookbook
+ td Cookbook
td
:marked
Recipes for specific application challenges, mostly code snippets with a minimum of exposition.
:marked
- ## Learning path
-
- You don't have to read the guide straight through. Most pages stand on their own.
-
- For those new to Angular, the recommended learning path runs through the *Guide* section:
-
- 1. For the big picture, read the [Architecture](architecture.html) overview.
-
- 1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular.
- It shows you how to set up the libraries and tools you'll need to write *any* Angular app.
-
- 1. Take the *Tour of Heroes* [tutorial](../tutorial), which picks up where QuickStart leaves off,
- and builds a simple data-driven app. The app demonstrates the essential characteristics of a professional application:
- a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
-
- 1. [Displaying Data](displaying-data.html) explains how to display information on the screen.
-
- 1. [User Input](user-input.html) covers how Angular responds to user behavior.
-
- 1. [Forms](forms.html) handles user data entry and validation within the UI.
-
- 1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
- from small, single-purpose parts.
-
- 1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
-
- After reading the above sections, you can skip to any other pages on this site.
+ A few early pages are written as tutorials and are clearly marked as such.
+ The rest of the pages highlight key points in code rather than explain each step necessary to build the sample.
+ You can always get the full source through the #{_liveLink}s.
## Code samples
- Each page includes code snippets that you can reuse in your applications.
- These snippets are excerpts from a sample application that accompanies the page.
+ Each page includes code snippets from a sample application that accompanies the page.
+ You can reuse these snippets in your applications.
- Look for a link to a running version of that sample near the top of each page,
+ Look for a link to a running version of that sample, often near the top of the page,
such as this from the [Architecture](architecture.html) page.
-
- The link launches a browser-based code editor where you can inspect, modify, save, and download the code.
-
-
- A few early pages are written as tutorials and are clearly marked as such.
- The rest of the pages highlight key points in code rather than explain each step necessary to build the sample.
- You can always get the full source through the #{_liveLink}.
+
+ The link launches a browser-based, code editor where you can inspect, modify, save, and download the code.
+
## Reference pages
- - The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
- - The [Glossary](glossary.html) defines terms that Angular developers should know.
- - The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
+ * The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
+ * The [Glossary](glossary.html) defines terms that Angular developers should know.
+ The [Change Log](change-log.html) announces what's new and changed in the documentation.
+ * The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
- ## We welcome feedback!
+ ## Feedback
- - Use the [website GitHub repo](!{_ngDocRepoURL}) for **documentation** issues and pull requests.
- - Use the [Angular GitHub repo](!{_ngRepoURL}) to report issues with **Angular** itself.
+ We welcome feedback!
+
+ * Use the !{_angular_io} Github repository for **documentation** issues and pull requests.
+ * Use the Angular Github repository to report issues with **Angular** itself.
diff --git a/public/docs/ts/_cache/guide/learning-angular.jade b/public/docs/ts/_cache/guide/learning-angular.jade
new file mode 100644
index 0000000000..135adf1254
--- /dev/null
+++ b/public/docs/ts/_cache/guide/learning-angular.jade
@@ -0,0 +1,44 @@
+block includes
+ include ../_util-fns
+
+figure
+ img(src="/resources/images/devguide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px" )
+:marked
+ Everyone learns differently.
+ You don't have to read the documentation straight through. Most pages stand on their own.
+ Those new to Angular may wish to follow this popular learning path.
+
+
+:marked
+ 1. [Setup](setup.html "Setup locally withe Quickstart seed") for local Angular development, if you haven't already done so.
+
+ 1. Take the [*Tour of Heroes* tutorial](../tutorial "Tour of Heroes").
+
+ The *Tour of Heroes* takes you step-by-step from [setup](setup.html)
+ to a full-featured example that demonstrates the essential characteristics of a professional application:
+ a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
+
+ 1. Read the [Architecture](architecture.html) overview for the big picture.
+
+ [The Root Module](appmodule.html) introduces the `NgModule` class that tells Angular how to compile and run your application.
+
+
+ 1. [Displaying Data](displaying-data.html) shows how data binding puts component property values on screen.
+
+ 1. [User Input](user-input.html) explains how to respond to user-initiated DOM events.
+
+ 1. [Forms](forms.html) covers data entry and validation within the UI.
+
+ 1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
+ from small, single-purpose parts.
+
+ 1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
+
+ After reading the above sections, feel free to skip around among the other pages on this site.
+
+.l-sub-section
+ :marked
+ ### Next Step
+
+ Try the [tutorial](../tutorial "Tour of Heroes") if you're ready to start coding or
+ visit the [Architecture](architecture.html "Basic Concepts") guide if you prefer to learn the basic concepts first.
diff --git a/public/docs/ts/_cache/guide/server-communication.jade b/public/docs/ts/_cache/guide/server-communication.jade
index 1afea82d84..ae65322dd7 100644
--- a/public/docs/ts/_cache/guide/server-communication.jade
+++ b/public/docs/ts/_cache/guide/server-communication.jade
@@ -648,8 +648,9 @@ a#in-mem-web-api
:marked
## Appendix: Tour of Heroes in-memory server
- If we only cared to retrieve data, we could tell Angular to get the heroes from a `heroes.json` file like this one:
-+makeJson('server-communication/ts/app/heroes.json', null, 'app/heroes.json')(format=".")
+ If the app only needed to retrieve data, you could get the heroes from a `heroes.json` file:
+- var _heroesJsonPath = (_docsFor == 'dart' ? 'web' : 'app') + '/heroes.json';
++makeJson('server-communication/' + _docsFor + '/' + _heroesJsonPath, null, _heroesJsonPath)(format=".")
.l-sub-section
:marked
We wrap the heroes array in an object with a `data` property for the same reason that a data server does:
diff --git a/public/docs/ts/_cache/guide/setup.jade b/public/docs/ts/_cache/guide/setup.jade
new file mode 100644
index 0000000000..a98c37c704
--- /dev/null
+++ b/public/docs/ts/_cache/guide/setup.jade
@@ -0,0 +1,180 @@
+block includes
+ include ../_util-fns
+ - var _prereq = 'node and npm';
+ - var _playground = 'playground';
+ - var _Install = 'Install';
+ //- npm commands
+ - var _install = 'install';
+ - var _start = 'start';
+
+a#develop-locally
+:marked
+ ## Setup a local development environment
+
+
+ The QuickStart live-coding example is an Angular _playground_.
+ It's not where you'd develop a real application.
+ You [should develop locally](#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](!{_qsRepo} "Install the github QuickStart repo").
+
+ Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
+ Then ...
+ 1. Create a project folder (you can call it `quickstart` and rename it later).
+ 1. [Clone](#clone "Clone it from github") or [download](#download "download it from github") the **QuickStart seed** into your project folder.
+ 1. !{_Install} [!{_npm}](#install-prerequisites "What if you don't have !{_prereq}?") packages.
+ 1. Run `!{_npm} !{_start}` to launch the sample application.
+
+a#clone
+:marked
+ ### Clone
+
+ Perform the _clone-to-launch_ steps with these terminal commands.
+
+code-example(language="sh" class="code-shell").
+ git clone !{_qsRepo}.git quickstart
+ cd quickstart
+ !{_npm} !{_install}
+ !{_npm} !{_start}
+
+a#download
+:marked
+ ### Download
+ Download the QuickStart seed
+ and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
+
+code-example(language="sh" class="code-shell").
+ cd quickstart
+ !{_npm} !{_install}
+ !{_npm} !{_start}
+
+.l-main-section#seed
+:marked
+ ## What's in the QuickStart seed?
+
+block qs-seed
+ :marked
+ The **QuickStart seed** contains the same application as the QuickStart playground
+ and even has its own _playground_
+ that accomodates development of richer examples in a live coding environment.
+
+ But it's true purpose is to provide a solid foundation for _local_ development.
+ Consequently, there are _many more files_ in the project folder on your machine,
+ most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
+
+block core-files
+ :marked
+ Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
+
+ .filetree
+ .file app
+ .children
+ .file app.component.ts
+ .file app.module.ts
+ .file main.ts
+
+ +makeTabs(`
+ setup/ts/app/app.component.ts,
+ setup/ts/app/app.module.ts,
+ setup/ts/app/main.ts
+ `, '', `
+ app/app.component.ts,
+ app/app.module.ts,
+ app/main.ts
+ `)(format='.')
+
+:marked
+ All guides and cookbooks have _at least these core files_. Each file has a distinct purpose and evolves independently as the application grows.
+
+style td, th {vertical-align: top}
+table(width="100%")
+ col(width="20%")
+ col(width="80%")
+ tr
+ th File
+ th Purpose
+ tr
+ td app.component.ts
+ td
+ :marked
+ 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.
+ tr(if-docs="ts")
+ td app.module.ts
+ td
+ :marked
+ Defines `AppModule`, the [root module](appmodule.html "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.
+ tr
+ td main.ts
+ td
+ :marked
+ Compiles the application with the [JiT compiler](../glossary.html#jit)
+ and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser.
+ That's a reasonable choice for the development of most projects and
+ it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
+ You'll learn about alternative compiling and deployment options later in the documentation.
+
+.l-sub-section
+ :marked
+ ### Next Step
+
+ If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
+
+br
+br
+
+a#install-prerequisites
+.l-main-section
+:marked
+ ## Appendix: !{_prereq}
+block install-tooling
+ :marked
+ Node.js and npm are essential to modern web development with Angular and other platforms.
+ Node powers client development and build tools.
+ The _npm_ package manager, itself a _node_ application, installs JavaScript libraries.
+
+
+ Get them now if they're not already installed on your machine.
+
+ **Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
+ 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
+ use other versions of node and npm.
+
++ifDocsFor('ts')
+ a#why-locally
+ .l-main-section
+ :marked
+ ## Appendix: Why develop locally
+
+ Live coding in the browser is a great way to explore Angular.
+
+ Links on almost every documentation page open completed samples in the browser.
+ You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
+
+ The [QuickStart](../quickstart.html "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.
+
+ As much fun as this is ...
+ * you can't ship your app in plunker
+ * you aren't always online when writing code
+ * transpiling TypeScript in the browser is slow
+ * the type support, refactoring, and code completion only work in your local IDE
+
+ Use the live coding 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
+ file a documentation issue or
+ file an issue with Angular itself.
+
+ For real development, we strongly recommend [developing locally](#develop-locally).
diff --git a/public/docs/ts/_cache/quickstart.jade b/public/docs/ts/_cache/quickstart.jade
index 817f34361f..cf978e0a00 100644
--- a/public/docs/ts/_cache/quickstart.jade
+++ b/public/docs/ts/_cache/quickstart.jade
@@ -1,382 +1,45 @@
block includes
include _util-fns
- - var _Install = 'Install'
- - var _prereq = 'Node.js and npm'
- - var _angular_browser_uri = '@angular/platform-browser-dynamic'
- - var _angular_core_uri = '@angular/core'
- - var _stepInit = 4 // Step # after NgModule step
- - var _quickstartSrcURL='https://github.com/angular/quickstart/blob/master/README.md'
+ - var _on_Plunkr = 'on Plunkr';
-//- TS/Dart shared step counter
-- var step = _stepInit
+:marked
+ Angular applications are made 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:
+
++makeExample('app/app.component.ts')(format='.')
+
+:marked
+ You can try this out without installing anything. Open the QuickStart example !{_on_Plunkr} in another tab
+ and follow along.
+
+ Every component begins with an `@Component` [!{_decorator}](glossary.html#!{_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 `` tag in the `index.html`.
++makeExample('index.html','my-app','index.html (inside )')(format='.')
+:marked
+ The `template` property defines a message inside an `` header.
+ The message starts with "Hello" and ends with `{{name}}`
+ which is an Angular [interpolation binding](guide/displaying-data.html) expression.
+ At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
+
+ In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
+
+ Interpolation binding is one of many Angular features you'll discover in this documentation.
+ifDocsFor('ts')
- aside.is-right
- :marked
- The live example link opens the finished application in
- Plunker so that you can interact
- with the code. You'll find live examples at the start of most sections.
-
-:marked
- The QuickStart application has the structure of a real-world Angular application and
- displays the simple message:
-
-figure.image-display
- img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
-
-:marked
- **Try it out**. Here's a link to a .
-
-+ifDocsFor('ts')
- :marked
- You can also
- clone the entire QuickStart application from GitHub.
-
-h1 Build this application!
-
-:marked
- - [Prerequisite](#prereq): Install #{_prereq}.
- - [Step 1](#create-and-configure): Create and configure the project.
- - [Step 2](#ngmodule): Create your application.
-
[Step 3](#root-component): Create a component and add it to your application.
- - [Step !{step++}](#main): Start up your application.
- - [Step !{step++}](#index): Define the web page that hosts the application.
- - [Step !{step++}](#build-and-run): Build and run the application.
- - [Step !{step++}](#make-changes): Make some live changes.
- - [Wrap up and Next Steps](#wrap-up)
-
-- var step = _stepInit // reinitialize step counter for headers to come
-
-.l-main-section#prereq
-h2 Prerequisite: Install #{_prereq}
-
-block setup-tooling
- :marked
- If Node.js and npm aren't already on your machine, install them. Our examples require node **v4.x.x** or higher and
- npm **3.x.x** or higher. To check which version you are using, run `node -v` and `npm -v`
- in a terminal window.
-
-.l-main-section
-h2#create-and-configure Step 1: Create and configure the project
-
-- var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'configuration files'
-
-:marked
- In this step you will:
- * [Create the project folder](#create-the-project-folder)
- * [Create #{_package_and_config_files}](#add-config-files)
- * [#{_Install} packages](#install-packages)
-
-h3 Create the project folder
-:marked
- Using a terminal window, create a directory for the project, and change into this
- directory.
-
-- var _ = _docsFor == 'dart' ? '_' : '-';
-code-example(language="sh" class="code-shell").
- mkdir angular!{_}quickstart
- cd angular!{_}quickstart
-
-h3#add-config-files Create #{_package_and_config_files}
-block package-and-config-files
- - var _tsconfigUri = 'guide/typescript-configuration.html#tsconfig'
-
- p Our typical Angular project needs several configuration files:
- ul
- li.
- #[b package.json] identifies npm package dependencies for the project.
- li.
- #[b tsconfig.json] defines how the TypeScript compiler generates JavaScript from the project's
- files.
- li.
- #[b systemjs.config.js] provides information to a module loader about where to find
- application modules, and registers all the necessary packages. It also
- contains other packages that will be needed by later documentation examples.
-
- p.
- Create each of these files in your project directory. Populate them by pasting in text from
- the tabs in the example box below.
-
- a#config-files
- +makeTabs(`
- quickstart/ts/package.1.json,
- quickstart/ts/tsconfig.1.json,
- quickstart/ts/systemjs.config.1.js
- `, '', `
- package.json,
- tsconfig.json,
- systemjs.config.js
- `)
-
- p.
- Learn more about these configuration files in the
- #[a(href="guide/npm-packages.html") Npm Package Configuration] guide and the
- #[a(href="#{_tsconfigUri}") TypeScript Configuration] guide.
- A detailed discussion of module loading is beyond the scope of this guide.
-
.callout.is-helpful
- header SystemJS or Webpack?
+ header A word about TypeScript
p.
- Although we use SystemJS for illustrative purposes here, it's only one option for loading
- modules. Use the module loader that you prefer. For Webpack and Angular, see
- Webpack: an Introduction. Or, learn more about SystemJS configuration in general here.
+ This example is written in TypeScript, 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 explains how.
-
- h3#install-packages #{_Install} packages
-block install-packages
- :marked
- Using npm from the command line, install the packages listed in `package.json` with the command:
-
- code-example(language="sh" class="code-shell").
- npm install
-
- :marked
- Error messages—in red—might appear during the install, and you might see `npm WARN` messages. As long as there are no `npm ERR!` messages at the end, you can assume success.
-
- :marked
- You should now have the following structure:
-
- .filetree
- .file angular-quickstart
- .children
- .file node_modules ...
- .file package.json
- .file systemjs.config.js
- .file tsconfig.json
-
-:marked
- You're now ready to write some code!
-
-.l-main-section
-h2#ngmodule Step 2: Create your application
-
-block create-your-app
- :marked
- You compose Angular applications into closely related blocks of functionality with
- [NgModules](guide/ngmodule.html). Angular itself is split into separate Angular Modules. This
- makes it possible for you to keep payload size small by only importing the parts of Angular
- that your application needs.
-
- Every Angular application has at least one module: the _root module_, named `AppModule` here.
-:marked
- **Create #{_an} #{_appDir} subfolder** off the project root directory:
-
-code-example.code-shell.
- mkdir #{_appDir}
-
-+ifDocsFor('ts')
- :marked
- Create the file `app/app.module.ts` with the following content:
-
- +makeExample('app/app.module.1.ts')(format='.')
-
- :marked
- This is the entry point to your application.
-
- Since the QuickStart application is a web application that runs in a browser, your root module
- needs to import the
- [`BrowserModule`](../latest/api/platform-browser/index/BrowserModule-class.html)
- from `@angular/platform-browser` to the `imports` array.
-
- This is the smallest amount of Angular that is needed for a minimal application to run in the
- browser.
-
- The QuickStart application doesn't do anything else, so you don't need any other modules. In a real
- application, you'd likely import [`FormsModule`](../latest/api/forms/index/FormsModule-class.html)
- as well as [`RouterModule`](../latest/api/router/index/RouterModule-class.html) and
- [`HttpModule`](../latest/api/http/index/HttpModule-class.html). These are introduced in the
- [Tour of Heroes Tutorial](./tutorial/).
-
- .l-main-section
- h2#root-component Step 3: Create a component and add it to your application
-
-:marked
- Every Angular application has at least one component: the _root component_, named `AppComponent`
- here.
-
- Components are the basic building blocks of Angular applications. A component controls a portion
- of the screen—a *view*—through its associated template.
-
-#app-component
-:marked
- **Create the component file** app/app.component.ts with the following content:
-
-+makeExample('app/app.component.ts')
-
-- var _decorator_function = _docsFor == 'dart' ? 'annotation' : 'decorator function';
-:marked
- The QuickStart application has the same essential structure as any other Angular component:
-
- * **An import statement**. Importing gives your component access to
- Angular's core [`@Component` !{_decorator_function}](./api/core/index/Component-decorator.html).
- * **A @Component #{_decorator}** that associates *metadata* with the
- `AppComponent` component class:
-
- - a *selector* that specifies a simple CSS selector for an HTML element that represents
- the component.
- - a *template* that tells Angular how to render the component's view.
- * **A component class** that controls the appearance and behavior of a view
- through its template. Here, you only have the root component, `AppComponent`. Since you don't
- need any application logic in the simple QuickStart example, it's empty.
-+ifDocsFor('ts')
- :marked
- You *export* the `AppComponent` class so that you can *import* it into the application that you
- just created.
-
- Edit the file `app/app.module.ts` to import your new `AppComponent` and add it in the
- declarations and bootstrap fields in the `NgModule` decorator:
-
- +makeExample('app/app.module.ts')
-
-.l-main-section
-h2#main Step !{step++}: Start up your application
-
-block create-main
- :marked
- Now you need to tell Angular to start up your application.
-
- Create the file `app/main.ts` with the following content:
-
-+makeExample('app/main.ts')
-
-
-- var _pBD_bootstrapModule = _docsFor == 'dart' ? _bootstrapModule : 'platformBrowserDynamic().bootstrapModule'
-
-:marked
- This code initializes the platform that your application runs in, then uses the platform to
- bootstrap your `!{_AppModuleVsAppComp}`.
-
- ### Why create separate *main.ts*, app module and app component files?
-
- App bootstrapping is a separate concern from creating a module or
- presenting a view. Testing the component is much easier if it doesn't also try to run the entire application.
-
-
-.callout.is-helpful
- header Bootstrapping is platform-specific
-
- :marked
- Because the QuickStart application runs directly in the browser, `main.ts` imports the
- `!{_platformBrowserDynamicVsBootStrap}` function from `#{_angular_browser_uri}`, not
- `#{_angular_core_uri}`. On a mobile device, you might load a !{_moduleVsComp} with
- [Apache Cordova](https://cordova.apache.org/) or
- [NativeScript](https://www.nativescript.org/), using a bootstrap function that's specific
- to that platform.
-
-.l-main-section
-h2#index Step !{step++}: Define the web page that hosts the application
-:marked
- In the *#{_indexHtmlDir}* folder,
- create an `index.html` file and paste the following lines into it:
-
-+makeExample('index.html')
-
-
-block commentary-on-index-html
- :marked
- The noteworthy sections here are:
-
- * JavaScript libraries: `core-js` polyfills for older browsers, the `zone.js` and
- `reflect-metadata` libraries needed by Angular, and the `SystemJS` library for module loading.
- * Configuration file for `SystemJS`, and a script
- where you import and run the `app` module which refers to the `main` file that you just
- wrote.
- * The `` tag in the `` which is *where your app lives!*
-
-
-:marked
- ### Add some style
-
- Styles aren't essential, but they're nice, and `index.html` assumes that you have
- a stylesheet called `styles.css`.
-
- Create a `styles.css` file in the *#{_indexHtmlDir}* folder, and start styling,
- perhaps with the minimal styles shown below.
-
-+makeExcerpt('styles.css (excerpt)', 'quickstart')
-
-.callout.is-helpful
- :marked
- For the full set of master styles used by the documentation samples,
- see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css).
-
-.l-main-section#build-and-run
-h2 Step !{step++}: Build and run the application
-block run-app
- :marked
- Open a terminal window and enter this command:
- code-example.code-shell.
- npm start
- aside.is-right
+.l-sub-section
:marked
- [Read more](https://github.com/angular/quickstart/blob/master/README.md#npm-scripts) about
- other useful npm scripts included in this example's `package.json`.
+ ### Next step
- :marked
- That command runs the following two parallel node processes:
- * The TypeScript compiler in watch mode.
- * A static file server called _lite-server_ that loads `index.html` in a browser
- and refreshes the browser when application files change.
+ To learn how to write a real application, your next step is to set up a local development
+ environment and begin exploring with code. The [**Developer Guide**](guide/index.html)
+ shows you how.
- In a few moments, a browser tab should open and display the following:
-
-figure.image-display
- img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
-
-
-block build-app
- //- Nothing for ts.
-
-.l-main-section#make-changes
-h2 Step !{step++}: Make some live changes
-:marked
- Try changing the message in app/app.component.ts to "Hello Again Angular!".
-
-block server-watching
- :marked
- The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript,
- refresh the browser, and display your revised message.
-
- Close the terminal window when you're done to terminate both the compiler and the server.
-
-.l-main-section
-h2#wrap-up Wrap up and next steps
-:marked
- The final project folder structure looks like this:
-block project-file-structure
- .filetree
- .file angular-quickstart
- .children
- .file app
- .children
- .file app.component.ts
- .file app.module.ts
- .file main.ts
- .file node_modules ...
- .file index.html
- .file package.json
- .file styles.css
- .file systemjs.config.js
- .file tsconfig.json
-:marked
- To see the file contents, open the .
-
-.l-main-section
-:marked
- ## What next?
- This first application doesn't do much. It's basically "Hello, World" for Angular.
-
- You wrote a little Angular component, created a simple `index.html`, and launched with a
- static file server.
-
-+ifDocsFor('ts')
- :marked
- You also created the basic application setup that you'll re-use for other
- sections in this guide. From here, the changes you'll make in the
- `package.json` or `index.html` files are only minor updates to add libraries or some css
- stylesheets. You also won't need to revisit module loading again.
-:marked
- To take the next step and build a small application that demonstrates real features that you can
- build with Angular, carry on to the [Tour of Heroes tutorial](./tutorial)!
diff --git a/public/docs/ts/_cache/tutorial/index.jade b/public/docs/ts/_cache/tutorial/index.jade
index dae359159d..cb392d9aa5 100644
--- a/public/docs/ts/_cache/tutorial/index.jade
+++ b/public/docs/ts/_cache/tutorial/index.jade
@@ -79,5 +79,3 @@ figure.image-display
met in countless applications. Everything has a reason.
And we’ll meet many of the core fundamentals of Angular along the way.
-
- [Let's get started!](./toh-pt1.html)
diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade
index c959e29a85..492e15e672 100644
--- a/public/docs/ts/_cache/tutorial/toh-pt5.jade
+++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade
@@ -3,7 +3,6 @@
block includes
include ../_util-fns
- var _appRoutingTsVsAppComp = 'app.module.ts'
- - var _declsVsDirectives = 'declarations'
- var _RoutesVsAtRouteConfig = 'Routes'
- var _RouterModuleVsRouterDirectives = 'RouterModule'
- var _redirectTo = 'redirectTo'
@@ -511,10 +510,16 @@ block route-params
+makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
++ifDocsFor('ts')
+ :marked
+ Also import the `switchMap` operator to use later with the route parameters `Observable`.
+
+ +makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import')
+
:marked
We tell the class that we want to implement the `OnInit` interface.
-+makeExcerpt('app/hero-detail.component.ts', 'implement', '')(format=".")
++makeExcerpt('app/hero-detail.component.ts', 'implement', '')
block ngOnInit
:marked
@@ -526,14 +531,27 @@ block ngOnInit
block extract-id
:marked
- Notice how we extract the `id` by calling the `forEach` method
- which will deliver our !{_array} of route parameters.
+ Note how the `switchMap` operator maps the id in the observable route parameters
+ to a new `Observable`, the result of the `HeroService.getHero` method.
+
+ If the user re-navigates to this component while a getHero request is still inflight,
+ switchMap cancels that old request before calling `HeroService.getHero` again.
- var _str2int = _docsFor == 'dart' ? 'int.parse static method' : 'JavaScript (+) operator'
:marked
The hero `id` is a number. Route parameters are *always strings*.
So we convert the route parameter value to a number with the !{_str2int}.
++ifDocsFor('ts')
+ .l-sub-section
+ :marked
+ ### Do I need to unsubscribe?
+
+ The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes
+ the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
+ memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`.
+
+:marked
### Add *HeroService.getHero*
The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
@@ -654,16 +672,16 @@ block extract-id
+makeExample('app/app-routing.module.ts')
:marked
Noteworthy points, typical of _Routing Modules_:
- * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
+ * Pulls the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
- * Add `RouterModule.forRoot(routes)` to `imports`.
+ * Adds `RouterModule.forRoot(routes)` to `imports`.
- * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
+ * Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
such as `RouterLink` and `RouterOutlet`.
* No `declarations`! Declarations are the responsibility of the companion module.
- * Add module `providers` for guard services if you have them; there are none in this example.
+ * Adds module `providers` for guard services if you have them; there are none in this example.
### Update _AppModule_
@@ -676,7 +694,7 @@ block extract-id
null,
`app/app.module.ts (after), app/app.module.ts (before)`)
:marked
- It's simpler and focused on indentifying the key pieces of the application.
+ It's simpler and focused on identifying the key pieces of the application.
.l-main-section
:marked
@@ -870,9 +888,7 @@ block css-files
We can also create styles at the *application level* outside of any component.
Our designers provided some basic styles to apply to elements across the entire app.
- These correspond to the full set of master styles that we
- introduced earlier (see
- [QuickStart, "Add some style"](../quickstart.html#add-some-style)).
+ These correspond to the full set of master styles that we installed earlier during [setup](../guide/setup.html).
Here is an excerpt:
+makeExcerpt('styles.css (excerpt)', 'toh')
diff --git a/public/docs/ts/_cache/tutorial/toh-pt6.jade b/public/docs/ts/_cache/tutorial/toh-pt6.jade
index 68efb0cdb5..784fc08db6 100644
--- a/public/docs/ts/_cache/tutorial/toh-pt6.jade
+++ b/public/docs/ts/_cache/tutorial/toh-pt6.jade
@@ -618,3 +618,10 @@ block file-summary
hero-search.component.css,
rxjs-extensions.ts`
)
+
+.l-sub-section
+ :marked
+ ### Next Step
+
+ Return to the [learning path](../guide/learning-angular.html#architecture) where
+ you can read about the concepts and practices you discovered in this tutorial.
diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json
index 8a8e2198fd..32df2a3c03 100644
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@@ -19,8 +19,7 @@
"icon": "query-builder",
"title": "快速起步",
"subtitle": "TypeScript",
- "description": "Angular快速起步",
- "banner": "本“快速起步”指南将演示如何用TypeScript构建并运行简单的Angular应用。"
+ "banner": "快速体验 Angular"
},
"tutorial": {
diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade
index d01a720d2f..90f33e179d 100644
--- a/public/docs/ts/latest/cli-quickstart.jade
+++ b/public/docs/ts/latest/cli-quickstart.jade
@@ -1,33 +1,34 @@
include _util-fns
-
+
:marked
Good tools make application development quicker and easier to maintain than
if we 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
as testing, bundling, and deployment.
-
+
Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular
application in TypeScript, using Angular-CLI
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
benefit _every_ Angular project.
-
+
By the end of the chapter, we'll have a basic understanding of development with the CLI
and a foundation for both these documentation samples and our real world applications.
We'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
+
.l-main-section
h2#devenv Step 1. Set up the Development Environment
:marked
We need to set up our development environment before we can do anything.
-
+
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
if they are not already on your machine.
.l-sub-section
@@ -37,15 +38,15 @@ h2#devenv Step 1. Set up the Development Environment
Older versions produce errors.
:marked
Then **install the [Angular-CLI](https://github.com/angular/angular-cli)** globally.
-
+
code-example(format="").
npm install -g angular-cli
-
+
.l-main-section
h2#create-project Step 2. Create a new project
:marked
Open a terminal window.
-
+
.alert.is-important
:marked
_Windows Developers_: open a console window _as an **administrator**_.
@@ -75,9 +76,9 @@ code-example(format="").
:marked
The `ng serve` command launches the server, watches our files,
and rebuilds the app as we make changes to the files.
-
+
Open a browser on `http://localhost:4200/`; the app greets us with a message:
-
+
figure.image-display
img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="Our app works!")
@@ -96,19 +97,19 @@ h2#first-component Step 4: Edit our first Angular component
:marked
Open the component file and change the `title` property from _cli-quickstart works!_ to _My First Angular App_:
-
+
+makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.ts', 'title', 'src/app/cli-quickstart.component.ts')(format=".")
:marked
The browser reloads automatically and we see the revised title. That's nice, but we can make it look better.
-
+
Open `src/app/cli-quickstart.component.css` and give our component some style
+makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.css', null, 'src/app/cli-quickstart.component.css')(format=".")
figure.image-display
img(src='/resources/images/devguide/cli-quickstart/hello-angular.png' alt="Output of QuickStart app")
-
+
:marked
Looking good!
@@ -177,7 +178,7 @@ h3#component-decorator @Component decorator
:marked
This particular metadata object has four fields, a `moduleId`, a `selector` a `templateUrl` and an array of `styleUrls`.
-
+
The **moduleId** specifies the location of _this_ component definition file
so that Angular can find the corresponding _template_ and _style_ files with URLs that
are relative to this component file.
@@ -193,14 +194,14 @@ h3#component-decorator @Component decorator
The **templateUrl** locates the component's companion template HTML file.
The template tells Angular how to render this component's view.
-
+
Our template is a single `` element surrounding some peculiar Angular data binding syntax.
+makeExample('src/app/cli-quickstart.component.html', null, 'src/app/cli-quickstart.component.html')(format='.')
:marked
The `{{title}}` is an _interpolation_ binding that causes Angular to display the component's
- `title` property. After out edit, Angular displays "Hello Angular!".
+ `title` property. After out edit, Angular displays "Hello Angular".
We'll learn more about data binding as we read through the documentation.
-
+
The **styleUrls** array specifies the location(s) of the component's private CSS style file(s).
The CLI generated an empty file for us and we added styles to it.
@@ -216,10 +217,10 @@ h3#component-decorator @Component decorator
:marked
### The *main.ts* file
-
+
How does Angular know what to do with our component? We have to tell it.
We _bootstrap_ our application in the file `main.ts`.
-
+
+makeExcerpt('src/main.ts', 'important')
:marked
@@ -257,17 +258,17 @@ h3#component-decorator @Component decorator
We might launch the `CliQuickstartAppComponent` in multiple environments with different bootstrappers.
Testing the component is much easier if it doesn't also try to run the entire application.
Let's make the small extra effort to do it *the right way*.
-
+
### Loading the application with SystemJS
-
+
The CLI uses `System.js` to load the application. We just need to call `System.import` and pass it our `main.ts`
file to boot our application.
-
+
+makeExcerpt('src/index.html', 'import')
:marked
### Displaying the root component
-
+
When Angular calls the `bootstrap` function in `main.ts`, it reads the `CliQuickstartAppComponent`
metadata, finds the `cli-quickstart-app` selector, locates an element tag named `cli-quickstart-app`
in the `` tag of the `index.html`, and renders our application's view between those tags.
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index 740392dea0..f25d441faa 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -2,7 +2,7 @@
"index": {
"title": "烹饪宝典",
"navTitle": "概览",
- "description": "一组常见Angular应用场景的“烹饪宝典”"
+ "intro": "一组常见Angular应用场景的“烹饪宝典”"
},
"aot-compiler": {
@@ -57,8 +57,8 @@
},
"ts-to-js": {
- "title": "从TypeScript到JavaScript",
- "intro": "把Angular的TypeScript范例转换为ES6和ES5 JavaScript"
+ "title": "从 TypeScript 到 JavaScript",
+ "intro": "把 Angular 的 TypeScript 范例转换为 ES6 和 ES5 JavaScript"
},
"visual-studio-2015": {
diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
index ed786016ad..56fac29d1a 100644
--- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
+++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
@@ -233,9 +233,9 @@ table(width="100%")
Angular 2没有引导指令。
我们总是通过显式调用一个`bootstrap`函数，并传入应用模块的名字(`AppComponent`)来启动应用。
- For more information see [Quick Start](../quickstart.html).
+ For more information see the [Setup](../guide/setup.html) page.
- 要了解更多，参见[“快速起步”](../quickstart.html)。
+ 要了解更多，参见[搭建本地开发环境](../guide/setup.html)。
tr(style=top)
td
:marked
diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade
index 2213e3ba80..f185059042 100644
--- a/public/docs/ts/latest/cookbook/aot-compiler.jade
+++ b/public/docs/ts/latest/cookbook/aot-compiler.jade
@@ -56,7 +56,7 @@ a#overview
这是本文档中展示过的标准开发方式。
它很不错，但是有自己的缺点。
- JiT compilation incurs a runtime performance penalty.
+ JiT compilation incurs a runtime performance penalty.
Views take longer to render because of the in-browser compilation step.
The application is bigger because it includes the Angular compiler
and a lot of library code that the application won't actually need.
@@ -98,7 +98,7 @@ a#aot-jit
**渲染得更快**
- With AoT, the browser downloads a pre-compiled version of the application.
+ With AoT, the browser downloads a pre-compiled version of the application.
The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
使用AoT，浏览器下载预编译版本的应用程序。
@@ -118,7 +118,7 @@ a#aot-jit
**需要下载的Angular框架体积更小**
- There's no need to download the Angular compiler if the app is already compiled.
+ There's no need to download the Angular compiler if the app is already compiled.
The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.
如果应用已经编译过了，自然不需要再下载Angular编译器了。
@@ -155,10 +155,10 @@ a#compile
### 为离线编译做准备
- Take the QuickStart as a starting point.
+ Take the Setup as a starting point.
A few minor changes to the lone `app.component` lead to these two class and html files:
- 本烹饪书以“快速起步”作为起始点。
+ 本烹饪书以搭建本地开发环境作为起始点。
只要单独对`app.component`文件的类文件和html文件做少量修改就可以了。
+makeTabs(
@@ -182,7 +182,7 @@ code-example(format='.').
你要用`@angular/compiler-cli`包中提供的`ngc`编译器来代替TypeScript编译器（`tsc`）。
- `ngc` is a drop-in replacement for `tsc` and is configured much the same way.
+ `ngc` is a drop-in replacement for `tsc` and is configured much the same way.
`ngc`是一个`tsc`的高仿替代品，它们的配置方式几乎完全一样。
@@ -202,14 +202,14 @@ code-example(format='.').
`compilerOptions`部分只修改了一个属性：**把`module`设置为`es2015`。
这一点非常重要，我们会在后面的[摇树优化](#tree-shaking)部分解释为什么。
- What's really new is the `ngc` section at the bottom called `angularCompilerOptions`.
+ What's really new is the `ngc` section at the bottom called `angularCompilerOptions`.
Its `"genDir"` property tells the compiler
to store the compiled output files in a new `aot` folder.
`ngc`区真正新增的内容是底部的`angularCompilerOptions`。
它的`"genDir"`属性告诉编译器把编译结果保存在新的`aot`目录下。
- The `"skipMetadataEmit" : true` property prevents the compiler from generating metadata files with the compiled application.
+ The `"skipMetadataEmit" : true` property prevents the compiler from generating metadata files with the compiled application.
Metadata files are not necessary when targeting TypeScript files, so there is no reason to include them.
`"skipMetadataEmit" : true`属性阻止编译器为编译后的应用生成元数据文件。
@@ -237,11 +237,11 @@ code-example(format='.').
`ngc`希望`-p`选项指向一个`tsconfig.json`文件，或者一个包含`tsconfig.json`文件的目录。
- After `ngc` completes, look for a collection of _NgFactory_ files in the `aot` folder (the folder specified as `genDir` in `tsconfig-aot.json`).
+ After `ngc` completes, look for a collection of _NgFactory_ files in the `aot` folder (the folder specified as `genDir` in `tsconfig-aot.json`).
在`ngc`完成时，会在`aot`目录下看到一组*NgFactory*文件（该目录是在`tsconfig-aot.json`的`genDir`属性中指定的）。
- These factory files are essential to the compiled application.
+ These factory files are essential to the compiled application.
Each component factory creates an instance of the component at runtime by combining the original class file
and a JavaScript representation of the component's template.
Note that the original component class is still referenced internally by the generated factory.
@@ -284,7 +284,7 @@ a#bootstrap
引导的方式从引导`AppModule`改成了引导生成的模块工厂：`AppModuleNgFactory`。
- Switch from the `platformBrowserDynamic.bootstrap` used in JiT compilation to
+ Switch from the `platformBrowserDynamic.bootstrap` used in JiT compilation to
`platformBrowser().bootstrapModuleFactory` and pass in the `AppModuleNgFactory`.
从使用JiT编译时的`platformBrowserDynamic.bootstrap`换成了`platformBrowser().bootstrapModuleFactory`，并把`AppModuleNgFactory`传进去。
@@ -318,7 +318,7 @@ a#tree-shaking
AoT编译为接下来通过一个叫做*摇树优化*的过程做好了准备。
摇树优化器从上到下遍历依赖图谱，并且*摇掉*用不到的代码，这些代码就像是圣诞树中那些死掉的松针一样。
- Tree Shaking can greatly reduce the downloaded size of the application
+ Tree Shaking can greatly reduce the downloaded size of the application
by removing unused portions of both source and library code.
In fact, most of the reduction in small apps comes from removing unreferenced Angular features.
@@ -330,7 +330,7 @@ a#tree-shaking
例如，这个演示程序中没有用到`@angular/forms`库中的任何东西，那么也就没有理由去下载这些与表单有关的Angular代码了。摇树优化可以帮你确保这一点。
- Tree Shaking and AoT compilation are separate steps.
+ Tree Shaking and AoT compilation are separate steps.
Tree Shaking can only target JavaScript code.
AoT compilation converts more of the application to JavaScript,
which in turn makes more of the application "Tree Shakable".
@@ -414,14 +414,14 @@ code-example(format='.').
可观察对象库*RxJS*是Angular所依赖的基础之一，它就是发布成了ES5 JavaScript的*CommonJS*模块。
- Luckily there is a Rollup plugin that modifies _RxJs_
+ Luckily there is a Rollup plugin that modifies _RxJs_
to use the ES `import` and `export` statements that Rollup requires.
Rollup then preserves in the final bundle the parts of `RxJS` referenced by the application.
幸运的是，有一个Rollup插件，它会修改*RxJS*，以使用Rollup所需的ES`import`和`export`语句。
然后Rollup就可以把该应用中用到的那部分`RxJS`代码留在“捆”文件中了。
-+makeExample('cb-aot-compiler/ts/rollup-config.js','commonjs','rollup-config.js (CommonJs to ES2015 Plugin)')(format='.')
++makeExample('cb-aot-compiler/ts/rollup-config.js','commonjs','rollup-config.js (CommonJs to ES2015 Plugin)')(format='.')
:marked
*Minification*
@@ -475,7 +475,7 @@ a#load
## 加载捆文件
- Loading the generated application bundle does not require a module loader like SystemJS.
+ Loading the generated application bundle does not require a module loader like SystemJS.
Remove the scripts that concern SystemJS.
Instead, load the bundle file using a single `script` tag:
@@ -483,7 +483,7 @@ a#load
移除与SystemJS有关的那些脚本吧。
改用`script`标签来加载这些捆文件：
-+makeExample('cb-aot-compiler/ts/index.html','bundle','index.html (load bundle)')(format='.')
++makeExample('cb-aot-compiler/ts/index.html','bundle','index.html (load bundle)')(format='.')
a#serve
.l-main-section
@@ -510,7 +510,7 @@ a#source-code
:marked
## AoT QuickStart Source Code
- ## AoT快速开始源代码
+ ## AoT快速起步源代码
Here's the pertinent source code:
@@ -538,11 +538,11 @@ a#toh
## 英雄指南
- The sample above is a trivial variation of the QuickStart app.
+ The sample above is a trivial variation of the QuickStart app.
In this section you apply what you've learned about AoT compilation and Tree Shaking
to an app with more substance, the tutorial [_Tour of Heroes_](../tutorial/toh-pt6.html).
- 上面的例子是快速开始应用的一个简单的变体。
+ 上面的例子是《快速起步》应用的一个简单的变体。
在本节中，你将在一个更多内容的应用 - [英雄指南](../tutorial/toh-pt6.html)上使用从AoT编译和摇树优化学到的知识。
### JiT in development, AoT in production
@@ -591,19 +591,13 @@ a#toh
The AoT version loads the entire application in a single script, `aot/dist/build.js`.
It does not need `SystemJS` or the `reflect-metadata` shim; those scripts are absent from its `index.html`
- AoT版本用一个单独的脚本来加载整个应用 - `aot/dist/build.js`。它不需要`SystemJS`和`reflect-metadata`垫片，所以它们不会出现在`index.html`中。
-
- ***main.ts***
-
***main.ts***
JiT and AoT applications boot in much the same way but require different Angular libraries to do so.
The key differences, covered in the [Bootstrap](#bootstrap) section above,
are evident in these `main` files which can and should reside in the same folder:
- JiT和AoT应用启动非常相似，但需要加载不同的Angular库来实现。
- 主要的差异，见上面的[启动](#bootstrap)一节，
- 可以在那些`main`文件中明显看出区别，它们可以也应该位于同一目录。
+ AoT版本用一个单独的脚本来加载整个应用 - `aot/dist/build.js`。它不需要`SystemJS`和`reflect-metadata`垫片，所以它们不会出现在`index.html`中。
+makeTabs(
`toh-6/ts/app/main-aot.ts,
@@ -623,7 +617,7 @@ a#toh
For example, a `'hero.component.html'` URL means that the template file is a sibling of its companion `hero.component.ts` file.
AoT编译器要求`@Component`外部模板和CSS文件的路径是相对组件的。
- 意思是，`@Component.templateUrl`的值是一个相对组件类文件`foo.component.html`的路径，不管`foo.component.ts`在项目的哪个目录。
+ 意思是，`@Component.templateUrl`的值是*相对*组件类文件的路径，比如`'hero.component.html'`路径的意思是模板文件在`hero.component.ts`文件的隔壁。
While JiT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AoT compilation.
@@ -769,7 +763,7 @@ code-example(format='.').
### 检查包裹
- It's fascinating to see what the generated JavaScript bundle looks like after Rollup.
+ It's fascinating to see what the generated JavaScript bundle looks like after Rollup.
The code is minified, so you won't learn much from inspecting the bundle directly.
But the source-map-explorer
tool can be quite revealing.
diff --git a/public/docs/ts/latest/cookbook/component-communication.jade b/public/docs/ts/latest/cookbook/component-communication.jade
index 205bbb91bd..6bd02c3d25 100644
--- a/public/docs/ts/latest/cookbook/component-communication.jade
+++ b/public/docs/ts/latest/cookbook/component-communication.jade
@@ -12,7 +12,7 @@ include ../_util-fns
For an in-depth look at each fundamental concepts in component communication, we can find detailed description and
samples in the [Component Communication]() document.
- 要深入了解组件通讯的各个基本概念，在[组件通讯Component Communication]()文档中可以找到详细的描述和例子。
+ 要深入了解组件通讯的各个基本概念，在[组件通讯]()文档中可以找到详细的描述和例子。
:marked
diff --git a/public/docs/ts/latest/cookbook/dynamic-form.jade b/public/docs/ts/latest/cookbook/dynamic-form.jade
index c2c77f74d6..3f0914303e 100644
--- a/public/docs/ts/latest/cookbook/dynamic-form.jade
+++ b/public/docs/ts/latest/cookbook/dynamic-form.jade
@@ -2,80 +2,80 @@ include ../_util-fns
:marked
We can't always justify the cost and time to build handcrafted forms, especially if we'll need a great number of them, they're similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.
-
+
有时候手动编写和维护表单所需工作量和时间会过大。特别是在需要编写大量表单时。表单都很相似，而且随着业务和监管需求的迅速变化，表单也要随之变化，这样维护的成本过高。
It may be more economical to create the forms dynamically, based on metadata that describe the business object model.
基于业务对象模型的元数据，动态创建表单可能会更划算。
-
+
In this cookbook we show how to use `formGroup` to dynamically render a simple form with different control types and validation.
It's a primitive start.
It might evolve to support a much richer variety of questions, more graceful rendering, and superior user experience.
All such greatness has humble beginnings.
-
+
在此烹饪宝典中，我们会展示如何利用`formGroup`来动态渲染一个简单的表单，包括各种控件类型和验证规则。
这个起点很简陋，但可以在这个基础上添加丰富多彩的问卷问题、更优美的渲染以及更卓越的用户体验。
-
+
In our example we use a dynamic form to build an online application experience for heroes seeking employment.
The agency is constantly tinkering with the application process.
We can create the forms on the fly *without changing our application code*.
在本例中，我们使用动态表单，为正在找工作的英雄们创建一个在线申请表。英雄管理局会不断修改申请流程，我们要在*不修改应用代码*的情况下，动态创建这些表单。
-
+
:marked
## Table of contents
-
- ## 目录
+
+ ## 目录
[Bootstrap](#bootstrap)
-
+
[程序启动](#bootstrap)
[Question Model](#object-model)
-
+
[问卷问题模型](#object-model)
-
+
[Form Component](#form-component)
-
+
[表单组件](#form-component)
[Questionnaire Metadata](#questionnaire-metadata)
[问卷元数据](#questionnaire-metadata)
-
+
[Dynamic Template](#dynamic-template)
-
+
[动态模板](#dynamic-template)
:marked
**See the **.
-
+
**参见在线例子**。
-
+
.l-main-section
:marked
## Bootstrap
-
+
## 程序启动
We start by creating an `NgModule` called `AppModule`.
-
+
让我们从创建一个名叫`AppModule`的`NgModule`开始。
In our example we will be using Reactive Forms.
在本例子中，我们将使用响应式表单（Reactive Forms）。
-
- Reactive Forms belongs to a different `NgModule` called `ReactiveFormsModule`, so in order to access any Reactive Forms directives, we have to import `ReactiveFormsModule` from `AppModule`.
-
- 响应式表单属于另外一个叫做`ReactiveFormsModule`的`NgModule`，所以，为了使用响应式表单类的指令，我们得往`AppModule`中引入`ReactiveFormsModule`模块。
+
+ Reactive Forms belongs to a different `NgModule` called `ReactiveFormsModule`, so in order to access any Reactive Forms directives, we have to import `ReactiveFormsModule` from the `@angular/forms` library.
+
+ 响应式表单属于另外一个叫做`ReactiveFormsModule`的`NgModule`，所以，为了使用响应式表单类的指令，我们得往`@angular/forms`库中引入`ReactiveFormsModule`模块。
We bootstrap our `AppModule` in main.ts.
-
+
我们在main.ts中启动`AppModule`。
+makeTabs(
@@ -90,17 +90,17 @@ include ../_util-fns
:marked
## Question Model
-
+
## 问卷问题模型
-
+
The next step is to define an object model that can describe all scenarios needed by the form functionality.
The hero application process involves a form with a lot of questions.
The "question" is the most fundamental object in the model.
-
+
第一步是定义一个对象模型，用来描述所有表单功能需要的场景。英雄的申请流程涉及到一个包含很多问卷问题的表单。问卷问题是最基础的对象模型。
We have created `QuestionBase` as the most fundamental question class.
-
+
下面是我们建立的最基础的问卷问题基类，名叫`QuestionBase`。
+makeExample('cb-dynamic-form/ts/app/question-base.ts','','app/question-base.ts')
@@ -110,9 +110,9 @@ include ../_util-fns
The idea is that the form will be bound to specific question types and render the appropriate controls dynamically.
在这个基础上，我们派生出两个新类`TextboxQuestion` 和 `DropdownQuestion`，分别代表文本框和下拉框。这么做的初衷是，表单能动态绑定到特定的问卷问题类型，并动态渲染出合适的控件。
-
+
`TextboxQuestion` supports multiple html5 types like text, email, url etc via the `type` property.
-
+
`TextboxQuestion`可以通过`type`属性来支持多种HTML5元素类型，比如文本、邮件、网址等。
+makeExample('cb-dynamic-form/ts/app/question-textbox.ts',null,'app/question-textbox.ts')(format='.')
@@ -121,34 +121,34 @@ include ../_util-fns
`DropdownQuestion` presents a list of choices in a select box.
`DropdownQuestion`表示一个带可选项列表的选择框。
-
+
+makeExample('cb-dynamic-form/ts/app/question-dropdown.ts',null,'app/question-dropdown.ts')(format='.')
:marked
Next we have defined `QuestionControlService`, a simple service for transforming our questions to a `FormGroup`.
In a nutshell, the form group consumes the metadata from the question model and allows us to specify default values and validation rules.
-
+
接下来，我们定义了`QuestionControlService`，一个可以把问卷问题转换为`FormGroup`的服务。
简而言之，这个`FormGroup`使用问卷模型的元数据，并允许我们设置默认值和验证规则。
-
+
+makeExample('cb-dynamic-form/ts/app/question-control.service.ts',null,'app/question-control.service.ts')(format='.')
:marked
## Question form components
-
+
## 问卷表单组件
-
+
Now that we have defined the complete model we are ready to create components to represent the dynamic form.
-
+
现在我们已经有一个定义好的完整模型了，接着就可以开始创建一个展现动态表单的组件。
:marked
`DynamicFormComponent` is the entry point and the main container for the form.
-
- `DynamicFormComponent`是表单的主要容器和入口点。
-
+
+ `DynamicFormComponent`是表单的主要容器和入口点。
+
+makeTabs(
`cb-dynamic-form/ts/app/dynamic-form.component.html,
cb-dynamic-form/ts/app/dynamic-form.component.ts`,
@@ -160,10 +160,10 @@ include ../_util-fns
It presents a list of questions, each question bound to a `` component element.
The `` tag matches the `DynamicFormQuestionComponent`,
the component responsible for rendering the details of each _individual_ question based on values in the data-bound question object.
-
+
它代表了问卷问题列表，每个问题都被绑定到一个``组件元素。
``标签匹配到的是组件`DynamicFormQuestionComponent`，该组件的职责是根据各个问卷问题对象的值来动态渲染表单控件。
-
+
+makeTabs(
`cb-dynamic-form/ts/app/dynamic-form-question.component.html,
cb-dynamic-form/ts/app/dynamic-form-question.component.ts`,
@@ -177,63 +177,63 @@ include ../_util-fns
The `ngSwitch` determines which type of question to display.
请注意，这个组件能代表模型里的任何问题类型。目前，还只有两种问题类型，但可以添加更多类型。可以用`ngSwitch`决定显示哪种类型的问题。
-
+
In both components we're relying on Angular's **formGroup** to connect the template HTML to the
underlying control objects, populated from the question model with display and validation rules.
-
+
在这两个组件中，我们依赖Angular的**formGroup**来把模板HTML和底层控件对象连接起来，该对象从问卷问题模型里获取渲染和验证规则。
`formControlName` and `formGroup` are directives defined in `ReactiveFormsModule`. Our templates can can access these directives directly since we imported `ReactiveFormsModule` from `AppModule`.
-
+
`formControlName`和`formGroup`是在`ReactiveFormsModule`中定义的指令。我们之所以能在模板中使用它们，是因为我们往`AppModule`中导入了`ReactiveFormsModule`。
:marked
## Questionnaire data
## 问卷数据
-
+
:marked
`DynamicFormComponent` expects the list of questions in the form of an array bound to `@Input() questions`.
`DynamicForm`期望得到一个问题列表，该列表被绑定到`@Input() questions`属性。
-
- The set of questions we have defined for the job application is returned from the `QuestionService`.
+
+ The set of questions we have defined for the job application is returned from the `QuestionService`.
In a real app we'd retrieve these questions from storage.
`QuestionService`会返回为工作申请表定义的那组问题列表。在真实的应用程序环境中，我们会从数据库里获得这些问题列表。
-
- The key point is that we control the hero job application questions entirely through the objects returned from `QuestionService`.
+
+ The key point is that we control the hero job application questions entirely through the objects returned from `QuestionService`.
Questionnaire maintenance is a simple matter of adding, updating, and removing objects from the `questions` array.
关键是，我们完全根据`QuestionService`返回的对象来控制英雄的工作申请表。
要维护这份问卷，只要非常简单的添加、更新和删除`questions`数组中的对象就可以了。
-
-+makeExample('cb-dynamic-form/ts/app/question.service.ts','','app/question.service.ts')
+
++makeExample('cb-dynamic-form/ts/app/question.service.ts','','app/question.service.ts')
:marked
Finally, we display an instance of the form in the `AppComponent` shell.
最后，在`AppComponent`里显示出表单。
-
+
+makeExample('cb-dynamic-form/ts/app/app.component.ts','','app.component.ts')
:marked
## Dynamic Template
-
+
## 动态模板
-
- Although in this example we're modelling a job application for heroes, there are no references to any specific hero question
+
+ Although in this example we're modelling a job application for heroes, there are no references to any specific hero question
outside the objects returned by `QuestionService`.
在这个例子中，虽然我们是在为英雄的工作申请表建模，但是除了`QuestionService`返回的那些对象外，没有其它任何地方是与英雄有关的。
-
+
This is very important since it allows us to repurpose the components for any type of survey
as long as it's compatible with our *question* object model.
The key is the dynamic data binding of metadata used to render the form
without making any hardcoded assumptions about specific questions.
In addition to control metadata, we are also adding validation dynamically.
-
+
这点非常重要，因为只要与*问卷*对象模型兼容，就可以在任何类型的调查问卷中复用这些组件。
这里的关键是用到元数据的动态数据绑定来渲染表单，对问卷问题没有任何硬性的假设。除控件的元数据外，还可以动态添加验证规则。
@@ -241,21 +241,21 @@ include ../_util-fns
When the form is valid, we can click *Save* and the app renders the current form values as JSON.
This proves that any user input is bound back to the data model.
Saving and retrieving the data is an exercise for another time.
-
+
表单验证通过之前，*保存*按钮是禁用的。验证通过后，就可以点击*保存*按钮，程序会把当前值渲染成JSON显示出来。
这表明任何用户输入都被传到了数据模型里。至于如何储存和提取数据则是另一话题了。
:marked
The final form looks like this:
-
+
完整的表单看起来是这样的：
-
+
figure.image-display
img(src="/resources/images/cookbooks/dynamic-form/dynamic-form.png" alt="Dynamic-Form")
:marked
[Back to top](#top)
-
+
[回到顶部](#top)
diff --git a/public/docs/ts/latest/cookbook/visual-studio-2015.jade b/public/docs/ts/latest/cookbook/visual-studio-2015.jade
index 7769a1060e..121c8f4f2e 100644
--- a/public/docs/ts/latest/cookbook/visual-studio-2015.jade
+++ b/public/docs/ts/latest/cookbook/visual-studio-2015.jade
@@ -27,7 +27,7 @@ include ../_util-fns
This cookbook explains how to set up the QuickStart files with an **ASP.NET 4.x project** in
Visual Studio 2015.
- 本烹饪书解释了如何使用Visual Studio 2015在**ASP.NET 4.x项目**中设置**快速开始**文件。
+ 本烹饪书解释了如何使用Visual Studio 2015在**ASP.NET 4.x项目**中设置**《快速起步》**文件。
.l-sub-section
:marked
If you prefer a `File | New Project` experience and are using **ASP.NET Core**,
@@ -333,7 +333,7 @@ h2#build-and-run 第五步：构建和运行应用
:marked
The default browser opens and displays the QuickStart sample application.
- 默认浏览器打开并显示快速开始例子应用。
+ 默认浏览器打开并显示《快速起步》例子应用。
Try editing any of the project files. *Save* and refresh the browser to
see the changes.
diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade
index 366f9b2af5..50bb3b02b4 100644
--- a/public/docs/ts/latest/glossary.jade
+++ b/public/docs/ts/latest/glossary.jade
@@ -28,20 +28,22 @@ block includes
.l-main-section#A
-+ifDocsFor('ts')
- a#aot
+a#aot
+:marked
+ ## Ahead-of-Time (AoT) compilation
+
+ ## 预（ahead-of-time, AoT）编译
+
+.l-sub-section
:marked
- ## Ahead-of-time (AoT) compilation
- ## 预（ahead-of-time, AoT）编译
- .l-sub-section
- :marked
- You can compile Angular applications at build-time.
- By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly
- to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
- Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
+ You can compile Angular applications at build-time.
+ By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly
+ to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
+ Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
- 开发者可以在构造时(build-time)编译Angular应用程序。通过`Compiler-cli` - `ngc`编译应用程序，应用可以从一个模块工厂(Module Factory)直接启动，意思是不再需要把Angular编译器添加到JavaScript包中。预编译的应用程序将加载迅速，并具有更高的性能。
+ 开发者可以在构造时(build-time)编译Angular应用程序。通过`Compiler-cli` - `ngc`编译应用程序，应用可以从一个模块工厂(Module Factory)直接启动，意思是不再需要把Angular编译器添加到JavaScript包中。预编译的应用程序将加载迅速，并具有更高的性能。
++ifDocsFor('ts')
:marked
## Angular module
@@ -145,12 +147,6 @@ block includes
Angular的每个[范围化包(Scoped Package)](#scoped-package)都有一个叫做`index`的封装桶。
- That's why we can write this:
-
- 这就是为什么可以这样写：
-
- +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
-
.alert.is-important
:marked
Note that you can often achieve this using [Angular modules](#angular-module) instead.
@@ -180,9 +176,11 @@ block includes
.l-sub-section
block bootstrap-defn-top
:marked
- You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application. For more information, see [QuickStart](!{docsLatest}/quickstart.html).
+ You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application.
+ For more information, see the [Setup](!{docsLatest}/guide/setup.html) page.
- 通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component)，并可能通过[依赖注入体系(Dependency Injection System)](#dependency-injection)注册服务的[提供商(Provider)](#provider)。要了解详情，参见[快速起步](!{docsLatest}/quickstart.html)。
+ 通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component)，也就是应用加载的第一个组件。
+ 要了解详情，参见[搭建本地开发环境](!{docsLatest}/setup.html)页。
:marked
You can bootstrap multiple apps in the same `index.html`, each with its own top level root.
@@ -588,14 +586,15 @@ a#H
.l-main-section#J
-+ifDocsFor('ts')
- a#jit
- :marked
- ## Just-in-time (JiT) compilation
- ## 即时（just-in-time, JiT）编译
- .l-sub-section
+a#jit
+:marked
+ ## Just-in-Time (JiT) compilation
+
+ ## 即时（just-in-time, JiT）编译
+
+.l-sub-section
:marked
- With Angular _just-in-time_ bootstrapping you compile your components and modules in the browser
+ With Angular _just-in-time_ bootstrapping you compile your components and modules in the browser
and launch the application dynamically. This is a good choice during development.
Consider using the [ahead-of-time](#aot) mode for production apps.
@@ -908,15 +907,12 @@ a#Q
## Routing component
## 路由组件（Routing Component）
.l-sub-section
- block routing-component-defn
- :marked
- An Angular [component](#component) with a RouterOutlet that displays views based on router navigations.
+ :marked
+ An Angular [component](#component) with a `RouterOutlet` that displays views based on router navigations.
- 带有RouterOutlet的Angular[组件](#component)基于路由器导航来显示视图。
+ 带有RouterOutlet的Angular[组件](#component)基于路由器导航来显示视图。For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
- For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
-
- 要了解更多，请参见[路由与导航](!{docsLatest}/guide/router.html)页。
+ 要了解更多，请参见[路由与导航](!{docsLatest}/guide/router.html)页。
.l-main-section#S
@@ -1082,7 +1078,7 @@ a#snake-case
## TypeScript
.l-sub-section
:marked
- A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015)
+ A version of JavaScript that supports most [ECMAScript 2015](#es2015)
language features such as [decorators](#decorator).
一种支持了几乎所有[ECMAScript 2015](#ecmascript=2015)语言特性和一些未来版本可能有的特性(比如[装饰器(Decorator)](#decorator))的JavaScript语言。
diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json
index d7a6cdbdc7..871df28dcb 100644
--- a/public/docs/ts/latest/guide/_data.json
+++ b/public/docs/ts/latest/guide/_data.json
@@ -2,11 +2,29 @@
"index": {
"title": "文档概览",
"navTitle": "概览",
- "description": "如何阅读本文档",
+ "intro": "如何阅读本文档",
"nextable": true,
"basics": true
},
+ "setup": {
+ "title": "搭建本地开发环境",
+ "navTitle": "开发环境",
+ "intro": "安装 Angular 《快速起步》种子，更快更有效地在本地开发应用",
+ "nextable": true,
+ "hideNextPage": true,
+ "basics": true
+ },
+
+ "learning-angular": {
+ "title": "学习 Angular",
+ "navTitle": "学习 Angular",
+ "intro": "Angular 初学者的推荐学习路径",
+ "nextable": true,
+ "hideNextPage": true,
+ "basics": true
+ },
+
"architecture": {
"title": "架构概览",
"navTitle": "架构",
@@ -15,6 +33,15 @@
"basics": true
},
+
+ "appmodule": {
+ "title": "AppModule: 根模块",
+ "navTitle": "根模块",
+ "intro": "如何在根\"AppModule\"中构建和启动应用。",
+ "nextable": true,
+ "basics": true
+ },
+
"displaying-data": {
"title": "显示数据",
"intro": "属性绑定机制把数据显示到UI上。",
@@ -136,6 +163,11 @@
"intro": "开发“内容安全”的Angular应用。"
},
+ "setup-systemjs-anatomy": {
+ "title": "搭建剖析",
+ "intro": "解析 SystemJS 本地开发环境"
+ },
+
"structural-directives": {
"title": "结构型指令",
"intro": "Angular有一个强力的模板引擎，它能让你轻松维护元素的DOM树结构。"
diff --git a/public/docs/ts/latest/guide/appmodule.jade b/public/docs/ts/latest/guide/appmodule.jade
new file mode 100644
index 0000000000..1b77e172ce
--- /dev/null
+++ b/public/docs/ts/latest/guide/appmodule.jade
@@ -0,0 +1,241 @@
+include ../_util-fns
+
+:marked
+ 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](#main) to launch the application.
+ You can call it anything you want. The conventional name is `AppModule`.
+
+ Angular 模块类描述应用的部件是如何组合在一起的。
+ 每个应用都至少有一个 Angular 模块，也就是*根*模块，用来[引导](#main)并运行应用。
+ 你可以为它取任何名字。常规名字是`AppModule`。
+
+ The [setup](setup.html) instructions produce a new project with the following minimal `AppModule`.
+ You'll evolve this module as your application grows.
+
+ [搭建本地开发环境](setup.html)讲解了如何使用下面这个最小的`AppModule`来创建一个新项目。
+ 这个模块随着应用的成长而演变。
+
++makeExample('setup/ts/app/app.module.ts','', 'app/app.module.ts')(format='.')
+
+:marked
+ After the `import` statements, you come to a class adorned with the
+ **`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained').
+
+ `import`声明之后，有个类被 **`@NgModule`**[装饰器](glossary.html#decorator '"Decorator" explained')所装饰。
+
+ The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class).
+ `@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
+
+ 该`@NgModule`装饰器将`AppModule`标记为 Angular 模块类（也叫`NgModule`类）。
+ `@NgModule`接受一个*元数据*对象，为 Angular 描述如何编译和启动应用。
+
+ * **_imports_** — the `BrowserModule` that this and every application needs to run in a browser.
+
+ * ***imports*** —— `BrowserModule`，这个和每个在浏览器中运行应用都需要它。
+
+ * **_declarations_** — the application's lone component, which is also ...
+
+ * ***declarations*** —— 应用的唯一组件，它同时也是...
+
+ * **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page.
+
+ * ***bootstrap*** —— *根*组件，Angular 创建它并将其插入到`index.html`宿主页面。
+
+ The [Angular Modules (NgModules)](ngmodule.html) 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.
+
+ [Angular 模块 (NgModules)](ngmodule.html)指南深入讲解了 Angular 模块。
+ 现在先初步了解这三个属性。
+
+a#imports
+:marked
+ ### The _imports_ array
+
+ ### *imports* 数组
+
+ Angular modules are a way to consolidate features that belong together into discrete units.
+ 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.
+
+ Angular 模块是用来合并那些属于离散单元的特性的。
+ Angular 自身的许多特性也是通过 Angular 模块组织的。
+ HTTP 服务在`HttpModule`里。路由器在`RouterModule`中。
+ 最后，你可能也会创建特性模块。
+
+ Add a module to the `imports` array when the application requires its features.
+
+ 当应用需要模块的特性时，将其添加到`imports`数组中。
+
+ _This_ application, like most applications, executes in a browser.
+ Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`.
+ So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array.
+ Other guide and cookbook pages will tell you when you need to add additional modules to this array.
+
+ *本*应用和大多数其他应用一样，在浏览器中运行。
+ 每个浏览器中运行的应用都需要`@angular/platform-browser`里的`BrowserModule`。
+ 所以每个这样的应用都在其*根*`AppModule`的`imports`数组中包含了`BrowserModule`。
+ 在需要添加额外模块到此数组时，其他指南和烹饪书页面会告诉你。
+
+.alert.is-important
+ :marked
+ **Only `NgModule` classes** go in the `imports` array. Don't put any other kind of class in `imports`.
+
+ `imports`数组中应该**只有`NgModule`类**。不要放置其他类型的类。
+
+.l-sub-section
+ :marked
+ Don't confuse the `import` statements at the top of the file with the Angular module's `imports` array.
+ They have different jobs.
+
+ 不要将 Angular 模块的`imports`数组与文件顶部的`import`声明弄混淆了。它们的功能不同。
+
+ The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
+ so you can reference them within _this_ file.
+ They have nothing to do with Angular and Angular knows nothing about them.
+
+ *JavaScript* 的`import`声明允许你访问在其他文件中*导出*的符号，这样你可以在*当前*文件引用它们。
+ 它们与 Angular 毫无关系，而且 Angular 对它们一无所知。
+
+ The _module's_ `imports` array tells Angular about specific Angular modules — classes decorated with `@NgModule` —
+ that the application needs to function properly.
+
+ *模块*的`imports`数组为 Angular 提供特定 Angular 模块——被`@NgModule`装饰的类——应用需要它们来正常工作。
+a#declarations
+:marked
+ ### The _declarations_ array
+
+ ### *declarations* 数组
+
+ You must declare _every_ component in one (and _only one_) `NgModule` class.
+ 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`.
+
+ *每个*组件必须在一个，而且仅仅一个`NgModule`类中声明。
+ 通过将其列到`AppModule`模块的`declarations`数组中，你告诉 Angular 哪个组件属于`AppModule`。
+ 在创建更多组件的过程中，逐步将它们添加到`declarations`中。
+
+ You'll learn to create two other kinds of classes —
+ [directives](attribute-directives.html) and [pipes](pipes.html) —
+ that you must also add to the `declarations` array.
+
+ 你会学到怎样创建其他两种类——[指令](attribute-directives.html)和[管道](pipes.html)——它们也必须被添加到`declarations`数组。
+
+.alert.is-important
+ :marked
+ **Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.
+ Don't put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes.
+
+ **只有*可以声明的***——*组件*、*指令*和*管道*——属于`declarations`数组。不要将其他类型的类添加到`declarations`中，非`NgModule`类, 非服务类，亦非模型类。
+
+a#bootstrap-array
+:marked
+ ### The _bootstrap_ array
+
+ ### *bootstrap* 数组
+
+ You launch the application by [_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.
+
+ 通过[_引导_](#main)根`AppModule`来启动应用。在启动过程中，其中一步是创建列在`bootstrap`数组的组件，并将它们每一个都插入到浏览器的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.
+ 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`.
+
+ 你可以为这个*根*组件取任何名字，但是大多数程序员将其取名为`AppComponent`。
+
+ Which brings us to the _bootstrapping_ process itself.
+
+ 下面让我们来看看*引导*过程本身。
+
+a#main
+l-main-section
+:marked
+ ## Bootstrap in _main.ts_
+
+ ## 在*main.ts*中引导
+
+ There are many ways to bootstrap an application.
+ The variations depend upon how you want to compile the application and where you want to run it.
+
+ 引导应用的方法很多。
+ 它们取决于你想如何编译应用以及应用将在哪儿运行。
+
+ 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.
+
+ 在开始时，你将使用_即时 (JiT) _编译器动态编译应用。然后在浏览器中运行它。
+ 稍后，你可以了解其他选项。
+
+ The recommended place to bootstrap a JiT-compiled browser application is in a separate file
+ in the `app` folder named `app/main.ts`
+
+ 引导即时编译的浏览器应用的推荐地点是在`app`目录中一个名为`app/main.ts`的单独文件中。
+
++makeExample('setup/ts/app/main.ts','','app/main.ts')(format='.')
+:marked
+ This code creates a browser platform for dynamic (JiT) compilation and
+ bootstrap's the `AppModule` described above.
+
+ 该代码为动态 (JiT) 编译创建浏览器平台，并引导上面提到的`AppModule`。
+
+ The _bootstrapping_ process sets up the execution environment,
+ 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`.
+
+ 引导过程搭建运行环境，从模块的`bootstrap`数组中提出*根*`AppComponent` —— 创建该组件的实例并将其插入到组件`selector`标识的元素标签中。
+
+ The `AppComponent` selector — here and in most documentation samples — is `my-app`
+ so Angular looks for a `` tag in the `index.html` like this one ...
+
+ `AppComponent`选择器——在这里以及文档大部分例子中——都是`my-app`，所以 Angular 在`index.html`中查找像这样的``标签...
++makeExample('setup/ts/index.html','my-app')(format='.')
+:marked
+ ... and displays the `AppComponent` there.
+
+ ...然后在那儿显示`AppComponent`。
+
+ This file is very stable. Once you've set it up, you may never change it again.
+
+ 该文件非常稳定。一旦被配置，它可能永远不会再被修改。
+
+a#quickstart-appmodule
+l-main-section
+:marked
+ ## QuickStart's _AppModule_
+
+ ## 《快速起步》的`AppModule`
+
+ Every Angular application must have a root `NgModule`, even the [QuickStart](../quickstart.html).
+ You didn't see it but it was there.
+
+ 每个 Angular 应用必须有一个跟`NgModule`，包括[快速起步](../quickstart.html)在内。
+ 虽然你看不到它，但是它在那儿。
+
+ A script in the `index.html` generated a hidden `AppModule` and bootstrapped it for you
+ so you could focus on the `AppComponent` and discover the _essential Angular_ more quickly.
+
+ `index.html`中的一个脚本生成了隐藏的`AppModule`并为你引导它。这样你可以专注于`AppComponent`，以更快的了解* Angular 的基础*。
+
+ If you're feeling adventurous, add your own `AppModule` and `main.ts` to the
+ live code in the _QuickStart_ plunker.
+
+ 你可以添加自己的`AppModule`和`main.ts`到plunker上*快速起步*的在线代码中。
+
+ Remove the following `'
+ to: ''
},
// Clear script like this:
//