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

merge with master and updates to code box directives

This commit is contained in:
Alex Wolfe 2015-05-19 06:33:09 -07:00
parent 799a16c5c5 f6b47800a8
commit b707aed54b
47 changed files with 655 additions and 557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -7,7 +7,7 @@ Angular.io is currently the preview site for Angular 2. This site also includes
## Development Setup ## Development Setup
1. Install [Harp](http://harpjs.com/) 1. Install version 0.15.2 of [Harp](http://harpjs.com/) (The latest version, 0.17, does not work with the site.)
2. cd into root directory `angular.io/` 2. cd into root directory `angular.io/`
3. run `harp server` 3. run `harp server`
4. Open this url in the browser: [http://localhost:9000/](http://localhost:9000/) 4. Open this url in the browser: [http://localhost:9000/](http://localhost:9000/)

6
harp.json
View File

@ -98,7 +98,7 @@
"picture": "/resources/images/bios/jeff-cross.jpg", "picture": "/resources/images/bios/jeff-cross.jpg",
"twitter": "jeffbcross", "twitter": "jeffbcross",
"website": "https://twitter.com/jeffbcross", "website": "https://twitter.com/jeffbcross",
"bio": "Jeff is a member of the Angular core team at Google, focusing on data access and application performance. Jeff's has an extensive background in open source software, marketing, and user experience design. When not in front of a computer, he spends his time doing whatever his kids tell him to do, which usually involves playing music or making gadgets." "bio": "Jeff is a member of the Angular core team at Google, focusing on data access and application performance. Jeff has an extensive background in open source software, marketing, and user experience design. When not in front of a computer, he spends his time doing whatever his kids tell him to do, which usually involves playing music or making gadgets."
}, },
"alexeagle": { "alexeagle": {
@ -153,7 +153,7 @@
"picture": "/resources/images/bios/alex-wolfe.jpg", "picture": "/resources/images/bios/alex-wolfe.jpg",
"twitter": "alexwolfe", "twitter": "alexwolfe",
"website": "https://github.com/alexwolfe", "website": "https://github.com/alexwolfe",
"bio": "Alex is the Head of UX for Firebase at Google and leads the design and development for the website, dashboard, and docs. Alex helps lead the design and development for the Angular.io website. He has been designing and building products for over 15 years and has helped grow over 10 startups in the valley. Prior to joining Firebase, he was the the Head of UX/UI for AdRoll. Alex is an avid tennis player and a former Street Fighter 2 World Champion." "bio": "Alex is the Head of UX for Firebase at Google and leads the design and development for the website, dashboard, and docs. Alex helps lead the design and development for the Angular.io website. He has been designing and building products for over 15 years and has helped grow over 10 startups in the valley. Prior to joining Firebase, he was the Head of UX/UI for AdRoll. Alex is an avid tennis player and a former Street Fighter 2 World Champion."
}, },
"berlinjohnson": { "berlinjohnson": {
@ -192,7 +192,7 @@
"picture": "/resources/images/bios/shahar.jpg", "picture": "/resources/images/bios/shahar.jpg",
"twitter": "shahata", "twitter": "shahata",
"website": "https://plus.google.com/+ShaharTalmi", "website": "https://plus.google.com/+ShaharTalmi",
"bio": "Shahar is a full-stack architect at Wix, leading Wix Angular and client infrastructure. He has been writing software ranging between kernel drivers, massive servers and casual games for the better part of his life. In the last couple of years he's developed a major crush on web applications development and specifically on Angular. Shahar is a big fan of TDD and is doing his best to promote it within the javascript community." "bio": "Shahar is a full-stack architect at Wix, leading Wix Angular and client infrastructure. He has been writing software ranging between kernel drivers, massive servers and casual games for the better part of his life. In the last couple of years he's developed a major crush on web applications development and specifically on Angular. Shahar is a big fan of TDD and is doing his best to promote it within the JavaScript community."
}, },
"lucas": { "lucas": {

6
public/contribute.jade
View File

@ -3,11 +3,13 @@
p We'd love for you to contribute to our source code and to make Angular projects even better. p We'd love for you to contribute to our source code and to make Angular projects even better.
.l-sub-section .l-sub-section
h3 Angular for JavaScript h3 Angular for JavaScript or Dart
p Angular is a development platform for building mobile and desktop web applications. p Angular is a development platform for building mobile and desktop web applications.
a(href="https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular JavaScript a(href="https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular for JS
a(href="https://github.com/angular/angular.dart/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular for DART
.l-sub-section .l-sub-section
h3 Angular Material h3 Angular Material

4
public/docs/dart/latest/guide/displaying-data.jade
View File

@ -55,7 +55,7 @@
description: Dart version of Angular 2 example, Displaying Data description: Dart version of Angular 2 example, Displaying Data
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.21 angular2: 2.0.0-alpha.22
browser: any browser: any
p. p.
@ -392,7 +392,7 @@
description: Dart version of Angular 2 example, Displaying Data description: Dart version of Angular 2 example, Displaying Data
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.21 angular2: 2.0.0-alpha.22
browser: any browser: any
.l-main-section .l-main-section
h2#section-explanations Explanations h2#section-explanations Explanations

4
public/docs/dart/latest/guide/index.jade
View File

@ -1,10 +1,10 @@
number = 1; number = 1;
ul ul.is-plain.l-offset-page-header
for page, slug in public.docs[current.path[1]][current.path[2]].guide._data for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
if slug != '_listtype' && slug != 'index' if slug != '_listtype' && slug != 'index'
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html" url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html"
num = number++ num = number++
li.c8 li
!= partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url }) != partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url })

2
public/docs/dart/latest/guide/setup.jade
View File

@ -31,7 +31,7 @@
description: Dart version of Angular 2 example, Getting Started description: Dart version of Angular 2 example, Getting Started
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.21 angular2: 2.0.0-alpha.22
browser: any browser: any
p. p.
Run <b>pub get</b> to download the packages your app depends on. Run <b>pub get</b> to download the packages your app depends on.

2
public/docs/dart/latest/guide/user-input.jade
View File

@ -212,5 +212,5 @@
description: Dart version of Angular 2 example, Responding to User Input description: Dart version of Angular 2 example, Responding to User Input
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.21 angular2: 2.0.0-alpha.22
browser: any browser: any

14
public/docs/dart/latest/quickstart.jade
View File

@ -30,14 +30,14 @@ p.
p. p.
In <code>pubspec.yaml</code>, add the angular2 and browser packages as dependencies. In <code>pubspec.yaml</code>, add the angular2 and browser packages as dependencies.
Angular 2 is changing rapidly, so specify an exact version: Angular 2 is changing rapidly, so specify an exact version:
<b>2.0.0-alpha.21</b>. <b>2.0.0-alpha.22</b>.
pre.prettyprint.linenums.lang-basic pre.prettyprint.linenums.lang-basic
code. code.
name: hello_world name: hello_world
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.21 angular2: 2.0.0-alpha.22
browser: any browser: any
p. p.
In the same directory, run <code>pub get</code> In the same directory, run <code>pub get</code>
@ -108,7 +108,7 @@ p.
has the tag <b>&lt;my-app></b>. has the tag <b>&lt;my-app></b>.
The Dart code for an Angular component consists of a class The Dart code for an Angular component consists of a class
(the <b>component controller</b>) (the <b>component controller</b>)
that has <code>@Component</code> and <code>@Template</code> annotations. that has <code>@Component</code> and <code>@View</code> annotations.
.l-sub-section .l-sub-section
@ -119,10 +119,10 @@ p.
the HTML tag for the component by specifying the component's CSS selector. the HTML tag for the component by specifying the component's CSS selector.
p. p.
The <code>@Template</code> annotation defines the HTML that The <code>@View</code> annotation defines the HTML that
represents the component. This component uses an inline template, represents the component. This component uses an inline template,
but you can also have an external template. To use an external template, but you can also have an external template. To use an external template,
specify a <code>url</code> property specify a <code>templateUrl</code> property
and give it the path to the HTML file. and give it the path to the HTML file.
pre.prettyprint pre.prettyprint
@ -130,8 +130,8 @@ p.
@Component( @Component(
selector: 'my-app' selector: 'my-app'
) )
@Template( @View(
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
) )
// [PENDING: add line numbers once we can specify where they start] // [PENDING: add line numbers once we can specify where they start]

2
public/docs/js/latest/api/change_detection/ChangeDetection-class.jade
View File

@ -32,7 +32,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
createProtoChangeDetector(name:string, changeControlStrategy:string=DEFAULT) createProtoChangeDetector(name:string, bindingRecords:List, variableBindings:List, directiveRecords:List, changeControlStrategy:string=DEFAULT)
:markdown :markdown

4
public/docs/js/latest/api/change_detection/DynamicChangeDetection-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a> exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L55">angular2/src/change_detection/change_detection.js (line 55)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L59">angular2/src/change_detection/change_detection.js (line 59)</a>
:markdown :markdown
Implements change detection that does not require `eval()`. Implements change detection that does not require `eval()`.
@ -30,7 +30,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT) createProtoChangeDetector(name:string, bindingRecords:List&lt;BindingRecord&gt;, variableBindings:List&lt;string&gt;, directiveRecords:List&lt;DirectiveRecord&gt;, changeControlStrategy:string = DEFAULT)
:markdown :markdown

4
public/docs/js/latest/api/change_detection/JitChangeDetection-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/change_detection.html">angular2/change_detection</a> exported from <a href="/angular2/change_detection.html">angular2/change_detection</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L76">angular2/src/change_detection/change_detection.js (line 76)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/change_detection.js#L81">angular2/src/change_detection/change_detection.js (line 81)</a>
:markdown :markdown
Implements faster change detection, by generating source code. Implements faster change detection, by generating source code.
@ -30,7 +30,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT) createProtoChangeDetector(name:string, bindingRecords:List&lt;BindingRecord&gt;, variableBindings:List&lt;string&gt;, directiveRecords:List&lt;DirectiveRecord&gt;, changeControlStrategy:string = DEFAULT)
:markdown :markdown

2
public/docs/js/latest/api/core/ViewContainerRef-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/core.html">angular2/core</a> exported from <a href="/angular2/core.html">angular2/core</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_container_ref.js#L12">angular2/src/core/compiler/view_container_ref.js (line 12)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/view_container_ref.js#L11">angular2/src/core/compiler/view_container_ref.js (line 11)</a>
:markdown :markdown

2
public/docs/js/latest/api/di_annotations/DependencyAnnotation-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a> exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L110">angular2/src/di/annotations.js (line 110)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations_impl.js#L110">angular2/src/di/annotations_impl.js (line 110)</a>
:markdown :markdown
`DependencyAnnotation` is used by the framework to extend DI. `DependencyAnnotation` is used by the framework to extend DI.

2
public/docs/js/latest/api/di_annotations/Inject-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a> exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L13">angular2/src/di/annotations.js (line 13)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations_impl.js#L13">angular2/src/di/annotations_impl.js (line 13)</a>
:markdown :markdown
A parameter annotation that specifies a dependency. A parameter annotation that specifies a dependency.

2
public/docs/js/latest/api/di_annotations/InjectLazy-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a> exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L55">angular2/src/di/annotations.js (line 55)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations_impl.js#L55">angular2/src/di/annotations_impl.js (line 55)</a>
:markdown :markdown
A parameter annotation that creates a synchronous lazy dependency. A parameter annotation that creates a synchronous lazy dependency.

2
public/docs/js/latest/api/di_annotations/InjectPromise-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a> exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L34">angular2/src/di/annotations.js (line 34)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations_impl.js#L34">angular2/src/di/annotations_impl.js (line 34)</a>
:markdown :markdown
A parameter annotation that specifies a `Promise` of a dependency. A parameter annotation that specifies a `Promise` of a dependency.

2
public/docs/js/latest/api/di_annotations/Injectable-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a> exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L134">angular2/src/di/annotations.js (line 134)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations_impl.js#L134">angular2/src/di/annotations_impl.js (line 134)</a>
:markdown :markdown
A marker annotation that marks a class as available to `Injector` for creation. Used by tooling for A marker annotation that marks a class as available to `Injector` for creation. Used by tooling for

2
public/docs/js/latest/api/di_annotations/Optional-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a> exported from <a href="/angular2/di_annotations.html">angular2/di_annotations</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations.js#L77">angular2/src/di/annotations.js (line 77)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/di/annotations_impl.js#L77">angular2/src/di/annotations_impl.js (line 77)</a>
:markdown :markdown
A parameter annotation that marks a dependency as optional. <a href='../di/Injector-class.html'><code>Injector</code></a> provides `null` if the dependency is not A parameter annotation that marks a dependency as optional. <a href='../di/Injector-class.html'><code>Injector</code></a> provides `null` if the dependency is not

19
public/docs/js/latest/api/index.jade
View File

@ -1,19 +1,18 @@
.l-main-section .callout.is-helpful.l-offset-page-header
header Developer Preview
.callout.is-helpful p.
header Developer Preview The Angular 2.0 API is currently in active development and not production ready.
p. This page showcases a preview of proposed methods to help further the discussion
The Angular 2.0 API is currently in active development and not production ready. in the development community. If you're building a production app today, please
This page showcases a preview of proposed methods to help further the discussion <a href="https://docs.angularjs.org/api">use Angular 1.X</a>.
in the development community. If you're building a production app today, please
<a href="https://docs.angularjs.org/api">use Angular 1.X</a>.
ul ul.is-plain.l-offset-page-header
for page, slug in public.docs[current.path[1]][current.path[2]].api for page, slug in public.docs[current.path[1]][current.path[2]].api
if slug != 'index' && slug != '_contents' && slug != '_data' if slug != 'index' && slug != '_contents' && slug != '_data'
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug
title = public.docs[current.path[1]][current.path[2]][current.path[3]][slug]._data["index"]["title"] title = public.docs[current.path[1]][current.path[2]][current.path[3]][slug]._data["index"]["title"]
li.c8 li
!= partial("../../../../_includes/_hover-card", {name: title, url: url }) != partial("../../../../_includes/_hover-card", {name: title, url: url })

14
public/docs/js/latest/api/pipes/AsyncPipeFactory-class.jade
View File

@ -8,6 +8,20 @@ p.location-badge.
.l-main-section .l-main-section
h2 Members h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor()
:markdown
.l-sub-section .l-sub-section
h3 create h3 create

2
public/docs/js/latest/api/pipes/CollectionChangeRecord-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/pipes.html">angular2/pipes</a> exported from <a href="/angular2/pipes.html">angular2/pipes</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/iterable_changes.js#L509">angular2/src/change_detection/pipes/iterable_changes.js (line 509)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/iterable_changes.js#L515">angular2/src/change_detection/pipes/iterable_changes.js (line 515)</a>
:markdown :markdown

2
public/docs/js/latest/api/pipes/IterableChanges-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/pipes.html">angular2/pipes</a> exported from <a href="/angular2/pipes.html">angular2/pipes</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/iterable_changes.js#L31">angular2/src/change_detection/pipes/iterable_changes.js (line 31)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/iterable_changes.js#L37">angular2/src/change_detection/pipes/iterable_changes.js (line 37)</a>
:markdown :markdown

2
public/docs/js/latest/api/pipes/KVChangeRecord-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/pipes.html">angular2/pipes</a> exported from <a href="/angular2/pipes.html">angular2/pipes</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L360">angular2/src/change_detection/pipes/keyvalue_changes.js (line 360)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L365">angular2/src/change_detection/pipes/keyvalue_changes.js (line 365)</a>
:markdown :markdown

2
public/docs/js/latest/api/pipes/KeyValueChanges-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/pipes.html">angular2/pipes</a> exported from <a href="/angular2/pipes.html">angular2/pipes</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L21">angular2/src/change_detection/pipes/keyvalue_changes.js (line 21)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/keyvalue_changes.js#L26">angular2/src/change_detection/pipes/keyvalue_changes.js (line 26)</a>
:markdown :markdown

14
public/docs/js/latest/api/pipes/KeyValueChangesFactory-class.jade
View File

@ -7,6 +7,20 @@ p.location-badge.
.l-main-section .l-main-section
h2 Members h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor()
:markdown
.l-sub-section .l-sub-section
h3 create h3 create

2
public/docs/js/latest/api/pipes/NullPipe-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/pipes.html">angular2/pipes</a> exported from <a href="/angular2/pipes.html">angular2/pipes</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/null_pipe.js#L19">angular2/src/change_detection/pipes/null_pipe.js (line 19)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/null_pipe.js#L24">angular2/src/change_detection/pipes/null_pipe.js (line 24)</a>
:markdown :markdown

14
public/docs/js/latest/api/pipes/NullPipeFactory-class.jade
View File

@ -7,6 +7,20 @@ p.location-badge.
.l-main-section .l-main-section
h2 Members h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor()
:markdown
.l-sub-section .l-sub-section
h3 create h3 create

2
public/docs/js/latest/api/pipes/Pipe-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/pipes.html">angular2/pipes</a> exported from <a href="/angular2/pipes.html">angular2/pipes</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.js#L52">angular2/src/change_detection/pipes/pipe.js (line 52)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.js#L54">angular2/src/change_detection/pipes/pipe.js (line 54)</a>
:markdown :markdown
An interface for extending the list of pipes known to Angular. An interface for extending the list of pipes known to Angular.

53
public/docs/js/latest/api/pipes/WrappedValue-class.jade Normal file
View File

@ -0,0 +1,53 @@
p.location-badge.
exported from <a href="/angular2/pipes.html">angular2/pipes</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/change_detection/pipes/pipe.js#L9">angular2/src/change_detection/pipes/pipe.js (line 9)</a>
:markdown
Indicates that the result of a <a href='Pipe-class.html'><code>Pipe</code></a> transformation has changed even though the reference has not changed.
The wrapped value will be unwrapped by change detection, and the unwrapped value will be stored.
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(wrapped:any)
:markdown
.l-sub-section
h3 wrap
pre.prettyprint
code.
wrap(value:any)
:markdown
.l-sub-section
h3 wrapped
:markdown

4
public/docs/js/latest/api/pipes/_data.json
View File

@ -52,6 +52,10 @@
"title" : "NullPipe Class" "title" : "NullPipe Class"
}, },
"WrappedValue-class" : {
"title" : "WrappedValue Class"
},
"Pipe-class" : { "Pipe-class" : {
"title" : "Pipe Class" "title" : "Pipe Class"
} }

39
public/docs/js/latest/api/router/Router-class.jade
View File

@ -1,10 +1,10 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/router.html">angular2/router</a> exported from <a href="/angular2/router.html">angular2/router</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/router/router.js#L18">angular2/src/router/router.js (line 18)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/router/router.js#L19">angular2/src/router/router.js (line 19)</a>
:markdown :markdown
## Router # Router
The router is responsible for mapping URLs to components. The router is responsible for mapping URLs to components.
You can see the state of the router by inspecting the read-only field `router.navigating`. You can see the state of the router by inspecting the read-only field `router.navigating`.
@ -18,7 +18,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(registry:RouteRegistry, pipeline:Pipeline, parent:Router = null, name = &#39;/&#39;) constructor(registry:RouteRegistry, pipeline:Pipeline, location:Location, parent:Router, hostComponent)
:markdown :markdown
@ -64,16 +64,25 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
config(path:string, component, alias:string=null) config(config:any)
:markdown :markdown
Update the routing configuration and trigger a navigation. Update the routing configuration and trigger a navigation.
### Usage # Usage
``` ```
router.config('/', SomeCmp); router.config({ 'path': '/', 'component': IndexCmp});
```
Or:
```
router.config([
{ 'path': '/', 'component': IndexComp },
{ 'path': '/user/:id', 'component': UserComp },
]);
``` ```
@ -97,13 +106,9 @@ p.location-badge.
.l-sub-section .l-sub-section
h3 getRoot h3 hostComponent
pre.prettyprint
code.
getRoot()
:markdown :markdown
@ -124,18 +129,6 @@ p.location-badge.
.l-sub-section
h3 name
:markdown
.l-sub-section .l-sub-section
h3 navigate h3 navigate

4
public/docs/js/latest/api/router/_data.json
View File

@ -4,6 +4,10 @@
"intro" : "Maps application URLs into application states, to support deep-linking and navigation." "intro" : "Maps application URLs into application states, to support deep-linking and navigation."
}, },
"routerInjectables-var" : {
"title" : "routerInjectables Var"
},
"Router-class" : { "Router-class" : {
"title" : "Router Class" "title" : "Router Class"
}, },

9
public/docs/js/latest/api/router/routerInjectables-var.jade Normal file
View File

@ -0,0 +1,9 @@
.l-main-section
h2 routerInjectables <span class="type">variable</span>
p.location-badge.
exported from <a href="/angular2/router.html">angular2/router</a>
:markdown

4
public/docs/js/latest/api/view/Compiler-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a> exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/compiler.js#L47">angular2/src/core/compiler/compiler.js (line 47)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/compiler.js#L48">angular2/src/core/compiler/compiler.js (line 48)</a>
:markdown :markdown
@ -13,7 +13,7 @@ p.location-badge.
pre.prettyprint pre.prettyprint
code. code.
constructor(reader: DirectiveMetadataReader, cache:CompilerCache, templateResolver: TemplateResolver, componentUrlMapper: ComponentUrlMapper, urlResolver: UrlResolver, renderer: renderApi.Renderer, protoViewFactory: ProtoViewFactory) constructor(reader: DirectiveMetadataReader, cache:CompilerCache, templateResolver: TemplateResolver, componentUrlMapper: ComponentUrlMapper, urlResolver: UrlResolver, render: renderApi.RenderCompiler, protoViewFactory: ProtoViewFactory)
:markdown :markdown

2
public/docs/js/latest/api/view/ComponentRef-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a> exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L10">angular2/src/core/compiler/dynamic_component_loader.js (line 10)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L11">angular2/src/core/compiler/dynamic_component_loader.js (line 11)</a>
:markdown :markdown

2
public/docs/js/latest/api/view/DynamicComponentLoader-class.jade
View File

@ -1,7 +1,7 @@
p.location-badge. p.location-badge.
exported from <a href="/angular2/view.html">angular2/view</a> exported from <a href="/angular2/view.html">angular2/view</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L37">angular2/src/core/compiler/dynamic_component_loader.js (line 37)</a> defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/compiler/dynamic_component_loader.js#L38">angular2/src/core/compiler/dynamic_component_loader.js (line 38)</a>
:markdown :markdown
Service for dynamically loading a Component into an arbitrary position in the internal Angular Service for dynamically loading a Component into an arbitrary position in the internal Angular

351
public/docs/js/latest/guide/displaying-data.jade
View File

@ -1,8 +1,3 @@
.statement
h4 Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview'> ES5 Example</a>.
.l-main-section .l-main-section
h2#section-displaying-controller-properties Displaying controller properties h2#section-displaying-controller-properties Displaying controller properties
@ -15,6 +10,14 @@
figure.image-display figure.image-display
img(src='displaying-data-example1.png') img(src='displaying-data-example1.png')
.callout.is-helpful
header Typescript vs ES5
p.
Although we work through the examples in TypeScript, you can also use
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
<code>.ts</code>.
.l-main-section .l-main-section
h2#section-create-an-entry-point Create an entry point h2#section-create-an-entry-point Create an entry point
@ -34,25 +37,9 @@
| The simple method for binding text into templates is through interpolation where you put the name of a property | The simple method for binding text into templates is through interpolation where you put the name of a property
| inside <strong>{{ }}</strong>. | inside <strong>{{ }}</strong>.
p To see this working, create another file, <code>show-properties.js</code>, and add the following: p To see this working, create another file, <code>show-properties.ts</code>, and add the following:
code-tabs code-tabs
code-pane(language="javascript" name="ES5" format="linenums" escape="html").
// ES5
function DisplayComponent() {
this.myName = "Alice";
}
DisplayComponent.annotations = [
new angular.Component({
selector: "display"
}),
new angular.View({
template:
<p>My name: {{ myName }}</p>,
directives: [angular.For, angular.If]
})
];
code-pane(language="javascript" name="TypeScript" format="linenums" escape="html"). code-pane(language="javascript" name="TypeScript" format="linenums" escape="html").
// TypeScript // TypeScript
import {Component, View, bootstrap, For} from 'angular2/angular2'; import {Component, View, bootstrap, For} from 'angular2/angular2';
@ -61,19 +48,38 @@
selector: 'display' selector: 'display'
}) })
@View({ @View({
template: `&lt;p&gt;My name: {{ myName }}&lt;/p&gt;`, template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt
`,
directives: [For] directives: [For]
}) })
class DisplayComponent { class DisplayComponent {
myName: string; myName: string;
todos: Array&lt;string&gt; names: Array&lt;string&gt;;
constructor() { constructor() {
this.myName = "Alice"; this.myName = "Alice";
} }
} }
code-pane(language="javascript" name="ES5" format="linenums" escape="html").
// ES5
function DisplayComponent() {
this.myName = "Alice";
}
DisplayComponent.annotations = [
new angular.ComponentAnnotation({
selector: "display"
}),
new angular.ViewAnnotation({
template:
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
directives: [angular.For, angular.If]
})
];
p. p.
You've just defined a component that encompases a view and controller for the app. The view You've just defined a component that encompasses a view and controller for the app. The view
defines a template: defines a template:
code-example(language="html" escape="html"). code-example(language="html" escape="html").
@ -123,34 +129,23 @@
p Moving up from a single property, create an array to display as a list. p Moving up from a single property, create an array to display as a list.
code-tabs code-tabs
code-pane(language="javascript" name="ES5" format="linenums" escape="html").
//ES5
function DisplayComponent() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
code-pane(language="javascript" name="TypeScript" format="linenums" escape="html"). code-pane(language="javascript" name="TypeScript" format="linenums" escape="html").
//Typescript //Typescript
constructor() { constructor() {
this.myName = "Alice"; this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
} }
code-pane(language="javascript" name="Javascript (ES5)" format="linenums" escape="html").
//ES5
function DisplayComponent() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
p. p.
You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements
with one for each item in the array. with one for each item in the array.
code-tabs code-tabs
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
template:
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39;,
code-pane(language="javascript" name="TypeScript" format="linenums"). code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript //Typescript
template: ` template: `
@ -162,20 +157,31 @@
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
`, `,
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
template:
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39;,
p. p.
To make this work, you'll also need to add the <code>angular.For</code> directive used by the template so To make this work, you'll also need to add the <code>For</code> directive used by the template so
that Angular knows to include it: that Angular knows to include it:
code-tabs code-tabs
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
directives: [angular.For]
code-pane(language="javascript" name="TypeScript" format="linenums"). code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript //Typescript
import {Component, View, bootstrap, For} from import {Component, View, bootstrap, For} from
... ...
directives: [For] directives: [For]
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
directives: [angular.For]
p Reload and you've got your list of friends! p Reload and you've got your list of friends!
p. p.
@ -183,12 +189,11 @@
list. Delete one and Angular deletes the &lt;li&gt;. Reorder items and Angular makes the corresponding reorder of list. Delete one and Angular deletes the &lt;li&gt;. Reorder items and Angular makes the corresponding reorder of
the DOM list. the DOM list.
p Let's look at the few lines that do the work again: p Let's look at the few lines that do the work again:
pre.prettyprint.lang-html code-example(language="html" format="linenums").
code. //HTML
//HTML &lt;li *for=&quot;#name of names&quot;&gt;
&lt;li *for=&quot;#name of names&quot;&gt; {{ name }}
{{ name }} &lt;/li&gt;
&lt;/li&gt;
p The way to read this is: p The way to read this is:
ul ul
li. li.
@ -205,67 +210,80 @@
proper form. We should separate the concerns by having another class serve the role of model and inject it into proper form. We should separate the concerns by having another class serve the role of model and inject it into
the controller. the controller.
p Make a <code>FriendsService</code> class to provide the model with the list of friends. p Make a <code>FriendsService</code> class to provide the model with the list of friends.
pre.prettyprint.lang-javascript
code. code-example(language="javascript" format="linenums").
function FriendsService() { class FriendsService {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; names: Array&lt;string&gt;;
} constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}
p. p.
Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of
names in DisplayComponent to the names provided by the service you passed in. names in DisplayComponent to the names provided by the service you passed in.
pre.prettyprint.lang-javascript
code. code-example(language="javascript" format="linenums").
function DisplayComponent(friends) { class DisplayComponent {
this.myName = "Alice"; names: Array&lt;string&gt;;
this.names = friends.names; constructor(friendsService: FriendsService) {
} this.names = friendsService.names;
}
}
p And then make FriendsService available to dependency injection p And then make FriendsService available to dependency injection
pre.prettyprint.lang-javascript code-example(language="javascript" format="linenums").
code. @Component({
DisplayComponent.annotations = [ ...
new angular.Component({ injectables: [FriendsService]
selector: "display", })
injectables: [FriendsService] ...
}), class DisplayComponent {...
...
DisplayComponent.parameters = [[FriendsService]];
.callout.is-helpful .callout.is-helpful
header ES5 Note header ES5 Note
p. p.
The dependency injection syntax here is using the low-level API and is...well...not very nice. We're The dependency injection syntax here is using the low-level API and is...well...not very nice. We're
working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon. working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon.
.code-box code-tabs
pre.prettyprint.lang-javascript(data-name="es5") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//ES5 class FriendsService {
function FriendsService() { names: Array&lt;string&gt;;
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}
...
class DisplayComponent {
names: Array&lt;string&gt;;
constructor(friendsService: FriendsService) {
this.names = friendsService.names;
}
} }
function DisplayComponent(friends) { code-pane(language="javascript" name="ES5" format="linenums").
this.myName = "Alice"; //ES5
this.names = friends.names; function FriendsService() {
} this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
DisplayComponent.annotations = [ }
new angular.Component({ function DisplayComponent(friends) {
selector: "display", this.myName = "Alice";
injectables: [FriendsService] this.names = friends.names;
}), }
new angular.View({ DisplayComponent.annotations = [
template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;', new angular.ComponentAnnotation({
directives: [angular.For, angular.If] selector: "display",
}) injectables: [FriendsService]
]; }),
DisplayComponent.parameters = [[FriendsService]]; new angular.ViewAnnotation({
document.addEventListener("DOMContentLoaded", function() { template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;',
angular.bootstrap(DisplayComponent); directives: [angular.For, angular.If]
}); })
pre.prettyprint.lang-typescript(data-name="typescript") ];
code. DisplayComponent.parameters = [[FriendsService]];
//TypeScript document.addEventListener("DOMContentLoaded", function() {
import {Component, View, bootstrap, For} from angular.bootstrap(DisplayComponent);
... });
directives: [For]
.l-main-section .l-main-section
h2#Conditionally-displaying-data-with-If Conditionally displaying data with If h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
p. p.
@ -275,72 +293,69 @@
pre.prettyprint.lang-html pre.prettyprint.lang-html
code. code.
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt; &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
p You'll also need to add the If directive so Angular knows to include it. p You'll also need to add the <code>If</code> directive so Angular knows to include it.
.code-box code-tabs
pre.prettyprint.lang-javascript(data-name="es5") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //Typescript
//ES5 import {Component, View, bootstrap, For, If} from
directives: [angular.For, angular.If] ...
pre.prettyprint.lang-typescript(data-name="typescript") directives: [For, If]
code. code-pane(language="javascript" name="ES5" format="linenums").
//Typescript //ES5
import {Component, View, bootstrap, For, If} from directives: [angular.For, angular.If]
...
directives: [For, If]
p. p.
As there are currently 5 items it the list, you'll see the message congratulating you on your many friends. As there are currently 5 items it the list, you'll see the message congratulating you on your many friends.
Remove two items from the list, reload your browser, and see that the message no longer displays. Remove two items from the list, reload your browser, and see that the message no longer displays.
.code-box
pre.prettyprint.lang-javascript(data-name="es5") code-tabs
code. code-pane(language="javascript" name="TypeScript" format="linenums").
//ES5 //TypeScript
function DisplayComponent() { import {Component, View, bootstrap, For, If} from 'angular2/angular2';
this.myName = "Alice"; @Component({
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; selector: 'display'
} })
DisplayComponent.annotations = [ @View({
new angular.Component({ template: `
selector: "display" &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
}), &lt;p&gt;Friends:&lt;/p&gt;
new angular.View({ &lt;ul&gt;
template: &lt;li *for=&quot;#name of names&quot;&gt;
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; + {{ name }}
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; + &lt;/li&gt;
&#39;&lt;ul&gt;&#39; + &lt;/ul&gt;
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; + &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
&#39;{{ name }}&#39; + `,
&#39;&lt;/li&gt;&#39; + directives: [For, If]
&#39;&lt;/ul&gt;&#39; + })
&#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;, class DisplayComponent {
directives: [angular.For, angular.If] myName: string;
}) todos: Array&lt;string&gt;
]; constructor() {
pre.prettyprint.lang-typescript(data-name="typescript") this.myName = "Alice";
code. this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
//TypeScript }
import {Component, View, bootstrap, For, If} from 'angular2/angular2'; }
@Component({ code-pane(language="javascript" name="ES5" format="linenums").
selector: 'display' //ES5
}) function DisplayComponent() {
@View({ this.myName = "Alice";
template: ` this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
&lt;p&gt;My name: {{ myName }}&lt;/p&gt; }
&lt;p&gt;Friends:&lt;/p&gt; DisplayComponent.annotations = [
&lt;ul&gt; new angular.ComponentAnnotation({
&lt;li *for=&quot;#name of names&quot;&gt; selector: "display"
{{ name }} }),
&lt;/li&gt; new angular.ViewAnnotation({
&lt;/ul&gt; template:
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt; &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
`, &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
directives: [For, If] &#39;&lt;ul&gt;&#39; +
}) &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
class DisplayComponent { &#39;{{ name }}&#39; +
myName: string; &#39;&lt;/li&gt;&#39; +
todos: Array<string>; &#39;&lt;/ul&gt;&#39; +
constructor() { &#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;,
this.myName = "Alice"; directives: [angular.For, angular.If]
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; })
} ];
}

4
public/docs/js/latest/guide/index.jade
View File

@ -1,10 +1,10 @@
number = 1; number = 1;
ul ul.is-plain.l-offset-page-header
for page, slug in public.docs[current.path[1]][current.path[2]].guide._data for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
if slug != '_listtype' && slug != 'index' if slug != '_listtype' && slug != 'index'
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html" url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html"
num = number++ num = number++
li.c8 li
!= partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url }) != partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url })

128
public/docs/js/latest/guide/making-components.jade
View File

@ -1,8 +1,3 @@
.statement
h4 Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/lt7vPiJYwkHDKaTHGCUC?p=preview')>TypeScript Example</a> or <a href='http://plnkr.co/edit/CqquuEyUw2LgwY0IrXUZ?p=preview'> ES5 Example</a>.
.l-main-section .l-main-section
h2#section-its-all-a-tree It's all a tree h2#section-its-all-a-tree It's all a tree
@ -15,80 +10,77 @@
Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body, you can create a parent Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body, you can create a parent
component that uses a <code>&lt;child&gt;</code> component like so: component that uses a <code>&lt;child&gt;</code> component like so:
.code-box code-tabs
pre.prettyprint.linenums.lang-javascript(data-name="es5") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//ES5 @Component({
function ParentComponent() { selector: 'parent'
})
@View({
template: `
&lt;h1&gt;{{ message }}&lt;/h1&gt;
&lt;child&gt;&lt;/child&gt;
`,
directives: [ChildComponent]
})
class ParentComponent {
message: string;
constructor() {
this.message = "I'm the parent"; this.message = "I'm the parent";
} }
ParentComponent.annotations = [ }
new angular.Component({ code-pane(language="javascript" name="ES5" format="linenums").
selector: "parent" //ES5
}), function ParentComponent() {
new angular.View({ this.message = "I'm the parent";
template: }
'&lt;h1&gt;{{ message }}&lt;/h1&gt;' + ParentComponent.annotations = [
'&lt;child&gt;&lt;/child&gt;', new angular.ComponentAnnotation({
directives: [ChildComponent] selector: "parent"
}) }),
]; new angular.ViewAnnotation({
template:
pre.prettyprint.linenums.lang-typescript(data-name="typescript") '&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
code. '&lt;child&gt;&lt;/child&gt;',
//TypeScript
@Component({
selector: 'parent'
})
@View({
template: `
&lt;h1&gt;{{ message }}&lt;/h1&gt;
&lt;child&gt;&lt;/child&gt;
`,
directives: [ChildComponent] directives: [ChildComponent]
}) })
class ParentComponent { ];
message: string;
constructor() {
this.message = "I'm the parent";
}
}
p You then just need to write the <code>ChildComponent</code> class to make it work: p You then just need to write the <code>ChildComponent</code> class to make it work:
.code-box code-tabs
pre.prettyprint.linenums.lang-javascript(data-name="es5") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//ES5 @Component({
function ChildComponent() { selector: 'child'
})
@View({
template: `
&lt;p&gt; {{ message }} &lt;/p&gt;
`
})
class ChildComponent {
message: string;
constructor() {
this.message = "I'm the child"; this.message = "I'm the child";
} }
ChildComponent.annotations = [ }
new angular.Component({ code-pane(language="javascript" name="ES5" format="linenums").
selector: "child" //ES5
}), function ChildComponent() {
new angular.View({ this.message = "I'm the child";
template: '&lt;p&gt; {{ message }} &lt;/p&gt;' }
}) ChildComponent.annotations = [
]; new angular.ComponentAnnotation({
selector: "child"
}),
new angular.ViewAnnotation({
template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
})
];
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
code.
//TypeScript
@Component({
selector: 'child'
})
@View({
template: `
&lt;p&gt; {{ message }} &lt;/p&gt;
`
})
class ChildComponent {
constructor() {
this.message = "I'm the child";
}
}
p. p.
Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to

167
public/docs/js/latest/guide/setup.jade
View File

@ -1,11 +1,6 @@
.statement
h4 Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview'> ES5 Example</a>.
.l-main-section .l-main-section
h2#section-install-or-plunker Install Angular or Use Plunker h2#section-install-or-plunker Install Angular
p There are four steps to create any Angular app: p There are four steps to create any Angular app:
ol ol
li Create an entry point HTML file where users will start li Create an entry point HTML file where users will start
@ -14,24 +9,27 @@
li Bootstrap Angular li Bootstrap Angular
p. p.
You can edit and test out your apps either though serving local files through a web server or through a service like You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.
Plunker.
.callout.is-helpful
header Plunker is the fastest setup
p.
Plunker is a free online text editor. You can use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> for Angular 2 to get going without any setup.
p. p.
For Plunker, just use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> to get going. If you're serving local files, edit and save them and start a web server that serves files in that directory. If you have Python installed, you can run a basic HTTP server from the root of your code directory with: When you're serving local files, edit and save them and start a web server that serves files in that directory. If you have Python installed, you can run a basic HTTP server from the root of your code directory with:
pre.prettyprint.lang-bash pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000 code python -m SimpleHTTPServer 8000
.callout.is-helpful
header Typescript vs ES5
p.
Although we work through the examples in TypeScript, you can also use
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
<code>.ts</code>.
.l-main-section .l-main-section
h2#section-create-an-entry-point Create an entry point h2#section-create-an-entry-point Create an entry point
p. p.
Create an <code>index.html</code> file and add the Angular library tags and a <code>main.js</code> file where Create an <code>index.html</code> file and add the Angular library tags and a <code>main.ts</code> file where
you'll build your first component. you'll build your first component.
p. p.
@ -39,44 +37,36 @@
application. application.
p. p.
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version. System requires mapping the code file paths to understand what to be load. The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
.code-box code-tabs
pre.prettyprint.lang-html(data-name="es5") code-pane(language="html" name="TypeScript" format="linenums").
code. &lt;!DOCTYPE html&gt;
&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body&gt;
&lt;/body&gt; &lt;my-app&gt;&lt;/my-app&gt;
&lt;/html&gt; &lt;script&gt;
System.import(&#39;main&#39;);
pre.prettyprint.lang-html(data-name="typescript") &lt;/script&gt;
code. &lt;/body&gt;
&lt;!DOCTYPE html&gt; &lt;/html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;
System.config({
paths: {
&#39;*&#39;: &#39;*.js&#39;,
&#39;angular2/*&#39;: &#39;angular2/*&#39;,
}
});
System.import(&#39;main&#39;);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
code-pane(language="html" name="ES5" format="linenums").
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.22/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt;
&lt;/html&gt;
.callout.is-helpful .callout.is-helpful
header Don't use code.angularjs.org in a live app header Don't use code.angularjs.org in a live app
@ -88,20 +78,32 @@
h2#section-set-up-the-starting-component Set up the starting component h2#section-set-up-the-starting-component Set up the starting component
p. p.
In <code>main.js</code>, create a class called <code>AppComponent</code>, configure it to bind to the In <code>main.ts</code>, create a class called <code>AppComponent</code>, configure it to bind to the
<code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick <code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
it all off like this: it all off like this:
.code-box code-tabs
pre.prettyprint.lang-javascript(data-name="es5") code-pane(language="javascript" name="TypeScript" format="linenums").
code. import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
})
class AppComponent {
}
bootstrap(AppComponent);
code-pane(language="javascript" name="ES5" format="linenums").
function AppComponent() {} function AppComponent() {}
AppComponent.annotations = [ AppComponent.annotations = [
new angular.Component({ new angular.ComponentAnnotation({
selector: 'my-app' selector: 'my-app'
}), }),
new angular.View({ new angular.ViewAnnotation({
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;' template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
}) })
]; ];
@ -110,28 +112,20 @@
angular.bootstrap(AppComponent); angular.bootstrap(AppComponent);
}); });
pre.prettyprint.lang-typescript(data-name="typescript")
code.
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
})
class AppComponent {
}
bootstrap(AppComponent);
.callout.is-helpful
header Annotations vs Decorators
p.
If you are transpiling using a tool that translates the <code>@</code> symbols to
annotations (for example Traceur), you will need to import the annotation versions of
Component and View. That can be easily achieved using
<code>import {ComponentAnnotation as Component, ViewAnnotation as View}</code>.
.l-main-section .l-main-section
h2#section-run-it Run it! h2#section-run-it Run it!
p. p.
Open <code>index.html</code> through your web server or hit the <strong>Run</strong> button if using Plunker and Open <code>index.html</code> through your web server and you should see:
you should see:
div(align='center') div(align='center')
img(src='setup-example1.png') img(src='setup-example1.png')
@ -180,19 +174,14 @@
p. p.
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not. In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
.code-box code-tabs
pre.prettyprint.lang-typescript(data-name="es5") code-pane(language="javascript" name="TypeScript" format="linenums" ).
code. import {Component, View, bootstrap} from 'angular2/angular2';
// window.angular is available because the script file attaches the angular property to the window ...
document.addEventListener('DOMContentLoaded', function() { // bootstrap is available for use because it was imported from angular core
angular.bootstrap(AppComponent); bootstrap(AppComponent);
}); code-pane(language="javascript" name="ES5" format="linenums").
pre.prettyprint.lang-typescript(data-name="typescript") // window.angular is available because the script file attaches the angular property to the window
code. document.addEventListener('DOMContentLoaded', function() {
import {Component, View, bootstrap} from 'angular2/angular2'; angular.bootstrap(AppComponent);
... });
// bootstrap is available for use because it was imported from angular core
bootstrap(AppComponent);

240
public/docs/js/latest/guide/user-input.jade
View File

@ -1,8 +1,3 @@
.statement
h4 Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview'> ES5 Example</a>.
.l-main-section .l-main-section
h2#section-responding-to-user-input Responding to user input with event syntax h2#section-responding-to-user-input Responding to user input with event syntax
@ -11,19 +6,17 @@
p. p.
For a particular control like an input you can have it call methods on your controller on keyup event like so: For a particular control like an input you can have it call methods on your controller on keyup event like so:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input (keyup)="myControllerMethod()"&gt;
&lt;input (keyup)="myControllerMethod()"&gt;
h3#local-variables Local variables h3#local-variables Local variables
p. p.
As in previous examples, you can make element references available to other parts of the template as a local As in previous examples, you can make element references available to other parts of the template as a local
variable using the <code>#var</code> syntax. With this and events, we can do the old "update text as you type" example: variable using the <code>#var</code> syntax. With this and events, we can do the old "update text as you type" example:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input #myname (keyup)&gt;
&lt;input #myname (keyup)&gt; &lt;p&gt;{{myname.value}}&lt;/p&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
p.text-body(ng-non-bindable). p.text-body(ng-non-bindable).
The <code>#myname</code> creates a local variable in the template that we'll refer to below in the The <code>#myname</code> creates a local variable in the template that we'll refer to below in the
@ -42,29 +35,26 @@
list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items
on the array when called. on the array when called.
.code-box code-tabs
pre.prettyprint.linenums.lang-javascript(data-name="es5") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//ES5 class TodoList {
function TodoList() { todos: Array&lt;string&gt;;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
} }
addTodo(todo: string) {
pre.prettyprint.linenums.lang-typescript(data-name="typescript") this.todos.push(todo);
code.
//TypeScript
class TodoList {
todos: Array&lt;string&gt;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
} }
}
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
.callout.is-helpful .callout.is-helpful
header Production Best Practice header Production Best Practice
@ -78,13 +68,12 @@
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos array and set Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos array and set
its text to the value. its text to the value.
pre.prettyprint.linenums.lang-html code-example(language="html" format="linenums").
code. &lt;ul&gt;
&lt;ul&gt; &lt;li *for=&quot;#todo of todos&quot;&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt; {{ todo }}
{{ todo }} &lt;/li&gt;
&lt;/li&gt; &lt;/ul&gt;
&lt;/ul&gt;
.l-main-section .l-main-section
h2#section-add-todos-to-the-list Add todos to the list via button click h2#section-add-todos-to-the-list Add todos to the list via button click
@ -92,109 +81,104 @@
Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here. variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
pre.prettyprint.lang-html code-example(language="html" format="linenums").
code. &lt;input #todotext&gt;
&lt;input #todotext&gt;
p. p.
Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>, you can get the value with it the value. Since you created a reference called <code>todotext</code>, you can get the value with
<code>todotext.value.</code> <code>todotext.value.</code>
pre.prettyprint.lang-html code-example(language="html" format="linenums").
code. &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text. p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.
pre.prettyprint.lang-javascript code-example(language="javascript" format="linenums").
code. doneTyping($event) {
doneTyping($event) { if($event.which === 13) {
if($event.which === 13) { this.addTodo($event.target.value);
this.addTodo($event.target.value); $event.target.value = null;
$event.target.value = null;
}
} }
}
.l-main-section .l-main-section
h2#section-final-code Final Code h2#section-final-code Final Code
.code-box code-tabs
pre.prettyprint.lang-javascript(data-name="es5") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//ES5 import {Component, View, bootstrap, For, If} from 'angular2/angular2';
function TodoList() {
@Component({
selector: 'todo-list'
})
@View({
template: `
&lt;ul&gt;
&lt;li *for="#todo of todos"&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
`,
directives: [For, If]
})
class TodoList {
todos: Array&lt;string&gt;;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
} }
TodoList.annotations = [ addTodo(todo: string) {
new angular.Component({ this.todos.push(todo);
selector: "todo-list"
}),
new angular.View({
template:
'&lt;ul&gt;' +
'&lt;li *for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({
selector: 'todo-list'
})
@View({
template: `
&lt;ul&gt;
&lt;li *for="#todo of todos"&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
`,
directives: [For, If]
})
class TodoList {
todos: Array<string>;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
} }
bootstrap(TodoList); doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
bootstrap(TodoList);
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
TodoList.annotations = [
new angular.ComponentAnnotation({
selector: "todo-list"
}),
new angular.ViewAnnotation({
template:
'&lt;ul&gt;' +
'&lt;li *for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});

43
public/docs/js/latest/quickstart.jade
View File

@ -1,9 +1,8 @@
.callout.is-helpful .callout.is-helpful
header Angular is in developer preview header Angular is in developer preview
p. p.
This quickstart does not This quickstart does not reflect the final development process for writing apps with Angular.
reflect the final development process for Angular. The following setup is for those who The following setup is for those who want to try out Angular while it is in developer preview.
want to try out Angular while it is in developer preview.
// STEP 1 - Create a project ########################## // STEP 1 - Create a project ##########################
.l-main-section .l-main-section
@ -15,24 +14,26 @@
p. p.
The goal of this quickstart is to write a component in TypeScript that prints a string. The goal of this quickstart is to write a component in TypeScript that prints a string.
To get started, clone the TypeScript quickstart repository: We assume you have already installed <a href="https://docs.npmjs.com/getting-started/installing-node">Node and npm</a>.
pre.prettyprint
$ git clone https://github.com/angular/ts-quickstart.git
$ cd ts-quickstart
p. p.
For the sake of this quickstart we recommend using the To get started, create a new empty project directory. All the following commands should be run
<a href="https://github.com/angular/ts-quickstart"> <code>quickstart</code> GitHub repository</a>. from this directory.
This repository provides a faster start than building from <code>npm</code>.
This repository includes the Angular distribution and type definitions for TypeScript.
p. p.
Create two files, <code>index.html</code> and To get the benefits of TypeScript, we want to have the type definitions available for the compiler and the editor.
<code>app.ts</code>, both at the root of the project: TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>.
To fetch one of the type definitions to the local directory, we use the <a href="https://www.npmjs.com/package/tsd">tsd package manager</a>.
pre.prettyprint pre.prettyprint
$ touch app.ts index.html $ npm install -g tsd
$ tsd query angular2 --action install
p.
Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project:
pre.prettyprint
$ touch app.ts index.html
// STEP 2 - Start the TypeScript compiler ########################## // STEP 2 - Start the TypeScript compiler ##########################
.l-main-section .l-main-section
@ -43,14 +44,10 @@
your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript
compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files
are loaded, or configure your editor or IDE to do it. are loaded, or configure your editor or IDE to do it.
p.
The repository includes a file <code>tsconfig.json</code>.
Many tools &mdash; including the TypeScript compiler &mdash;
know to read this file so we don't need to configure them or add command-line options.
pre.prettyprint pre.prettyprint
$ npm install -g typescript@^1.5.0-beta $ npm install -g typescript@^1.5.0-beta
$ tsc --watch $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
// STEP 3 - Import Angular ########################## // STEP 3 - Import Angular ##########################
.l-main-section .l-main-section
@ -188,7 +185,7 @@
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt; &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt; &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="bundle/angular2.dev.js"&gt;&lt;/script&gt; &lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body&gt;
@ -224,11 +221,11 @@
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt; &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt; &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt; &lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
&lt;script src="bundle/angular2.dev.js"&gt;&lt;/script&gt; &lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
p. p.
Add the following module-loading code before the <code>&lt;my-app&gt;</code> tag: Add the following module-loading code:
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.

2
public/index.jade
View File

@ -14,7 +14,7 @@
pre.prettyprint.linenums.is-showcase pre.prettyprint.linenums.is-showcase
code. code.
@Component({selector: 'my-app'}) @Component({selector: 'my-app'})
@Template({inline: '&lt;h1&gt;Hi {{ name }}&lt;/h1&gt;'}) @View({template: '&lt;h1&gt;Hi {{ name }}&lt;/h1&gt;'})
// Component controller // Component controller
class MyAppComponent { class MyAppComponent {

5
public/resources/css/base/_type.scss
View File

@ -105,6 +105,11 @@ table th,
font-weight: 400; font-weight: 400;
opacity: .87; opacity: .87;
line-height: 28px; line-height: 28px;
&.is-plain {
list-style-type: none;
padding: 0px;
}
} }
.l-sub-section p, .l-sub-section p,

10
public/resources/css/layout/_layout.scss
View File

@ -67,6 +67,16 @@
} }
} }
.l-offset-page-header {
margin-left: $unit * 6 !important;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
margin: 0px !important;
}
}
.l-content { .l-content {
padding: ($unit * 8) ($unit * 12); padding: ($unit * 8) ($unit * 12);

4
public/resources/js/directives/code-pane.js
View File

@ -15,8 +15,8 @@ angularIO.directive('codePane', function() {
compile: function(tElement, tAttrs) { compile: function(tElement, tAttrs) {
var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html(); var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
var template = '<pre class="prettyprint ' + tAttrs.format + ' lang-' + tAttrs.language + '" ng-show="selected">' + var template = '<pre class="prettyprint ' + tAttrs.format + ' lang-' + tAttrs.language + '" ng-show="selected" >' +
'<code ng-non-bindable>' + html + '</code>' + '<code class="animated fadeIn" ng-non-bindable>' + html + '</code>' +
'</pre>'; '</pre>';