chore(dart): complete the renaming of "Angular 2" to "Angular" (#2820)
Contributes to #2407 - Dropped the “2” in “Angular 2” and “angular2_*” where appropriate. - Did a partial sync of `_cache/guide/pipes.jade` - In quickstart, changed `Try changing the message to "Hello Angular 2!”` to `Try changing the message to "Hello Again Angular!”`.
This commit is contained in:
parent
d853a29fe0
commit
f993315931
|
@ -3,7 +3,7 @@
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Angular 2 Lifecycle Hooks</title>
|
<title>Angular Lifecycle Hooks</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# #docregion
|
# #docregion
|
||||||
name: angular2_quickstart
|
name: angular_quickstart
|
||||||
description: QuickStart
|
description: QuickStart
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
environment:
|
environment:
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// #docregion
|
// #docregion
|
||||||
import 'package:angular2/platform/browser.dart';
|
import 'package:angular2/platform/browser.dart';
|
||||||
|
|
||||||
import 'package:angular2_quickstart/app_component.dart';
|
import 'package:angular_quickstart/app_component.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# #docregion
|
# #docregion
|
||||||
name: angular2_tour_of_heroes
|
name: angular_tour_of_heroes
|
||||||
description: Tour of Heroes
|
description: Tour of Heroes
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
environment:
|
environment:
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// #docregion pt1
|
// #docregion pt1
|
||||||
import 'package:angular2/platform/browser.dart';
|
import 'package:angular2/platform/browser.dart';
|
||||||
|
|
||||||
import 'package:angular2_tour_of_heroes/app_component.dart';
|
import 'package:angular_tour_of_heroes/app_component.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# #docregion
|
# #docregion
|
||||||
name: angular2_tour_of_heroes
|
name: angular_tour_of_heroes
|
||||||
description: Tour of Heroes
|
description: Tour of Heroes
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
environment:
|
environment:
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import 'package:angular2/platform/browser.dart';
|
import 'package:angular2/platform/browser.dart';
|
||||||
|
|
||||||
import 'package:angular2_tour_of_heroes/app_component.dart';
|
import 'package:angular_tour_of_heroes/app_component.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# #docregion
|
# #docregion
|
||||||
name: angular2_tour_of_heroes
|
name: angular_tour_of_heroes
|
||||||
description: Tour of Heroes
|
description: Tour of Heroes
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
environment:
|
environment:
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// #docregion pt1
|
// #docregion pt1
|
||||||
import 'package:angular2/platform/browser.dart';
|
import 'package:angular2/platform/browser.dart';
|
||||||
|
|
||||||
import 'package:angular2_tour_of_heroes/app_component.dart';
|
import 'package:angular_tour_of_heroes/app_component.dart';
|
||||||
|
|
||||||
main() {
|
main() {
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# #docregion
|
# #docregion
|
||||||
name: angular2_tour_of_heroes
|
name: angular_tour_of_heroes
|
||||||
description: Tour of Heroes
|
description: Tour of Heroes
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
environment:
|
environment:
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import 'package:angular2/platform/browser.dart';
|
import 'package:angular2/platform/browser.dart';
|
||||||
|
|
||||||
import 'package:angular2_tour_of_heroes/app_component.dart';
|
import 'package:angular_tour_of_heroes/app_component.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import 'package:angular2/platform/browser.dart';
|
import 'package:angular2/platform/browser.dart';
|
||||||
|
|
||||||
import 'package:angular2_tour_of_heroes/app_component_1.dart';
|
import 'package:angular_tour_of_heroes/app_component_1.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# #docregion
|
# #docregion
|
||||||
name: angular2_tour_of_heroes
|
name: angular_tour_of_heroes
|
||||||
description: Tour of Heroes
|
description: Tour of Heroes
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
environment:
|
environment:
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import 'package:angular2/platform/browser.dart';
|
import 'package:angular2/platform/browser.dart';
|
||||||
|
|
||||||
import 'package:angular2_tour_of_heroes/app_component.dart';
|
import 'package:angular_tour_of_heroes/app_component.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
|
|
|
@ -3,11 +3,11 @@
|
||||||
import 'package:angular2/core.dart';
|
import 'package:angular2/core.dart';
|
||||||
import 'package:angular2/router.dart';
|
import 'package:angular2/router.dart';
|
||||||
|
|
||||||
import 'package:angular2_tour_of_heroes/heroes_component.dart';
|
import 'package:angular_tour_of_heroes/heroes_component.dart';
|
||||||
import 'package:angular2_tour_of_heroes/hero_service.dart';
|
import 'package:angular_tour_of_heroes/hero_service.dart';
|
||||||
import 'package:angular2_tour_of_heroes/dashboard_component.dart';
|
import 'package:angular_tour_of_heroes/dashboard_component.dart';
|
||||||
// #docregion hero-detail-import
|
// #docregion hero-detail-import
|
||||||
import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
|
import 'package:angular_tour_of_heroes/hero_detail_component.dart';
|
||||||
// #enddocregion hero-detail-import
|
// #enddocregion hero-detail-import
|
||||||
|
|
||||||
@Component(
|
@Component(
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# #docregion , additions
|
# #docregion , additions
|
||||||
name: angular2_tour_of_heroes
|
name: angular_tour_of_heroes
|
||||||
# #enddocregion additions
|
# #enddocregion additions
|
||||||
description: Tour of Heroes
|
description: Tour of Heroes
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
|
|
|
@ -2,9 +2,9 @@
|
||||||
// #docregion , v1, v2
|
// #docregion , v1, v2
|
||||||
import 'package:angular2/core.dart';
|
import 'package:angular2/core.dart';
|
||||||
import 'package:angular2/platform/browser.dart';
|
import 'package:angular2/platform/browser.dart';
|
||||||
import 'package:angular2_tour_of_heroes/app_component.dart';
|
import 'package:angular_tour_of_heroes/app_component.dart';
|
||||||
// #enddocregion v1
|
// #enddocregion v1
|
||||||
import 'package:angular2_tour_of_heroes/in_memory_data_service.dart';
|
import 'package:angular_tour_of_heroes/in_memory_data_service.dart';
|
||||||
import 'package:http/http.dart';
|
import 'package:http/http.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
|
|
|
@ -56,7 +56,7 @@ block routing-component-defn
|
||||||
block append snake-case-defn
|
block append snake-case-defn
|
||||||
:marked
|
:marked
|
||||||
Library and file names are often spelled in snake_case. Examples include:
|
Library and file names are often spelled in snake_case. Examples include:
|
||||||
`angular2_tour_of_heroes` and `app_component.dart`.
|
`angular_tour_of_heroes` and `app_component.dart`.
|
||||||
|
|
||||||
block zone-defn
|
block zone-defn
|
||||||
:marked
|
:marked
|
||||||
|
|
|
@ -11,7 +11,7 @@ block includes
|
||||||
|
|
||||||
block angular-parts
|
block angular-parts
|
||||||
:marked
|
:marked
|
||||||
Angular 2 for Dart is published as the `angular2` package, which
|
Angular for Dart is published as the `angular2` package, which
|
||||||
(like many other Dart packages) is available via the Pub tool.
|
(like many other Dart packages) is available via the Pub tool.
|
||||||
|
|
||||||
block modules-in-dart
|
block modules-in-dart
|
||||||
|
|
|
@ -11,7 +11,7 @@ block ctor-syntax
|
||||||
initializing properties simultaneously.
|
initializing properties simultaneously.
|
||||||
|
|
||||||
block injectable-not-always-needed-in-ts
|
block injectable-not-always-needed-in-ts
|
||||||
//- The [Angular 2 Dart Transformer](https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer)
|
//- 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
|
//- generates static code to replace the use of dart:mirrors. It requires that types be
|
||||||
//- identified as targets for static code generation. Generally this is achieved
|
//- identified as targets for static code generation. Generally this is achieved
|
||||||
//- by marking the class as @Injectable (though there are other mechanisms).
|
//- by marking the class as @Injectable (though there are other mechanisms).
|
||||||
|
|
|
@ -15,7 +15,7 @@ block demos-list
|
||||||
block http-providers
|
block http-providers
|
||||||
:marked
|
:marked
|
||||||
Actually, it is unnecessary to include `BrowserClient` in the list of providers.
|
Actually, it is unnecessary to include `BrowserClient` in the list of providers.
|
||||||
***But*** as is mentioned in the *Angular 2 Dart Transformer* [wiki page][ng2dtri],
|
***But*** as is mentioned in the *Angular Dart Transformer* [wiki page][ng2dtri],
|
||||||
the template compiler _generates_ dependency injection code, hence all the
|
the template compiler _generates_ dependency injection code, hence all the
|
||||||
identifiers used in DI have to be collected by the Angular transformer
|
identifiers used in DI have to be collected by the Angular transformer
|
||||||
so that the libraries containing these identifiers can be transformed.
|
so that the libraries containing these identifiers can be transformed.
|
||||||
|
|
|
@ -121,7 +121,7 @@ block build-app
|
||||||
transformer wiki page</a>.
|
transformer wiki page</a>.
|
||||||
|
|
||||||
.l-sub-section#performance
|
.l-sub-section#performance
|
||||||
h3 Performance, the transformer, and Angular 2 libraries
|
h3 Performance, the transformer, and Angular libraries
|
||||||
p.
|
p.
|
||||||
When an app imports <code>bootstrap.dart</code>,
|
When an app imports <code>bootstrap.dart</code>,
|
||||||
it also gets <code>dart:mirrors</code>,
|
it also gets <code>dart:mirrors</code>,
|
||||||
|
@ -164,7 +164,7 @@ block server-watching
|
||||||
|
|
||||||
block project-file-structure
|
block project-file-structure
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_quickstart
|
.file angular_quickstart
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
// TODO: don't duplicate text from /docs/js/latest/resources.jade
|
// TODO: don't duplicate text from /docs/ts/latest/resources.jade
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 Victor Savkin's Blog Posts
|
h2 Victor Savkin's Blog Posts
|
||||||
ul
|
ul
|
||||||
|
@ -12,7 +12,7 @@
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 <span class="icon-play-circle-outline"></span> Videos
|
h2 <span class="icon-play-circle-outline"></span> Videos
|
||||||
|
|
||||||
h4 Intro Vidoes
|
h4 Intro Videos
|
||||||
ul
|
ul
|
||||||
li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
|
li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
|
||||||
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
|
li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
|
||||||
|
@ -33,7 +33,6 @@
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2 <span class="icon-content-copy"></span> API Design Docs & Notes
|
h2 <span class="icon-content-copy"></span> API Design Docs & Notes
|
||||||
ul
|
ul
|
||||||
li <a href="https://drive.google.com/folderview?id=0B7GYXx6a6d8QR3lTT1J3MEpRSlE&authuser=0&usp=drive_web#list">Best Practices</a>
|
|
||||||
li <a href="https://drive.google.com/open?id=0B7GYXx6a6d8QR3lTT1J3MEpRSlE&authuser=0">Best Practices</a>
|
li <a href="https://drive.google.com/open?id=0B7GYXx6a6d8QR3lTT1J3MEpRSlE&authuser=0">Best Practices</a>
|
||||||
li <a href="https://drive.google.com/open?id=0BxgtL8yFJbacUnUxc3l5aTZrbVk&authuser=0">API Design Docs</a>
|
li <a href="https://drive.google.com/open?id=0BxgtL8yFJbacUnUxc3l5aTZrbVk&authuser=0">API Design Docs</a>
|
||||||
li <a href="https://drive.google.com/open?id=0BxgtL8yFJbacMEZDc2NtWS1VZ1k&authuser=0">Meeting Notes</a>
|
li <a href="https://drive.google.com/open?id=0BxgtL8yFJbacMEZDc2NtWS1VZ1k&authuser=0">Meeting Notes</a>
|
||||||
|
|
|
@ -11,11 +11,11 @@ include ../_util-fns
|
||||||
TODO: Recommend stagehand?
|
TODO: Recommend stagehand?
|
||||||
-->
|
-->
|
||||||
|
|
||||||
Copy the "QuickStart" code to a new folder and rename the folder `angular2_tour_of_heroes`.
|
Copy the "QuickStart" code to a new folder and rename the folder `angular_tour_of_heroes`.
|
||||||
We should have the following structure:
|
We should have the following structure:
|
||||||
|
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_tour_of_heroes
|
.file angular_tour_of_heroes
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
|
|
@ -19,7 +19,7 @@ include ../_util-fns
|
||||||
If not, we’ll need to go back to Part 1 and figure out what we missed.
|
If not, we’ll need to go back to Part 1 and figure out what we missed.
|
||||||
|
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_tour_of_heroes
|
.file angular_tour_of_heroes
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
|
|
@ -12,7 +12,7 @@ include ../_util-fns
|
||||||
Before we continue with our Tour of Heroes, let’s verify we have the following structure. If not, we’ll need to go back and follow the previous chapters.
|
Before we continue with our Tour of Heroes, let’s verify we have the following structure. If not, we’ll need to go back and follow the previous chapters.
|
||||||
|
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_tour_of_heroes
|
.file angular_tour_of_heroes
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
@ -204,7 +204,7 @@ code-example(format=".").
|
||||||
Let’s verify that we have the following structure after all of our good refactoring in this chapter:
|
Let’s verify that we have the following structure after all of our good refactoring in this chapter:
|
||||||
|
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_tour_of_heroes
|
.file angular_tour_of_heroes
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
|
|
@ -23,7 +23,7 @@ include ../_util-fns
|
||||||
If not, we’ll need to go back and follow the previous chapters.
|
If not, we’ll need to go back and follow the previous chapters.
|
||||||
|
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_tour_of_heroes
|
.file angular_tour_of_heroes
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
@ -322,7 +322,7 @@ code-example(format="nocode").
|
||||||
Let’s verify that we have the following structure after all of our good refactoring in this chapter:
|
Let’s verify that we have the following structure after all of our good refactoring in this chapter:
|
||||||
|
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_tour_of_heroes
|
.file angular_tour_of_heroes
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
|
|
@ -9,7 +9,7 @@ block includes
|
||||||
|
|
||||||
block intro-file-tree
|
block intro-file-tree
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_tour_of_heroes
|
.file angular_tour_of_heroes
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
@ -142,7 +142,7 @@ block router-link-active
|
||||||
|
|
||||||
block file-tree-end
|
block file-tree-end
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_tour_of_heroes
|
.file angular_tour_of_heroes
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
|
|
@ -121,7 +121,7 @@ block observable-transformers
|
||||||
|
|
||||||
block filetree
|
block filetree
|
||||||
.filetree
|
.filetree
|
||||||
.file angular2_tour_of_heroes
|
.file angular_tour_of_heroes
|
||||||
.children
|
.children
|
||||||
.file lib
|
.file lib
|
||||||
.children
|
.children
|
||||||
|
|
|
@ -10,4 +10,4 @@
|
||||||
|
|
||||||
h3 Dart
|
h3 Dart
|
||||||
|
|
||||||
p: <a href="/docs/dart/latest">Angular 2 Dart - Latest Version</a>
|
p: <a href="/docs/dart/latest">Angular Dart - Latest Version</a>
|
|
@ -9,8 +9,8 @@ block includes
|
||||||
- var _decoratorLink = '<a href="#' + _decorator + '">' + _decorator + '</a>'
|
- var _decoratorLink = '<a href="#' + _decorator + '">' + _decorator + '</a>'
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Angular 2 has a vocabulary of its own.
|
Angular has a vocabulary of its own.
|
||||||
Most Angular 2 terms are everyday English words
|
Most Angular terms are everyday English words
|
||||||
with a specific meaning within the Angular system.
|
with a specific meaning within the Angular system.
|
||||||
|
|
||||||
We have gathered here the most prominent terms
|
We have gathered here the most prominent terms
|
||||||
|
@ -342,7 +342,7 @@ block includes
|
||||||
|
|
||||||
The latest approved version of JavaScript is
|
The latest approved version of JavaScript is
|
||||||
[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
|
[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
|
||||||
(AKA "ES2016" or "ES7") and many Angular 2 developers will write their applications
|
(AKA "ES2016" or "ES7") and many Angular developers will write their applications
|
||||||
either in this version of the language or a dialect that strives to be
|
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](#typesScript).
|
||||||
|
|
||||||
|
@ -350,7 +350,7 @@ block includes
|
||||||
Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
|
Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
|
||||||
to ES5 JavaScript.
|
to ES5 JavaScript.
|
||||||
|
|
||||||
Angular 2 developers may choose to write in ES5 directly.
|
Angular developers may choose to write in ES5 directly.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## ES2015
|
## ES2015
|
||||||
|
@ -741,7 +741,7 @@ a#snake-case
|
||||||
code completion, refactoring, and intelligent search). Many code editors
|
code completion, refactoring, and intelligent search). Many code editors
|
||||||
and IDEs support TypeScript either natively or with plugins.
|
and IDEs support TypeScript either natively or with plugins.
|
||||||
|
|
||||||
TypeScript is the preferred language for Angular 2 development although
|
TypeScript is the preferred language for Angular development although
|
||||||
we are welcome to write in other JavaScript dialects such as [ES5](#es5).
|
we are welcome to write in other JavaScript dialects such as [ES5](#es5).
|
||||||
|
|
||||||
Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
|
Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
|
||||||
|
|
|
@ -4,7 +4,7 @@ block includes
|
||||||
- var _at_angular = '@angular'
|
- var _at_angular = '@angular'
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Angular 2 is a framework to help us build client applications in HTML and
|
Angular is a framework to help us build client applications in HTML and
|
||||||
either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript.
|
either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript.
|
||||||
|
|
||||||
block angular-parts
|
block angular-parts
|
||||||
|
@ -27,7 +27,7 @@ figure
|
||||||
img(src="/resources/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700")
|
img(src="/resources/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The architecture diagram identifies the eight main building blocks of an Angular 2 application:
|
The architecture diagram identifies the eight main building blocks of an Angular application:
|
||||||
|
|
||||||
1. [Modules](#modules)
|
1. [Modules](#modules)
|
||||||
1. [Components](#components)
|
1. [Components](#components)
|
||||||
|
@ -71,7 +71,7 @@ block modules-are-optional
|
||||||
Each chapter has plenty to offer after you steer clear of the `import` and `export` statements.
|
Each chapter has plenty to offer after you steer clear of the `import` and `export` statements.
|
||||||
|
|
||||||
Find setup and organization clues in the JavaScript track (select it from the combo-box at the top of this page)
|
Find setup and organization clues in the JavaScript track (select it from the combo-box at the top of this page)
|
||||||
which demonstrates Angular 2 development with plain old JavaScript and no module system.
|
which demonstrates Angular development with plain old JavaScript and no module system.
|
||||||
|
|
||||||
- var _app_comp_filename = _docsFor == 'dart' ? 'app_component.dart' : 'app.component.ts';
|
- var _app_comp_filename = _docsFor == 'dart' ? 'app_component.dart' : 'app.component.ts';
|
||||||
:marked
|
:marked
|
||||||
|
|
|
@ -2,7 +2,7 @@ block includes
|
||||||
include ../_util-fns
|
include ../_util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Angular 2 applications are styled with regular CSS. That means we can apply
|
Angular applications are styled with regular CSS. That means we can apply
|
||||||
everything we know about CSS stylesheets, selectors, rules, and media queries
|
everything we know about CSS stylesheets, selectors, rules, and media queries
|
||||||
to our Angular applications directly.
|
to our Angular applications directly.
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@ block includes
|
||||||
:marked
|
:marked
|
||||||
## Using Component Styles
|
## Using Component Styles
|
||||||
|
|
||||||
For every Angular 2 component we write, we may define not only an HTML template,
|
For every Angular component we write, we may define not only an HTML template,
|
||||||
but also the CSS styles that go with that template,
|
but also the CSS styles that go with that template,
|
||||||
specifying any selectors, rules, and media queries that we need.
|
specifying any selectors, rules, and media queries that we need.
|
||||||
|
|
||||||
|
|
|
@ -237,7 +237,7 @@ block ctor-syntax
|
||||||
This is important in general, but not to our current story.
|
This is important in general, but not to our current story.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
A service is nothing more than a class in Angular 2.
|
A service is nothing more than a class in Angular.
|
||||||
It remains nothing more than a class until we register it with an Angular injector.
|
It remains nothing more than a class until we register it with an Angular injector.
|
||||||
|
|
||||||
#bootstrap
|
#bootstrap
|
||||||
|
|
|
@ -153,7 +153,7 @@ figure.image-display
|
||||||
|
|
||||||
By configuring a provider for the `RestoreService` on the `HeroEditComponent`, we get exactly one new instance of the `RestoreService`per `HeroEditComponent`.
|
By configuring a provider for the `RestoreService` on the `HeroEditComponent`, we get exactly one new instance of the `RestoreService`per `HeroEditComponent`.
|
||||||
|
|
||||||
Does that mean that services aren’t singletons anymore in Angular 2? Yes and no.
|
Does that mean that services aren’t singletons anymore in Angular? Yes and no.
|
||||||
There can be only one instance of a service type in a particular injector.
|
There can be only one instance of a service type in a particular injector.
|
||||||
But we've learned that we can have multiple injectors operating at different levels of the application's component tree.
|
But we've learned that we can have multiple injectors operating at different levels of the application's component tree.
|
||||||
Any of those injectors could have its own instance of the service.
|
Any of those injectors could have its own instance of the service.
|
||||||
|
@ -166,7 +166,7 @@ figure.image-display
|
||||||
of that component. We've made the `RestoreService` a kind of "private" singleton for each `HeroEditComponent`,
|
of that component. We've made the `RestoreService` a kind of "private" singleton for each `HeroEditComponent`,
|
||||||
scoped to that component instance and its child components.
|
scoped to that component instance and its child components.
|
||||||
|
|
||||||
//- ## Advanced Dependency Injection in Angular 2
|
//- ## Advanced Dependency Injection in Angular
|
||||||
//- Restrict Dependency Lookups
|
//- Restrict Dependency Lookups
|
||||||
//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
|
//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
|
||||||
//- .l-main-section
|
//- .l-main-section
|
||||||
|
|
|
@ -36,7 +36,7 @@ block includes
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Inside the interpolation expression we flow the component's `birthday` value through the
|
Inside the interpolation expression we flow the component's `birthday` value through the
|
||||||
[pipe operator](./template-syntax.html#pipe) ( | ) to the [Date pipe](../api/common/index/DatePipe-class.html)
|
[pipe operator](./template-syntax.html#pipe) ( | ) to the [Date pipe](../api/common/index/DatePipe-pipe.html)
|
||||||
function on the right. All pipes work this way.
|
function on the right. All pipes work this way.
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -59,7 +59,7 @@ block includes
|
||||||
Learn more about these and many other built-in pipes in the [API Reference](../api/#!?apiFilter=pipe);
|
Learn more about these and many other built-in pipes in the [API Reference](../api/#!?apiFilter=pipe);
|
||||||
filter for entries that include the word "pipe".
|
filter for entries that include the word "pipe".
|
||||||
|
|
||||||
Angular 2 doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in an [appendix below](#no-filter-pipe).
|
Angular doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in an [appendix below](#no-filter-pipe).
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
@ -103,7 +103,7 @@ figure.image-display
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Learn more about the `DatePipes` format options in the [API Docs](../api/common/index/DatePipe-class.html).
|
Learn more about the `DatePipes` format options in the [API Docs](../api/common/index/DatePipe-pipe.html).
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Chaining pipes
|
## Chaining pipes
|
||||||
|
@ -336,7 +336,7 @@ block pure-change
|
||||||
We can derive a `FlyingHeroesImpureComponent` that we derive from the `FlyingHeroesComponent`.
|
We can derive a `FlyingHeroesImpureComponent` that we derive from the `FlyingHeroesComponent`.
|
||||||
+makeExample('pipes/ts/app/flying-heroes.component.ts','impure-component','app/flying-heroes.component.ts (FlyingHeroesImpureComponent)')(format='.')
|
+makeExample('pipes/ts/app/flying-heroes.component.ts','impure-component','app/flying-heroes.component.ts (FlyingHeroesImpureComponent)')(format='.')
|
||||||
:marked
|
:marked
|
||||||
The only substantive change is the pipe.
|
The only substantive change is the pipe in the template.
|
||||||
We can confirm in the <live-example></live-example> that the _flying heroes_
|
We can confirm in the <live-example></live-example> that the _flying heroes_
|
||||||
display updates as we enter new heroes even when we mutate the `heroes` #{_array}.
|
display updates as we enter new heroes even when we mutate the `heroes` #{_array}.
|
||||||
|
|
||||||
|
@ -403,7 +403,7 @@ figure.image-display
|
||||||
.callout.is-helpful
|
.callout.is-helpful
|
||||||
header Debugging with the json pipe
|
header Debugging with the json pipe
|
||||||
:marked
|
:marked
|
||||||
The [JsonPipe](../api/common/index/JsonPipe-class.html)
|
The [JsonPipe](../api/common/index/JsonPipe-pipe.html)
|
||||||
provides an easy way to diagnosis a mysteriously failing data binding or
|
provides an easy way to diagnosis a mysteriously failing data binding or
|
||||||
inspect an object for future binding.
|
inspect an object for future binding.
|
||||||
|
|
||||||
|
|
|
@ -12,14 +12,14 @@ block includes
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Our QuickStart goal is to build and run a super-simple
|
Our QuickStart goal is to build and run a super-simple
|
||||||
Angular 2 application in #{_Lang}, and
|
Angular application in #{_Lang}, and
|
||||||
establish a development environment for the remaining documentation samples
|
establish a development environment for the remaining documentation samples
|
||||||
that also can be the foundation for real world applications.
|
that also can be the foundation for real world applications.
|
||||||
|
|
||||||
.callout.is-helpful
|
.callout.is-helpful
|
||||||
header Don't want #{_Lang}?
|
header Don't want #{_Lang}?
|
||||||
p.
|
p.
|
||||||
Although we're getting started in #{_Lang}, you can also write Angular 2 apps
|
Although we're getting started in #{_Lang}, you can also write Angular apps
|
||||||
in #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'} and JavaScript.
|
in #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'} and JavaScript.
|
||||||
Just select either of those languages from the combo-box in the banner.
|
Just select either of those languages from the combo-box in the banner.
|
||||||
|
|
||||||
|
@ -259,7 +259,7 @@ p.
|
||||||
each made up of several, related features that we'll use to build our application.
|
each made up of several, related features that we'll use to build our application.
|
||||||
|
|
||||||
When we need something from a module or library, we import it.
|
When we need something from a module or library, we import it.
|
||||||
Here we import the Angular 2 core so that our component code can have access to
|
Here we import the Angular core so that our component code can have access to
|
||||||
the `@Component` #{_decorator}.
|
the `@Component` #{_decorator}.
|
||||||
|
|
||||||
+makeExcerpt('app/app.component.ts', 'import')
|
+makeExcerpt('app/app.component.ts', 'import')
|
||||||
|
@ -556,7 +556,7 @@ block build-app
|
||||||
:marked
|
:marked
|
||||||
## Make some changes
|
## Make some changes
|
||||||
|
|
||||||
Try changing the message to "Hello Angular 2!".
|
Try changing the message to "Hello Again Angular!".
|
||||||
block server-watching
|
block server-watching
|
||||||
:marked
|
:marked
|
||||||
The TypeScript compiler and `lite-server` are watching.
|
The TypeScript compiler and `lite-server` are watching.
|
||||||
|
@ -613,7 +613,7 @@ block project-files
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## What next?
|
## What next?
|
||||||
Our first application doesn't do much. It's basically "Hello, World" for Angular 2.
|
Our first application doesn't do much. It's basically "Hello, World" for Angular.
|
||||||
|
|
||||||
We kept it simple in our first pass: we wrote a little Angular component,
|
We kept it simple in our first pass: we wrote a little Angular component,
|
||||||
created a simple `index.html`, and launched with a
|
created a simple `index.html`, and launched with a
|
||||||
|
@ -627,6 +627,6 @@ block project-files
|
||||||
We'll likely open `index.html` only if we need to add a library or some css stylesheets.
|
We'll likely open `index.html` only if we need to add a library or some css stylesheets.
|
||||||
:marked
|
:marked
|
||||||
We're about to take the next step and build a small application that
|
We're about to take the next step and build a small application that
|
||||||
demonstrates the great things we can build with Angular 2.
|
demonstrates the great things we can build with Angular.
|
||||||
|
|
||||||
Join us on the [Tour of Heroes Tutorial](./tutorial)!
|
Join us on the [Tour of Heroes Tutorial](./tutorial)!
|
||||||
|
|
|
@ -8,10 +8,10 @@ include _util-fns
|
||||||
that can create a project, add files, and perform a variety of on-going development tasks such
|
that can create a project, add files, and perform a variety of on-going development tasks such
|
||||||
as testing, bundling, and deployment.
|
as testing, bundling, and deployment.
|
||||||
|
|
||||||
Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular 2
|
Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular
|
||||||
application in TypeScript, using Angular-CLI
|
application in TypeScript, using Angular-CLI
|
||||||
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
|
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
|
||||||
benefit _every_ Angular 2 project.
|
benefit _every_ Angular project.
|
||||||
|
|
||||||
By the end of the chapter, we'll have a basic understanding of development with the CLI
|
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.
|
and a foundation for both these documentation samples and our real world applications.
|
||||||
|
@ -96,7 +96,7 @@ h2#first-component Step 4: Edit our first Angular component
|
||||||
We'll leave that step as an exercise.
|
We'll leave that step as an exercise.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Open the component file and change the `title` property from _cli-quickstart works!_ to _My First Angular 2 App_:
|
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=".")
|
+makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.ts', 'title', 'src/app/cli-quickstart.component.ts')(format=".")
|
||||||
|
|
||||||
|
@ -116,15 +116,15 @@ figure.image-display
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## What's next?
|
## What's next?
|
||||||
Our first application doesn't do much. It's basically "Hello, World" for Angular 2.
|
Our first application doesn't do much. It's basically "Hello, World" for Angular.
|
||||||
|
|
||||||
We kept it simple in our first pass: we wrote our first Angular 2 application using the angular CLI
|
We kept it simple in our first pass: we wrote our first Angular application using the angular CLI
|
||||||
and modified our first component. That's about all we'd expect to do for a "Hello, World" app.
|
and modified our first component. That's about all we'd expect to do for a "Hello, World" app.
|
||||||
|
|
||||||
**We have greater ambitions!**
|
**We have greater ambitions!**
|
||||||
:marked
|
:marked
|
||||||
We're about to take the next step and build a small application that
|
We're about to take the next step and build a small application that
|
||||||
demonstrates the great things we can build with Angular 2.
|
demonstrates the great things we can build with Angular.
|
||||||
|
|
||||||
Join us on the [Tour of Heroes Tutorial](./tutorial)!
|
Join us on the [Tour of Heroes Tutorial](./tutorial)!
|
||||||
|
|
||||||
|
@ -159,7 +159,7 @@ a#component-import
|
||||||
consisting of several, related features that we'll use to build our application.
|
consisting of several, related features that we'll use to build our application.
|
||||||
|
|
||||||
When we need something from a module or library, we import it.
|
When we need something from a module or library, we import it.
|
||||||
Here we import the `Component` decorator from the Angular 2 **_core_** library
|
Here we import the `Component` decorator from the Angular **_core_** library
|
||||||
that we'll use as a decorator (`@Component`) to attach metadata to our component class.
|
that we'll use as a decorator (`@Component`) to attach metadata to our component class.
|
||||||
.
|
.
|
||||||
|
|
||||||
|
@ -274,5 +274,5 @@ h3#component-decorator @Component decorator
|
||||||
in the `<body>` tag of the `index.html`, and renders our application's view between those tags.
|
in the `<body>` tag of the `index.html`, and renders our application's view between those tags.
|
||||||
+makeExcerpt('src/index.html', 'body')
|
+makeExcerpt('src/index.html', 'body')
|
||||||
:marked
|
:marked
|
||||||
This is just a taste of Angular 2 develoment. There's much more to learn. Now really is the time to
|
This is just a taste of Angular develoment. There's much more to learn. Now really is the time to
|
||||||
head over to the [Tour of Heroes Tutorial](./tutorial)!
|
head over to the [Tour of Heroes Tutorial](./tutorial)!
|
||||||
|
|
|
@ -332,7 +332,7 @@ block build-app
|
||||||
.l-main-section#make-changes
|
.l-main-section#make-changes
|
||||||
h1 Step !{step++}: Make some live changes
|
h1 Step !{step++}: Make some live changes
|
||||||
:marked
|
:marked
|
||||||
Try changing the message in `app/app.component.ts` to "Hello Angular 2!".
|
Try changing the message in `app/app.component.ts` to "Hello Again Angular!".
|
||||||
block server-watching
|
block server-watching
|
||||||
:marked
|
:marked
|
||||||
The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript,
|
The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
name: angular2_io
|
name: angular_io
|
||||||
description: Angular 2 for Dart Website
|
description: Angular for Dart Website
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
environment:
|
environment:
|
||||||
sdk: '>=1.19.0 <2.0.0'
|
sdk: '>=1.19.0 <2.0.0'
|
||||||
|
|
|
@ -10,7 +10,7 @@ var PUBLIC_PATH = path.resolve(PROJECT_PATH, 'public');
|
||||||
var DOCS_PATH = path.resolve(PUBLIC_PATH, 'docs');
|
var DOCS_PATH = path.resolve(PUBLIC_PATH, 'docs');
|
||||||
var ANGULAR_REPO_PATH = path.resolve(__dirname, '../../../angular-dart');
|
var ANGULAR_REPO_PATH = path.resolve(__dirname, '../../../angular-dart');
|
||||||
// The 'docs' folder is actually named 'doc' for angular2 Dart.
|
// The 'docs' folder is actually named 'doc' for angular2 Dart.
|
||||||
var ANGULAR2_DOCS_PATH = path.resolve(ANGULAR_REPO_PATH, 'doc');
|
var ANGULAR_DOCS_PATH = path.resolve(ANGULAR_REPO_PATH, 'doc');
|
||||||
var NG_IO_PKG_PATH = path.resolve(__dirname, "../api-builder/angular.io-package");
|
var NG_IO_PKG_PATH = path.resolve(__dirname, "../api-builder/angular.io-package");
|
||||||
|
|
||||||
function requireNgIoPkg(_path) { return require(path.resolve(NG_IO_PKG_PATH, _path)); }
|
function requireNgIoPkg(_path) { return require(path.resolve(NG_IO_PKG_PATH, _path)); }
|
||||||
|
@ -45,8 +45,8 @@ module.exports = new Package('dart-api-and-cheatsheet-builder', [basePackage, ta
|
||||||
}
|
}
|
||||||
readFilesProcessor.basePath = DOCS_PATH;
|
readFilesProcessor.basePath = DOCS_PATH;
|
||||||
readFilesProcessor.sourceFiles = [{
|
readFilesProcessor.sourceFiles = [{
|
||||||
basePath: ANGULAR2_DOCS_PATH,
|
basePath: ANGULAR_DOCS_PATH,
|
||||||
include: path.resolve(ANGULAR2_DOCS_PATH, 'cheatsheet/*.md')
|
include: path.resolve(ANGULAR_DOCS_PATH, 'cheatsheet/*.md')
|
||||||
}];
|
}];
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue