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:
Patrice Chalin 2016-11-17 14:10:28 -08:00 committed by Kathy Walrath
parent d853a29fe0
commit f993315931
41 changed files with 78 additions and 79 deletions

View File

@ -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">

View File

@ -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:

View File

@ -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);

View File

@ -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:

View File

@ -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);

View File

@ -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:

View File

@ -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);

View File

@ -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:

View File

@ -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);

View File

@ -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:

View File

@ -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);

View File

@ -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);

View File

@ -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:

View File

@ -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);

View File

@ -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(

View File

@ -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

View File

@ -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() {

View File

@ -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

View File

@ -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

View File

@ -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).

View File

@ -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.

View File

@ -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

View File

@ -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 &amp; Notes h2 <span class="icon-content-copy"></span> API Design Docs &amp; 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>

View File

@ -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

View File

@ -19,7 +19,7 @@ include ../_util-fns
If not, well need to go back to Part 1 and figure out what we missed. If not, well 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

View File

@ -12,7 +12,7 @@ include ../_util-fns
Before we continue with our Tour of Heroes, lets verify we have the following structure. If not, well need to go back and follow the previous chapters. Before we continue with our Tour of Heroes, lets verify we have the following structure. If not, well 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=".").
Lets verify that we have the following structure after all of our good refactoring in this chapter: Lets 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

View File

@ -23,7 +23,7 @@ include ../_util-fns
If not, well need to go back and follow the previous chapters. If not, well 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").
Lets verify that we have the following structure after all of our good refactoring in this chapter: Lets 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

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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/).

View File

@ -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

View File

@ -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.

View File

@ -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

View File

@ -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 arent singletons anymore in Angular 2? Yes and no. Does that mean that services arent 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

View File

@ -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.

View File

@ -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)!

View File

@ -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)!

View File

@ -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,

View File

@ -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'

View File

@ -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')
}]; }];
}) })