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
Kathy Walrath
parent
d853a29fe0
commit
f993315931
|
|
@ -3,7 +3,7 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>Angular 2 Lifecycle Hooks</title>
|
||||
<title>Angular Lifecycle Hooks</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# #docregion
|
||||
name: angular2_quickstart
|
||||
name: angular_quickstart
|
||||
description: QuickStart
|
||||
version: 0.0.1
|
||||
environment:
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
|
||||
import 'package:angular2_quickstart/app_component.dart';
|
||||
import 'package:angular_quickstart/app_component.dart';
|
||||
|
||||
void main() {
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# #docregion
|
||||
name: angular2_tour_of_heroes
|
||||
name: angular_tour_of_heroes
|
||||
description: Tour of Heroes
|
||||
version: 0.0.1
|
||||
environment:
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion pt1
|
||||
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() {
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# #docregion
|
||||
name: angular2_tour_of_heroes
|
||||
name: angular_tour_of_heroes
|
||||
description: Tour of Heroes
|
||||
version: 0.0.1
|
||||
environment:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
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() {
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# #docregion
|
||||
name: angular2_tour_of_heroes
|
||||
name: angular_tour_of_heroes
|
||||
description: Tour of Heroes
|
||||
version: 0.0.1
|
||||
environment:
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion pt1
|
||||
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() {
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# #docregion
|
||||
name: angular2_tour_of_heroes
|
||||
name: angular_tour_of_heroes
|
||||
description: Tour of Heroes
|
||||
version: 0.0.1
|
||||
environment:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
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() {
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
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() {
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# #docregion
|
||||
name: angular2_tour_of_heroes
|
||||
name: angular_tour_of_heroes
|
||||
description: Tour of Heroes
|
||||
version: 0.0.1
|
||||
environment:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
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() {
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
import 'package:angular2/core.dart';
|
||||
import 'package:angular2/router.dart';
|
||||
|
||||
import 'package:angular2_tour_of_heroes/heroes_component.dart';
|
||||
import 'package:angular2_tour_of_heroes/hero_service.dart';
|
||||
import 'package:angular2_tour_of_heroes/dashboard_component.dart';
|
||||
import 'package:angular_tour_of_heroes/heroes_component.dart';
|
||||
import 'package:angular_tour_of_heroes/hero_service.dart';
|
||||
import 'package:angular_tour_of_heroes/dashboard_component.dart';
|
||||
// #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
|
||||
|
||||
@Component(
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# #docregion , additions
|
||||
name: angular2_tour_of_heroes
|
||||
name: angular_tour_of_heroes
|
||||
# #enddocregion additions
|
||||
description: Tour of Heroes
|
||||
version: 0.0.1
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
// #docregion , v1, v2
|
||||
import 'package:angular2/core.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
|
||||
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';
|
||||
|
||||
void main() {
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ block routing-component-defn
|
|||
block append snake-case-defn
|
||||
:marked
|
||||
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
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ block includes
|
|||
|
||||
block angular-parts
|
||||
: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.
|
||||
|
||||
block modules-in-dart
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ block ctor-syntax
|
|||
initializing properties simultaneously.
|
||||
|
||||
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
|
||||
//- identified as targets for static code generation. Generally this is achieved
|
||||
//- by marking the class as @Injectable (though there are other mechanisms).
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ block demos-list
|
|||
block http-providers
|
||||
:marked
|
||||
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
|
||||
identifiers used in DI have to be collected by the Angular transformer
|
||||
so that the libraries containing these identifiers can be transformed.
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ block build-app
|
|||
transformer wiki page</a>.
|
||||
|
||||
.l-sub-section#performance
|
||||
h3 Performance, the transformer, and Angular 2 libraries
|
||||
h3 Performance, the transformer, and Angular libraries
|
||||
p.
|
||||
When an app imports <code>bootstrap.dart</code>,
|
||||
it also gets <code>dart:mirrors</code>,
|
||||
|
|
@ -164,7 +164,7 @@ block server-watching
|
|||
|
||||
block project-file-structure
|
||||
.filetree
|
||||
.file angular2_quickstart
|
||||
.file angular_quickstart
|
||||
.children
|
||||
.file lib
|
||||
.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
|
||||
h2 Victor Savkin's Blog Posts
|
||||
ul
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
.l-main-section
|
||||
h2 <span class="icon-play-circle-outline"></span> Videos
|
||||
|
||||
h4 Intro Vidoes
|
||||
h4 Intro Videos
|
||||
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=4C4bmDOV5hk">Angular 2 Forms</a> by David East
|
||||
|
|
@ -33,7 +33,6 @@
|
|||
.l-main-section
|
||||
h2 <span class="icon-content-copy"></span> API Design Docs & Notes
|
||||
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=0BxgtL8yFJbacUnUxc3l5aTZrbVk&authuser=0">API Design Docs</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?
|
||||
-->
|
||||
|
||||
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:
|
||||
|
||||
.filetree
|
||||
.file angular2_tour_of_heroes
|
||||
.file angular_tour_of_heroes
|
||||
.children
|
||||
.file lib
|
||||
.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.
|
||||
|
||||
.filetree
|
||||
.file angular2_tour_of_heroes
|
||||
.file angular_tour_of_heroes
|
||||
.children
|
||||
.file lib
|
||||
.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.
|
||||
|
||||
.filetree
|
||||
.file angular2_tour_of_heroes
|
||||
.file angular_tour_of_heroes
|
||||
.children
|
||||
.file lib
|
||||
.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:
|
||||
|
||||
.filetree
|
||||
.file angular2_tour_of_heroes
|
||||
.file angular_tour_of_heroes
|
||||
.children
|
||||
.file lib
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ include ../_util-fns
|
|||
If not, we’ll need to go back and follow the previous chapters.
|
||||
|
||||
.filetree
|
||||
.file angular2_tour_of_heroes
|
||||
.file angular_tour_of_heroes
|
||||
.children
|
||||
.file lib
|
||||
.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:
|
||||
|
||||
.filetree
|
||||
.file angular2_tour_of_heroes
|
||||
.file angular_tour_of_heroes
|
||||
.children
|
||||
.file lib
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ block includes
|
|||
|
||||
block intro-file-tree
|
||||
.filetree
|
||||
.file angular2_tour_of_heroes
|
||||
.file angular_tour_of_heroes
|
||||
.children
|
||||
.file lib
|
||||
.children
|
||||
|
|
@ -142,7 +142,7 @@ block router-link-active
|
|||
|
||||
block file-tree-end
|
||||
.filetree
|
||||
.file angular2_tour_of_heroes
|
||||
.file angular_tour_of_heroes
|
||||
.children
|
||||
.file lib
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ block observable-transformers
|
|||
|
||||
block filetree
|
||||
.filetree
|
||||
.file angular2_tour_of_heroes
|
||||
.file angular_tour_of_heroes
|
||||
.children
|
||||
.file lib
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -10,4 +10,4 @@
|
|||
|
||||
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>'
|
||||
|
||||
:marked
|
||||
Angular 2 has a vocabulary of its own.
|
||||
Most Angular 2 terms are everyday English words
|
||||
Angular has a vocabulary of its own.
|
||||
Most Angular terms are everyday English words
|
||||
with a specific meaning within the Angular system.
|
||||
|
||||
We have gathered here the most prominent terms
|
||||
|
|
@ -342,7 +342,7 @@ 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 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
|
||||
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)"
|
||||
to ES5 JavaScript.
|
||||
|
||||
Angular 2 developers may choose to write in ES5 directly.
|
||||
Angular developers may choose to write in ES5 directly.
|
||||
|
||||
:marked
|
||||
## ES2015
|
||||
|
|
@ -741,7 +741,7 @@ a#snake-case
|
|||
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 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).
|
||||
|
||||
Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ block includes
|
|||
- var _at_angular = '@angular'
|
||||
|
||||
: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.
|
||||
|
||||
block angular-parts
|
||||
|
|
@ -27,7 +27,7 @@ figure
|
|||
img(src="/resources/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700")
|
||||
|
||||
: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. [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.
|
||||
|
||||
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';
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ block includes
|
|||
include ../_util-fns
|
||||
|
||||
: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
|
||||
to our Angular applications directly.
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ block includes
|
|||
:marked
|
||||
## 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,
|
||||
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.
|
||||
|
||||
: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.
|
||||
|
||||
#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`.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
|
@ -166,7 +166,7 @@ figure.image-display
|
|||
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.
|
||||
|
||||
//- ## Advanced Dependency Injection in Angular 2
|
||||
//- ## Advanced Dependency Injection in Angular
|
||||
//- Restrict Dependency Lookups
|
||||
//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
|
||||
//- .l-main-section
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ block includes
|
|||
|
||||
:marked
|
||||
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.
|
||||
|
||||
.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);
|
||||
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
|
||||
:marked
|
||||
|
|
@ -103,7 +103,7 @@ figure.image-display
|
|||
|
||||
.l-sub-section
|
||||
: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
|
||||
## Chaining pipes
|
||||
|
|
@ -336,7 +336,7 @@ block pure-change
|
|||
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='.')
|
||||
: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_
|
||||
display updates as we enter new heroes even when we mutate the `heroes` #{_array}.
|
||||
|
||||
|
|
@ -403,7 +403,7 @@ figure.image-display
|
|||
.callout.is-helpful
|
||||
header Debugging with the json pipe
|
||||
: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
|
||||
inspect an object for future binding.
|
||||
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@ block includes
|
|||
|
||||
:marked
|
||||
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
|
||||
that also can be the foundation for real world applications.
|
||||
|
||||
.callout.is-helpful
|
||||
header Don't want #{_Lang}?
|
||||
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.
|
||||
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.
|
||||
|
||||
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}.
|
||||
|
||||
+makeExcerpt('app/app.component.ts', 'import')
|
||||
|
|
@ -556,7 +556,7 @@ block build-app
|
|||
:marked
|
||||
## Make some changes
|
||||
|
||||
Try changing the message to "Hello Angular 2!".
|
||||
Try changing the message to "Hello Again Angular!".
|
||||
block server-watching
|
||||
:marked
|
||||
The TypeScript compiler and `lite-server` are watching.
|
||||
|
|
@ -613,7 +613,7 @@ block project-files
|
|||
.l-main-section
|
||||
:marked
|
||||
## 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,
|
||||
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.
|
||||
:marked
|
||||
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)!
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ include _util-fns
|
|||
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 2
|
||||
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 2 project.
|
||||
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.
|
||||
|
|
@ -96,7 +96,7 @@ h2#first-component Step 4: Edit our first Angular component
|
|||
We'll leave that step as an exercise.
|
||||
|
||||
: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=".")
|
||||
|
||||
|
|
@ -116,15 +116,15 @@ figure.image-display
|
|||
.l-main-section
|
||||
:marked
|
||||
## 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.
|
||||
|
||||
**We have greater ambitions!**
|
||||
:marked
|
||||
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)!
|
||||
|
||||
|
|
@ -159,7 +159,7 @@ a#component-import
|
|||
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.
|
||||
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.
|
||||
.
|
||||
|
||||
|
|
@ -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.
|
||||
+makeExcerpt('src/index.html', 'body')
|
||||
: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)!
|
||||
|
|
|
|||
|
|
@ -332,7 +332,7 @@ block build-app
|
|||
.l-main-section#make-changes
|
||||
h1 Step !{step++}: Make some live changes
|
||||
: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
|
||||
:marked
|
||||
The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
name: angular2_io
|
||||
description: Angular 2 for Dart Website
|
||||
name: angular_io
|
||||
description: Angular for Dart Website
|
||||
version: 0.0.1
|
||||
environment:
|
||||
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 ANGULAR_REPO_PATH = path.resolve(__dirname, '../../../angular-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");
|
||||
|
||||
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.sourceFiles = [{
|
||||
basePath: ANGULAR2_DOCS_PATH,
|
||||
include: path.resolve(ANGULAR2_DOCS_PATH, 'cheatsheet/*.md')
|
||||
basePath: ANGULAR_DOCS_PATH,
|
||||
include: path.resolve(ANGULAR_DOCS_PATH, 'cheatsheet/*.md')
|
||||
}];
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue