merge with master and updates to code box directives
This commit is contained in:
Alex Wolfe
commit
b707aed54b
|
|
@ -7,7 +7,7 @@ Angular.io is currently the preview site for Angular 2. This site also includes
|
|||
|
||||
|
||||
## 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/`
|
||||
3. run `harp server`
|
||||
4. Open this url in the browser: [http://localhost:9000/](http://localhost:9000/)
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
"picture": "/resources/images/bios/jeff-cross.jpg",
|
||||
"twitter": "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": {
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
"picture": "/resources/images/bios/alex-wolfe.jpg",
|
||||
"twitter": "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": {
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
"picture": "/resources/images/bios/shahar.jpg",
|
||||
"twitter": "shahata",
|
||||
"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": {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@
|
|||
p We'd love for you to contribute to our source code and to make Angular projects even better.
|
||||
|
||||
.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.
|
||||
|
||||
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
|
||||
h3 Angular Material
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
description: Dart version of Angular 2 example, Displaying Data
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.21
|
||||
angular2: 2.0.0-alpha.22
|
||||
browser: any
|
||||
|
||||
p.
|
||||
|
|
@ -392,7 +392,7 @@
|
|||
description: Dart version of Angular 2 example, Displaying Data
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.21
|
||||
angular2: 2.0.0-alpha.22
|
||||
browser: any
|
||||
.l-main-section
|
||||
h2#section-explanations Explanations
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
number = 1;
|
||||
ul
|
||||
ul.is-plain.l-offset-page-header
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
|
||||
|
||||
if slug != '_listtype' && slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html"
|
||||
num = number++
|
||||
|
||||
li.c8
|
||||
li
|
||||
!= partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url })
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
description: Dart version of Angular 2 example, Getting Started
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.21
|
||||
angular2: 2.0.0-alpha.22
|
||||
browser: any
|
||||
p.
|
||||
Run <b>pub get</b> to download the packages your app depends on.
|
||||
|
|
|
|||
|
|
@ -212,5 +212,5 @@
|
|||
description: Dart version of Angular 2 example, Responding to User Input
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.21
|
||||
angular2: 2.0.0-alpha.22
|
||||
browser: any
|
||||
|
|
|
|||
|
|
@ -30,14 +30,14 @@ p.
|
|||
p.
|
||||
In <code>pubspec.yaml</code>, add the angular2 and browser packages as dependencies.
|
||||
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
|
||||
code.
|
||||
name: hello_world
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.21
|
||||
angular2: 2.0.0-alpha.22
|
||||
browser: any
|
||||
p.
|
||||
In the same directory, run <code>pub get</code>
|
||||
|
|
@ -108,7 +108,7 @@ p.
|
|||
has the tag <b><my-app></b>.
|
||||
The Dart code for an Angular component consists of a class
|
||||
(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
|
||||
|
|
@ -119,10 +119,10 @@ p.
|
|||
the HTML tag for the component by specifying the component's CSS selector.
|
||||
|
||||
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,
|
||||
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.
|
||||
|
||||
pre.prettyprint
|
||||
|
|
@ -130,8 +130,8 @@ p.
|
|||
@Component(
|
||||
selector: 'my-app'
|
||||
)
|
||||
@Template(
|
||||
inline: '<h1>Hello {{ name }}</h1>'
|
||||
@View(
|
||||
template: '<h1>Hello {{ name }}</h1>'
|
||||
)
|
||||
|
||||
// [PENDING: add line numbers once we can specify where they start]
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
createProtoChangeDetector(name:string, changeControlStrategy:string=DEFAULT)
|
||||
createProtoChangeDetector(name:string, bindingRecords:List, variableBindings:List, directiveRecords:List, changeControlStrategy:string=DEFAULT)
|
||||
|
||||
:markdown
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
Implements change detection that does not require `eval()`.
|
||||
|
|
@ -30,7 +30,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT)
|
||||
createProtoChangeDetector(name:string, bindingRecords:List<BindingRecord>, variableBindings:List<string>, directiveRecords:List<DirectiveRecord>, changeControlStrategy:string = DEFAULT)
|
||||
|
||||
:markdown
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
Implements faster change detection, by generating source code.
|
||||
|
|
@ -30,7 +30,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT)
|
||||
createProtoChangeDetector(name:string, bindingRecords:List<BindingRecord>, variableBindings:List<string>, directiveRecords:List<DirectiveRecord>, changeControlStrategy:string = DEFAULT)
|
||||
|
||||
:markdown
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
`DependencyAnnotation` is used by the framework to extend DI.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
A parameter annotation that specifies a dependency.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
A parameter annotation that creates a synchronous lazy dependency.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
A parameter annotation that specifies a `Promise` of a dependency.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
A marker annotation that marks a class as available to `Injector` for creation. Used by tooling for
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
.l-main-section
|
||||
.callout.is-helpful.l-offset-page-header
|
||||
header Developer Preview
|
||||
|
||||
.callout.is-helpful
|
||||
header Developer Preview
|
||||
p.
|
||||
The Angular 2.0 API is currently in active development and not production ready.
|
||||
This page showcases a preview of proposed methods to help further the discussion
|
||||
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>.
|
||||
p.
|
||||
The Angular 2.0 API is currently in active development and not production ready.
|
||||
This page showcases a preview of proposed methods to help further the discussion
|
||||
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
|
||||
if slug != 'index' && slug != '_contents' && slug != '_data'
|
||||
|
||||
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"]
|
||||
|
||||
li.c8
|
||||
li
|
||||
!= partial("../../../../_includes/_hover-card", {name: title, url: url })
|
||||
|
|
|
|||
|
|
@ -8,6 +8,20 @@ p.location-badge.
|
|||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 create
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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/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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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/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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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/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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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/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
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,20 @@ p.location-badge.
|
|||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 create
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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/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
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,20 @@ p.location-badge.
|
|||
|
||||
.l-main-section
|
||||
h2 Members
|
||||
.l-sub-section
|
||||
h3 constructor
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 create
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
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#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
|
||||
An interface for extending the list of pipes known to Angular.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -52,6 +52,10 @@
|
|||
"title" : "NullPipe Class"
|
||||
},
|
||||
|
||||
"WrappedValue-class" : {
|
||||
"title" : "WrappedValue Class"
|
||||
},
|
||||
|
||||
"Pipe-class" : {
|
||||
"title" : "Pipe Class"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
## Router
|
||||
# Router
|
||||
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`.
|
||||
|
|
@ -18,7 +18,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
constructor(registry:RouteRegistry, pipeline:Pipeline, parent:Router = null, name = '/')
|
||||
constructor(registry:RouteRegistry, pipeline:Pipeline, location:Location, parent:Router, hostComponent)
|
||||
|
||||
:markdown
|
||||
|
||||
|
|
@ -64,16 +64,25 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
code.
|
||||
config(path:string, component, alias:string=null)
|
||||
config(config:any)
|
||||
|
||||
:markdown
|
||||
|
||||
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
|
||||
h3 getRoot
|
||||
h3 hostComponent
|
||||
|
||||
|
||||
pre.prettyprint
|
||||
code.
|
||||
getRoot()
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
|
@ -124,18 +129,6 @@ p.location-badge.
|
|||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 name
|
||||
|
||||
|
||||
:markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-sub-section
|
||||
h3 navigate
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@
|
|||
"intro" : "Maps application URLs into application states, to support deep-linking and navigation."
|
||||
},
|
||||
|
||||
"routerInjectables-var" : {
|
||||
"title" : "routerInjectables Var"
|
||||
},
|
||||
|
||||
"Router-class" : {
|
||||
"title" : "Router Class"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ p.location-badge.
|
|||
|
||||
pre.prettyprint
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
p.location-badge.
|
||||
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
|
||||
Service for dynamically loading a Component into an arbitrary position in the internal Angular
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
h2#section-displaying-controller-properties Displaying controller properties
|
||||
|
|
@ -15,6 +10,14 @@
|
|||
figure.image-display
|
||||
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
|
||||
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
|
||||
| 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-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").
|
||||
// TypeScript
|
||||
import {Component, View, bootstrap, For} from 'angular2/angular2';
|
||||
|
|
@ -61,19 +48,38 @@
|
|||
selector: 'display'
|
||||
})
|
||||
@View({
|
||||
template: `<p>My name: {{ myName }}</p>`,
|
||||
template: `
|
||||
<p>My name: {{ myName }}</p>
|
||||
`,
|
||||
directives: [For]
|
||||
})
|
||||
class DisplayComponent {
|
||||
myName: string;
|
||||
todos: Array<string>
|
||||
names: Array<string>;
|
||||
|
||||
constructor() {
|
||||
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:
|
||||
'<p>My name: {{ myName }}</p>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
|
||||
|
||||
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:
|
||||
|
||||
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.
|
||||
|
||||
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").
|
||||
//Typescript
|
||||
constructor() {
|
||||
this.myName = "Alice";
|
||||
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.
|
||||
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.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>' +
|
||||
'<p>Friends:</p>' +
|
||||
'<ul>' +
|
||||
'<li *for="#name of names">' +
|
||||
'{{ name }}' +
|
||||
'</li>' +
|
||||
'</ul>',
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//Typescript
|
||||
template: `
|
||||
|
|
@ -162,20 +157,31 @@
|
|||
</li>
|
||||
</ul>
|
||||
`,
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>' +
|
||||
'<p>Friends:</p>' +
|
||||
'<ul>' +
|
||||
'<li *for="#name of names">' +
|
||||
'{{ name }}' +
|
||||
'</li>' +
|
||||
'</ul>',
|
||||
|
||||
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:
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
directives: [angular.For]
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//Typescript
|
||||
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.
|
||||
|
|
@ -183,12 +189,11 @@
|
|||
list. Delete one and Angular deletes the <li>. Reorder items and Angular makes the corresponding reorder of
|
||||
the DOM list.
|
||||
p Let's look at the few lines that do the work again:
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
//HTML
|
||||
<li *for="#name of names">
|
||||
{{ name }}
|
||||
</li>
|
||||
code-example(language="html" format="linenums").
|
||||
//HTML
|
||||
<li *for="#name of names">
|
||||
{{ name }}
|
||||
</li>
|
||||
p The way to read this is:
|
||||
ul
|
||||
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
|
||||
the controller.
|
||||
p Make a <code>FriendsService</code> class to provide the model with the list of friends.
|
||||
pre.prettyprint.lang-javascript
|
||||
code.
|
||||
function FriendsService() {
|
||||
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
|
||||
code-example(language="javascript" format="linenums").
|
||||
class FriendsService {
|
||||
names: Array<string>;
|
||||
constructor() {
|
||||
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
}
|
||||
p.
|
||||
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.
|
||||
pre.prettyprint.lang-javascript
|
||||
code.
|
||||
function DisplayComponent(friends) {
|
||||
this.myName = "Alice";
|
||||
this.names = friends.names;
|
||||
}
|
||||
|
||||
code-example(language="javascript" format="linenums").
|
||||
class DisplayComponent {
|
||||
names: Array<string>;
|
||||
constructor(friendsService: FriendsService) {
|
||||
this.names = friendsService.names;
|
||||
}
|
||||
}
|
||||
|
||||
p And then make FriendsService available to dependency injection
|
||||
pre.prettyprint.lang-javascript
|
||||
code.
|
||||
DisplayComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "display",
|
||||
injectables: [FriendsService]
|
||||
}),
|
||||
...
|
||||
DisplayComponent.parameters = [[FriendsService]];
|
||||
code-example(language="javascript" format="linenums").
|
||||
@Component({
|
||||
...
|
||||
injectables: [FriendsService]
|
||||
})
|
||||
...
|
||||
class DisplayComponent {...
|
||||
.callout.is-helpful
|
||||
header ES5 Note
|
||||
p.
|
||||
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.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function FriendsService() {
|
||||
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//TypeScript
|
||||
class FriendsService {
|
||||
names: Array<string>;
|
||||
constructor() {
|
||||
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
}
|
||||
...
|
||||
class DisplayComponent {
|
||||
names: Array<string>;
|
||||
|
||||
constructor(friendsService: FriendsService) {
|
||||
this.names = friendsService.names;
|
||||
}
|
||||
}
|
||||
function DisplayComponent(friends) {
|
||||
this.myName = "Alice";
|
||||
this.names = friends.names;
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "display",
|
||||
injectables: [FriendsService]
|
||||
}),
|
||||
new angular.View({
|
||||
template: '{{ myName }} <ul> <li *for="#name of names">{{ name }}</li> </ul>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
DisplayComponent.parameters = [[FriendsService]];
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
angular.bootstrap(DisplayComponent);
|
||||
});
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
import {Component, View, bootstrap, For} from
|
||||
...
|
||||
directives: [For]
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
function FriendsService() {
|
||||
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
function DisplayComponent(friends) {
|
||||
this.myName = "Alice";
|
||||
this.names = friends.names;
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "display",
|
||||
injectables: [FriendsService]
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template: '{{ myName }} <ul> <li *for="#name of names">{{ name }}</li> </ul>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
DisplayComponent.parameters = [[FriendsService]];
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
angular.bootstrap(DisplayComponent);
|
||||
});
|
||||
.l-main-section
|
||||
h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
|
||||
p.
|
||||
|
|
@ -275,72 +293,69 @@
|
|||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<p *if="names.length > 3">You have many friends!</p>
|
||||
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
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
directives: [angular.For, angular.If]
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//Typescript
|
||||
import {Component, View, bootstrap, For, If} from
|
||||
...
|
||||
directives: [For, If]
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//Typescript
|
||||
import {Component, View, bootstrap, For, If} from
|
||||
...
|
||||
directives: [For, If]
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
directives: [angular.For, angular.If]
|
||||
p.
|
||||
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.
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "display"
|
||||
}),
|
||||
new angular.View({
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>' +
|
||||
'<p>Friends:</p>' +
|
||||
'<ul>' +
|
||||
'<li *for="#name of names">' +
|
||||
'{{ name }}' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<p *if="names.length > 3">You have many friends!</p>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
|
||||
@Component({
|
||||
selector: 'display'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<p>My name: {{ myName }}</p>
|
||||
<p>Friends:</p>
|
||||
<ul>
|
||||
<li *for="#name of names">
|
||||
{{ name }}
|
||||
</li>
|
||||
</ul>
|
||||
<p *if="names.length > 3">You have many friends!</p>
|
||||
`,
|
||||
directives: [For, If]
|
||||
})
|
||||
class DisplayComponent {
|
||||
myName: string;
|
||||
todos: Array<string>;
|
||||
constructor() {
|
||||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
}
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//TypeScript
|
||||
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
|
||||
@Component({
|
||||
selector: 'display'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<p>My name: {{ myName }}</p>
|
||||
<p>Friends:</p>
|
||||
<ul>
|
||||
<li *for="#name of names">
|
||||
{{ name }}
|
||||
</li>
|
||||
</ul>
|
||||
<p *if="names.length > 3">You have many friends!</p>
|
||||
`,
|
||||
directives: [For, If]
|
||||
})
|
||||
class DisplayComponent {
|
||||
myName: string;
|
||||
todos: Array<string>
|
||||
constructor() {
|
||||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
}
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "display"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>' +
|
||||
'<p>Friends:</p>' +
|
||||
'<ul>' +
|
||||
'<li *for="#name of names">' +
|
||||
'{{ name }}' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<p *if="names.length > 3">You have many friends!</p>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
number = 1;
|
||||
ul
|
||||
ul.is-plain.l-offset-page-header
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
|
||||
|
||||
if slug != '_listtype' && slug != 'index'
|
||||
url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html"
|
||||
num = number++
|
||||
|
||||
li.c8
|
||||
li
|
||||
!= partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url })
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
h2#section-its-all-a-tree It's all a tree
|
||||
|
|
@ -15,80 +10,77 @@
|
|||
Given a bootstrapping template with a <code><parent></code> tag in the body, you can create a parent
|
||||
component that uses a <code><child></code> component like so:
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function ParentComponent() {
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//TypeScript
|
||||
@Component({
|
||||
selector: 'parent'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<h1>{{ message }}</h1>
|
||||
<child></child>
|
||||
`,
|
||||
directives: [ChildComponent]
|
||||
})
|
||||
class ParentComponent {
|
||||
message: string;
|
||||
|
||||
constructor() {
|
||||
this.message = "I'm the parent";
|
||||
}
|
||||
ParentComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "parent"
|
||||
}),
|
||||
new angular.View({
|
||||
template:
|
||||
'<h1>{{ message }}</h1>' +
|
||||
'<child></child>',
|
||||
directives: [ChildComponent]
|
||||
})
|
||||
];
|
||||
|
||||
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
@Component({
|
||||
selector: 'parent'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<h1>{{ message }}</h1>
|
||||
<child></child>
|
||||
`,
|
||||
}
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
function ParentComponent() {
|
||||
this.message = "I'm the parent";
|
||||
}
|
||||
ParentComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "parent"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template:
|
||||
'<h1>{{ message }}</h1>' +
|
||||
'<child></child>',
|
||||
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:
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function ChildComponent() {
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//TypeScript
|
||||
@Component({
|
||||
selector: 'child'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<p> {{ message }} </p>
|
||||
`
|
||||
})
|
||||
class ChildComponent {
|
||||
message: string;
|
||||
constructor() {
|
||||
this.message = "I'm the child";
|
||||
}
|
||||
ChildComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: "child"
|
||||
}),
|
||||
new angular.View({
|
||||
template: '<p> {{ message }} </p>'
|
||||
})
|
||||
];
|
||||
}
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
function ChildComponent() {
|
||||
this.message = "I'm the child";
|
||||
}
|
||||
ChildComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "child"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template: '<p> {{ message }} </p>'
|
||||
})
|
||||
];
|
||||
|
||||
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
@Component({
|
||||
selector: 'child'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<p> {{ message }} </p>
|
||||
`
|
||||
})
|
||||
class ChildComponent {
|
||||
constructor() {
|
||||
this.message = "I'm the child";
|
||||
}
|
||||
}
|
||||
|
||||
p.
|
||||
Notice that in addition to using the <code><child></code> element in the parent template, you also need to
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
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:
|
||||
ol
|
||||
li Create an entry point HTML file where users will start
|
||||
|
|
@ -14,24 +9,27 @@
|
|||
li Bootstrap Angular
|
||||
|
||||
p.
|
||||
You can edit and test out your apps either though serving local files through a web server or through a service like
|
||||
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.
|
||||
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.
|
||||
|
||||
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
|
||||
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
|
||||
h2#section-create-an-entry-point Create an entry point
|
||||
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.
|
||||
|
||||
p.
|
||||
|
|
@ -39,44 +37,36 @@
|
|||
application.
|
||||
|
||||
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
|
||||
pre.prettyprint.lang-html(data-name="es5")
|
||||
code.
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
pre.prettyprint.lang-html(data-name="typescript")
|
||||
code.
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.config({
|
||||
paths: {
|
||||
'*': '*.js',
|
||||
'angular2/*': 'angular2/*',
|
||||
}
|
||||
});
|
||||
System.import('main');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
code-tabs
|
||||
code-pane(language="html" name="TypeScript" format="linenums").
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.import('main');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
code-pane(language="html" name="ES5" format="linenums").
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
.callout.is-helpful
|
||||
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
|
||||
|
||||
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><my-app></code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
|
||||
it all off like this:
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1>My first Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
|
||||
bootstrap(AppComponent);
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
function AppComponent() {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new angular.Component({
|
||||
new angular.ComponentAnnotation({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new angular.View({
|
||||
new angular.ViewAnnotation({
|
||||
template: '<h1>My first Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
|
|
@ -110,28 +112,20 @@
|
|||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1>My first Angular 2 App</h1>'
|
||||
})
|
||||
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
|
||||
h2#section-run-it Run it!
|
||||
|
||||
p.
|
||||
Open <code>index.html</code> through your web server or hit the <strong>Run</strong> button if using Plunker and
|
||||
you should see:
|
||||
Open <code>index.html</code> through your web server and you should see:
|
||||
div(align='center')
|
||||
img(src='setup-example1.png')
|
||||
|
||||
|
|
@ -180,19 +174,14 @@
|
|||
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.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-typescript(data-name="es5")
|
||||
code.
|
||||
// window.angular is available because the script file attaches the angular property to the window
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
...
|
||||
// bootstrap is available for use because it was imported from angular core
|
||||
bootstrap(AppComponent);
|
||||
|
||||
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums" ).
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
...
|
||||
// bootstrap is available for use because it was imported from angular core
|
||||
bootstrap(AppComponent);
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
// window.angular is available because the script file attaches the angular property to the window
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
h2#section-responding-to-user-input Responding to user input with event syntax
|
||||
|
||||
|
|
@ -11,19 +6,17 @@
|
|||
p.
|
||||
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.
|
||||
<input (keyup)="myControllerMethod()">
|
||||
code-example(language="html").
|
||||
<input (keyup)="myControllerMethod()">
|
||||
|
||||
h3#local-variables Local variables
|
||||
p.
|
||||
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:
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<input #myname (keyup)>
|
||||
<p>{{myname.value}}</p>
|
||||
code-example(language="html").
|
||||
<input #myname (keyup)>
|
||||
<p>{{myname.value}}</p>
|
||||
|
||||
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
|
||||
|
|
@ -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
|
||||
on the array when called.
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.linenums.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function TodoList() {
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//TypeScript
|
||||
class TodoList {
|
||||
todos: Array<string>;
|
||||
constructor() {
|
||||
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
|
||||
this.addTodo = function(todo) {
|
||||
this.todos.push(todo);
|
||||
};
|
||||
}
|
||||
|
||||
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
//TypeScript
|
||||
class TodoList {
|
||||
todos: Array<string>
|
||||
constructor() {
|
||||
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
|
||||
}
|
||||
addTodo(todo: string) {
|
||||
this.todos.push(todo);
|
||||
}
|
||||
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
|
||||
header Production Best Practice
|
||||
|
|
@ -78,13 +68,12 @@
|
|||
Using the <code>*for</code> iterator, create an <code><li></code> for each item in the todos array and set
|
||||
its text to the value.
|
||||
|
||||
pre.prettyprint.linenums.lang-html
|
||||
code.
|
||||
<ul>
|
||||
<li *for="#todo of todos">
|
||||
{{ todo }}
|
||||
</li>
|
||||
</ul>
|
||||
code-example(language="html" format="linenums").
|
||||
<ul>
|
||||
<li *for="#todo of todos">
|
||||
{{ todo }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
.l-main-section
|
||||
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
|
||||
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<input #todotext>
|
||||
code-example(language="html" format="linenums").
|
||||
<input #todotext>
|
||||
p.
|
||||
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
|
||||
<code>todotext.value.</code>
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<button (click)="addTodo(todotext.value)">Add Todo</button>
|
||||
code-example(language="html" format="linenums").
|
||||
<button (click)="addTodo(todotext.value)">Add Todo</button>
|
||||
|
||||
p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.
|
||||
|
||||
pre.prettyprint.lang-javascript
|
||||
code.
|
||||
doneTyping($event) {
|
||||
if($event.which === 13) {
|
||||
this.addTodo($event.target.value);
|
||||
$event.target.value = null;
|
||||
}
|
||||
code-example(language="javascript" format="linenums").
|
||||
doneTyping($event) {
|
||||
if($event.which === 13) {
|
||||
this.addTodo($event.target.value);
|
||||
$event.target.value = null;
|
||||
}
|
||||
}
|
||||
.l-main-section
|
||||
h2#section-final-code Final Code
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
//ES5
|
||||
function TodoList() {
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//TypeScript
|
||||
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'todo-list'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<ul>
|
||||
<li *for="#todo of todos">
|
||||
{{ todo }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<input #todotext (keyup)="doneTyping($event)">
|
||||
<button (click)="addTodo(todotext.value)">Add Todo</button>
|
||||
`,
|
||||
directives: [For, If]
|
||||
})
|
||||
class TodoList {
|
||||
todos: Array<string>;
|
||||
|
||||
constructor() {
|
||||
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.Component({
|
||||
selector: "todo-list"
|
||||
}),
|
||||
new angular.View({
|
||||
template:
|
||||
'<ul>' +
|
||||
'<li *for="#todo of todos">' +
|
||||
'{{ todo }}' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<input #textbox (keyup)="doneTyping($event)">' +
|
||||
'<button (click)="addTodo(textbox.value)">Add Todo</button>',
|
||||
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: `
|
||||
<ul>
|
||||
<li *for="#todo of todos">
|
||||
{{ todo }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<input #todotext (keyup)="doneTyping($event)">
|
||||
<button (click)="addTodo(todotext.value)">Add Todo</button>
|
||||
`,
|
||||
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;
|
||||
}
|
||||
}
|
||||
addTodo(todo: string) {
|
||||
this.todos.push(todo);
|
||||
}
|
||||
|
||||
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:
|
||||
'<ul>' +
|
||||
'<li *for="#todo of todos">' +
|
||||
'{{ todo }}' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<input #textbox (keyup)="doneTyping($event)">' +
|
||||
'<button (click)="addTodo(textbox.value)">Add Todo</button>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
angular.bootstrap(TodoList);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
.callout.is-helpful
|
||||
header Angular is in developer preview
|
||||
p.
|
||||
This quickstart does not
|
||||
reflect the final development process for Angular. The following setup is for those who
|
||||
want to try out Angular while it is in developer preview.
|
||||
This quickstart does not reflect the final development process for writing apps with Angular.
|
||||
The following setup is for those who want to try out Angular while it is in developer preview.
|
||||
|
||||
// STEP 1 - Create a project ##########################
|
||||
.l-main-section
|
||||
|
|
@ -15,24 +14,26 @@
|
|||
|
||||
p.
|
||||
The goal of this quickstart is to write a component in TypeScript that prints a string.
|
||||
To get started, clone the TypeScript quickstart repository:
|
||||
|
||||
pre.prettyprint
|
||||
$ git clone https://github.com/angular/ts-quickstart.git
|
||||
$ cd ts-quickstart
|
||||
We assume you have already installed <a href="https://docs.npmjs.com/getting-started/installing-node">Node and npm</a>.
|
||||
|
||||
p.
|
||||
For the sake of this quickstart we recommend using the
|
||||
<a href="https://github.com/angular/ts-quickstart"> <code>quickstart</code> GitHub repository</a>.
|
||||
This repository provides a faster start than building from <code>npm</code>.
|
||||
This repository includes the Angular distribution and type definitions for TypeScript.
|
||||
|
||||
To get started, create a new empty project directory. All the following commands should be run
|
||||
from this directory.
|
||||
|
||||
p.
|
||||
Create two files, <code>index.html</code> and
|
||||
<code>app.ts</code>, both at the root of the project:
|
||||
To get the benefits of TypeScript, we want to have the type definitions available for the compiler and the editor.
|
||||
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
|
||||
$ 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 ##########################
|
||||
.l-main-section
|
||||
|
|
@ -43,14 +44,10 @@
|
|||
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
|
||||
are loaded, or configure your editor or IDE to do it.
|
||||
p.
|
||||
The repository includes a file <code>tsconfig.json</code>.
|
||||
Many tools — including the TypeScript compiler —
|
||||
know to read this file so we don't need to configure them or add command-line options.
|
||||
|
||||
pre.prettyprint
|
||||
$ npm install -g typescript@^1.5.0-beta
|
||||
$ tsc --watch
|
||||
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
|
||||
|
||||
// STEP 3 - Import Angular ##########################
|
||||
.l-main-section
|
||||
|
|
@ -188,7 +185,7 @@
|
|||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="bundle/angular2.dev.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -224,11 +221,11 @@
|
|||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="bundle/angular2.dev.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
|
||||
</head>
|
||||
|
||||
p.
|
||||
Add the following module-loading code before the <code><my-app></code> tag:
|
||||
Add the following module-loading code:
|
||||
|
||||
pre.prettyprint.linenums
|
||||
code.
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
pre.prettyprint.linenums.is-showcase
|
||||
code.
|
||||
@Component({selector: 'my-app'})
|
||||
@Template({inline: '<h1>Hi {{ name }}</h1>'})
|
||||
@View({template: '<h1>Hi {{ name }}</h1>'})
|
||||
|
||||
// Component controller
|
||||
class MyAppComponent {
|
||||
|
|
|
|||
|
|
@ -21,4 +21,4 @@
|
|||
bottom: 0px;
|
||||
right: 0px;
|
||||
z-index: $layer-1;
|
||||
}
|
||||
}
|
||||
|
|
@ -105,6 +105,11 @@ table th,
|
|||
font-weight: 400;
|
||||
opacity: .87;
|
||||
line-height: 28px;
|
||||
|
||||
&.is-plain {
|
||||
list-style-type: none;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.l-sub-section p,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
padding: ($unit * 8) ($unit * 12);
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ angularIO.directive('codePane', function() {
|
|||
|
||||
compile: function(tElement, tAttrs) {
|
||||
var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
|
||||
var template = '<pre class="prettyprint ' + tAttrs.format + ' lang-' + tAttrs.language + '" ng-show="selected">' +
|
||||
'<code ng-non-bindable>' + html + '</code>' +
|
||||
var template = '<pre class="prettyprint ' + tAttrs.format + ' lang-' + tAttrs.language + '" ng-show="selected" >' +
|
||||
'<code class="animated fadeIn" ng-non-bindable>' + html + '</code>' +
|
||||
'</pre>';
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue