pubspec.yaml, add the angular2 and browser packages as dependencies.
Angular 2 is changing rapidly, so specify an exact version:
- 2.0.0-alpha.21.
+ 2.0.0-alpha.22.
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 pub get
@@ -108,7 +108,7 @@ p.
has the tag <my-app>.
The Dart code for an Angular component consists of a class
(the component controller)
- that has @Component and @Template annotations.
+ that has @Component and @View annotations.
.l-sub-section
@@ -119,10 +119,10 @@ p.
the HTML tag for the component by specifying the component's CSS selector.
p.
- The @Template annotation defines the HTML that
+ The @View 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 url property
+ specify a templateUrl 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]
diff --git a/public/docs/js/latest/api/change_detection/ChangeDetection-class.jade b/public/docs/js/latest/api/change_detection/ChangeDetection-class.jade
index f9bf8a688c..526d393aa4 100644
--- a/public/docs/js/latest/api/change_detection/ChangeDetection-class.jade
+++ b/public/docs/js/latest/api/change_detection/ChangeDetection-class.jade
@@ -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
diff --git a/public/docs/js/latest/api/change_detection/DynamicChangeDetection-class.jade b/public/docs/js/latest/api/change_detection/DynamicChangeDetection-class.jade
index 89186ca003..5175c268c1 100644
--- a/public/docs/js/latest/api/change_detection/DynamicChangeDetection-class.jade
+++ b/public/docs/js/latest/api/change_detection/DynamicChangeDetection-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/change_detection
- defined in angular2/src/change_detection/change_detection.js (line 55)
+ defined in angular2/src/change_detection/change_detection.js (line 59)
: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
diff --git a/public/docs/js/latest/api/change_detection/JitChangeDetection-class.jade b/public/docs/js/latest/api/change_detection/JitChangeDetection-class.jade
index cd62a0144c..0fbdad88c1 100644
--- a/public/docs/js/latest/api/change_detection/JitChangeDetection-class.jade
+++ b/public/docs/js/latest/api/change_detection/JitChangeDetection-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/change_detection
- defined in angular2/src/change_detection/change_detection.js (line 76)
+ defined in angular2/src/change_detection/change_detection.js (line 81)
: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
diff --git a/public/docs/js/latest/api/core/ViewContainerRef-class.jade b/public/docs/js/latest/api/core/ViewContainerRef-class.jade
index 66a58d7b26..5aebb2ad15 100644
--- a/public/docs/js/latest/api/core/ViewContainerRef-class.jade
+++ b/public/docs/js/latest/api/core/ViewContainerRef-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/core
- defined in angular2/src/core/compiler/view_container_ref.js (line 12)
+ defined in angular2/src/core/compiler/view_container_ref.js (line 11)
:markdown
diff --git a/public/docs/js/latest/api/di_annotations/DependencyAnnotation-class.jade b/public/docs/js/latest/api/di_annotations/DependencyAnnotation-class.jade
index 028c28b977..a53ec0ecde 100644
--- a/public/docs/js/latest/api/di_annotations/DependencyAnnotation-class.jade
+++ b/public/docs/js/latest/api/di_annotations/DependencyAnnotation-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/di_annotations
- defined in angular2/src/di/annotations.js (line 110)
+ defined in angular2/src/di/annotations_impl.js (line 110)
:markdown
`DependencyAnnotation` is used by the framework to extend DI.
diff --git a/public/docs/js/latest/api/di_annotations/Inject-class.jade b/public/docs/js/latest/api/di_annotations/Inject-class.jade
index 3ea4b91b32..28dc2a3881 100644
--- a/public/docs/js/latest/api/di_annotations/Inject-class.jade
+++ b/public/docs/js/latest/api/di_annotations/Inject-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/di_annotations
- defined in angular2/src/di/annotations.js (line 13)
+ defined in angular2/src/di/annotations_impl.js (line 13)
:markdown
A parameter annotation that specifies a dependency.
diff --git a/public/docs/js/latest/api/di_annotations/InjectLazy-class.jade b/public/docs/js/latest/api/di_annotations/InjectLazy-class.jade
index 2288e3ac2b..42a87ffe08 100644
--- a/public/docs/js/latest/api/di_annotations/InjectLazy-class.jade
+++ b/public/docs/js/latest/api/di_annotations/InjectLazy-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/di_annotations
- defined in angular2/src/di/annotations.js (line 55)
+ defined in angular2/src/di/annotations_impl.js (line 55)
:markdown
A parameter annotation that creates a synchronous lazy dependency.
diff --git a/public/docs/js/latest/api/di_annotations/InjectPromise-class.jade b/public/docs/js/latest/api/di_annotations/InjectPromise-class.jade
index cea5d6dfcd..3828527831 100644
--- a/public/docs/js/latest/api/di_annotations/InjectPromise-class.jade
+++ b/public/docs/js/latest/api/di_annotations/InjectPromise-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/di_annotations
- defined in angular2/src/di/annotations.js (line 34)
+ defined in angular2/src/di/annotations_impl.js (line 34)
:markdown
A parameter annotation that specifies a `Promise` of a dependency.
diff --git a/public/docs/js/latest/api/di_annotations/Injectable-class.jade b/public/docs/js/latest/api/di_annotations/Injectable-class.jade
index 180ebfcb81..d4c4257981 100644
--- a/public/docs/js/latest/api/di_annotations/Injectable-class.jade
+++ b/public/docs/js/latest/api/di_annotations/Injectable-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/di_annotations
- defined in angular2/src/di/annotations.js (line 134)
+ defined in angular2/src/di/annotations_impl.js (line 134)
:markdown
A marker annotation that marks a class as available to `Injector` for creation. Used by tooling for
diff --git a/public/docs/js/latest/api/di_annotations/Optional-class.jade b/public/docs/js/latest/api/di_annotations/Optional-class.jade
index 47b892dd91..8ca8ff459e 100644
--- a/public/docs/js/latest/api/di_annotations/Optional-class.jade
+++ b/public/docs/js/latest/api/di_annotations/Optional-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/di_annotations
- defined in angular2/src/di/annotations.js (line 77)
+ defined in angular2/src/di/annotations_impl.js (line 77)
:markdown
A parameter annotation that marks a dependency as optional. Injector provides `null` if the dependency is not
diff --git a/public/docs/js/latest/api/index.jade b/public/docs/js/latest/api/index.jade
index 222d706b25..56e1893a3f 100644
--- a/public/docs/js/latest/api/index.jade
+++ b/public/docs/js/latest/api/index.jade
@@ -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
- use Angular 1.X.
+ 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
+ use Angular 1.X.
-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 })
diff --git a/public/docs/js/latest/api/pipes/AsyncPipeFactory-class.jade b/public/docs/js/latest/api/pipes/AsyncPipeFactory-class.jade
index 5f8e107dd5..2368d6fabe 100644
--- a/public/docs/js/latest/api/pipes/AsyncPipeFactory-class.jade
+++ b/public/docs/js/latest/api/pipes/AsyncPipeFactory-class.jade
@@ -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
diff --git a/public/docs/js/latest/api/pipes/CollectionChangeRecord-class.jade b/public/docs/js/latest/api/pipes/CollectionChangeRecord-class.jade
index c16828a03d..589276fa8b 100644
--- a/public/docs/js/latest/api/pipes/CollectionChangeRecord-class.jade
+++ b/public/docs/js/latest/api/pipes/CollectionChangeRecord-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/pipes
- defined in angular2/src/change_detection/pipes/iterable_changes.js (line 509)
+ defined in angular2/src/change_detection/pipes/iterable_changes.js (line 515)
:markdown
diff --git a/public/docs/js/latest/api/pipes/IterableChanges-class.jade b/public/docs/js/latest/api/pipes/IterableChanges-class.jade
index 544ab05509..f5bbab2043 100644
--- a/public/docs/js/latest/api/pipes/IterableChanges-class.jade
+++ b/public/docs/js/latest/api/pipes/IterableChanges-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/pipes
- defined in angular2/src/change_detection/pipes/iterable_changes.js (line 31)
+ defined in angular2/src/change_detection/pipes/iterable_changes.js (line 37)
:markdown
diff --git a/public/docs/js/latest/api/pipes/KVChangeRecord-class.jade b/public/docs/js/latest/api/pipes/KVChangeRecord-class.jade
index c6febc5700..c2012dd3c0 100644
--- a/public/docs/js/latest/api/pipes/KVChangeRecord-class.jade
+++ b/public/docs/js/latest/api/pipes/KVChangeRecord-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/pipes
- defined in angular2/src/change_detection/pipes/keyvalue_changes.js (line 360)
+ defined in angular2/src/change_detection/pipes/keyvalue_changes.js (line 365)
:markdown
diff --git a/public/docs/js/latest/api/pipes/KeyValueChanges-class.jade b/public/docs/js/latest/api/pipes/KeyValueChanges-class.jade
index 36c01a25a1..36d0336e5c 100644
--- a/public/docs/js/latest/api/pipes/KeyValueChanges-class.jade
+++ b/public/docs/js/latest/api/pipes/KeyValueChanges-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/pipes
- defined in angular2/src/change_detection/pipes/keyvalue_changes.js (line 21)
+ defined in angular2/src/change_detection/pipes/keyvalue_changes.js (line 26)
:markdown
diff --git a/public/docs/js/latest/api/pipes/KeyValueChangesFactory-class.jade b/public/docs/js/latest/api/pipes/KeyValueChangesFactory-class.jade
index fcb06dd299..be5d2d284e 100644
--- a/public/docs/js/latest/api/pipes/KeyValueChangesFactory-class.jade
+++ b/public/docs/js/latest/api/pipes/KeyValueChangesFactory-class.jade
@@ -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
diff --git a/public/docs/js/latest/api/pipes/NullPipe-class.jade b/public/docs/js/latest/api/pipes/NullPipe-class.jade
index 4c37ac0e41..b490e1fb7e 100644
--- a/public/docs/js/latest/api/pipes/NullPipe-class.jade
+++ b/public/docs/js/latest/api/pipes/NullPipe-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/pipes
- defined in angular2/src/change_detection/pipes/null_pipe.js (line 19)
+ defined in angular2/src/change_detection/pipes/null_pipe.js (line 24)
:markdown
diff --git a/public/docs/js/latest/api/pipes/NullPipeFactory-class.jade b/public/docs/js/latest/api/pipes/NullPipeFactory-class.jade
index c7df0af1aa..1ba205e81e 100644
--- a/public/docs/js/latest/api/pipes/NullPipeFactory-class.jade
+++ b/public/docs/js/latest/api/pipes/NullPipeFactory-class.jade
@@ -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
diff --git a/public/docs/js/latest/api/pipes/Pipe-class.jade b/public/docs/js/latest/api/pipes/Pipe-class.jade
index f234751acf..0198417b8c 100644
--- a/public/docs/js/latest/api/pipes/Pipe-class.jade
+++ b/public/docs/js/latest/api/pipes/Pipe-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/pipes
- defined in angular2/src/change_detection/pipes/pipe.js (line 52)
+ defined in angular2/src/change_detection/pipes/pipe.js (line 54)
:markdown
An interface for extending the list of pipes known to Angular.
diff --git a/public/docs/js/latest/api/pipes/WrappedValue-class.jade b/public/docs/js/latest/api/pipes/WrappedValue-class.jade
new file mode 100644
index 0000000000..55e037155e
--- /dev/null
+++ b/public/docs/js/latest/api/pipes/WrappedValue-class.jade
@@ -0,0 +1,53 @@
+
+p.location-badge.
+ exported from angular2/pipes
+ defined in angular2/src/change_detection/pipes/pipe.js (line 9)
+
+:markdown
+ Indicates that the result of a Pipe 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
+
+
+
+
+
+
diff --git a/public/docs/js/latest/api/pipes/_data.json b/public/docs/js/latest/api/pipes/_data.json
index 514cc7f69c..d4999bf15a 100644
--- a/public/docs/js/latest/api/pipes/_data.json
+++ b/public/docs/js/latest/api/pipes/_data.json
@@ -52,6 +52,10 @@
"title" : "NullPipe Class"
},
+ "WrappedValue-class" : {
+ "title" : "WrappedValue Class"
+ },
+
"Pipe-class" : {
"title" : "Pipe Class"
}
diff --git a/public/docs/js/latest/api/router/Router-class.jade b/public/docs/js/latest/api/router/Router-class.jade
index 137f0edaf1..66b0f08841 100644
--- a/public/docs/js/latest/api/router/Router-class.jade
+++ b/public/docs/js/latest/api/router/Router-class.jade
@@ -1,10 +1,10 @@
p.location-badge.
exported from angular2/router
- defined in angular2/src/router/router.js (line 18)
+ defined in angular2/src/router/router.js (line 19)
: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
diff --git a/public/docs/js/latest/api/router/_data.json b/public/docs/js/latest/api/router/_data.json
index 2a71f9595c..4bc8616b44 100644
--- a/public/docs/js/latest/api/router/_data.json
+++ b/public/docs/js/latest/api/router/_data.json
@@ -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"
},
diff --git a/public/docs/js/latest/api/router/routerInjectables-var.jade b/public/docs/js/latest/api/router/routerInjectables-var.jade
new file mode 100644
index 0000000000..7e9bcd0f06
--- /dev/null
+++ b/public/docs/js/latest/api/router/routerInjectables-var.jade
@@ -0,0 +1,9 @@
+
+.l-main-section
+ h2 routerInjectables variable
+ p.location-badge.
+ exported from angular2/router
+
+ :markdown
+
+
diff --git a/public/docs/js/latest/api/view/Compiler-class.jade b/public/docs/js/latest/api/view/Compiler-class.jade
index e15cfc078c..d75ea1972c 100644
--- a/public/docs/js/latest/api/view/Compiler-class.jade
+++ b/public/docs/js/latest/api/view/Compiler-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/view
- defined in angular2/src/core/compiler/compiler.js (line 47)
+ defined in angular2/src/core/compiler/compiler.js (line 48)
: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
diff --git a/public/docs/js/latest/api/view/ComponentRef-class.jade b/public/docs/js/latest/api/view/ComponentRef-class.jade
index 9e8c8bfbc2..4e69784962 100644
--- a/public/docs/js/latest/api/view/ComponentRef-class.jade
+++ b/public/docs/js/latest/api/view/ComponentRef-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/view
- defined in angular2/src/core/compiler/dynamic_component_loader.js (line 10)
+ defined in angular2/src/core/compiler/dynamic_component_loader.js (line 11)
:markdown
diff --git a/public/docs/js/latest/api/view/DynamicComponentLoader-class.jade b/public/docs/js/latest/api/view/DynamicComponentLoader-class.jade
index 2693b71c90..def8e1714a 100644
--- a/public/docs/js/latest/api/view/DynamicComponentLoader-class.jade
+++ b/public/docs/js/latest/api/view/DynamicComponentLoader-class.jade
@@ -1,7 +1,7 @@
p.location-badge.
exported from angular2/view
- defined in angular2/src/core/compiler/dynamic_component_loader.js (line 37)
+ defined in angular2/src/core/compiler/dynamic_component_loader.js (line 38)
:markdown
Service for dynamically loading a Component into an arbitrary position in the internal Angular
diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade
index fb0f702764..90ceffdc4b 100644
--- a/public/docs/js/latest/guide/displaying-data.jade
+++ b/public/docs/js/latest/guide/displaying-data.jade
@@ -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. TypeScript Example or ES5 Example.
-
.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 .js rather than
+ .ts.
+
.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 {{ }}.
- p To see this working, create another file, show-properties.js, and add the following:
+ p To see this working, create another file, show-properties.ts, 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:
- My name: {{ myName }}
, - 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 thefor 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 angular.For directive used by the template so
+ To make this work, you'll also need to add the For 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 FriendsService 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 If 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<parent> tag in the body, you can create a parent
component that uses a <child> 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 ChildComponent 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 <child> element in the parent template, you also need to
diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade
index 1df18e421b..fa46f8ae84 100644
--- a/public/docs/js/latest/guide/setup.jade
+++ b/public/docs/js/latest/guide/setup.jade
@@ -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. TypeScript Example or ES5 Example.
-
.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 starter template 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 quickstart to get Typescript setup.
p.
- For Plunker, just use the starter template 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 .js rather than
+ .ts.
+
+
.l-main-section
h2#section-create-an-entry-point Create an entry point
p.
- Create an index.html file and add the Angular library tags and a main.js file where
+ Create an index.html file and add the Angular library tags and a main.ts 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 main.js, create a class called AppComponent, configure it to bind to the
+ In main.ts, create a class called AppComponent, configure it to bind to the
<my-app> element in index.html, and call Angular's bootstrap() 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 @ symbols to
+ annotations (for example Traceur), you will need to import the annotation versions of
+ Component and View. That can be easily achieved using
+ import {ComponentAnnotation as Component, ViewAnnotation as View}.
.l-main-section
h2#section-run-it Run it!
p.
- Open index.html through your web server or hit the Run button if using Plunker and
- you should see:
+ Open index.html 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);
+ });
diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade
index 25429533f4..e252d7c4a7 100644
--- a/public/docs/js/latest/guide/user-input.jade
+++ b/public/docs/js/latest/guide/user-input.jade
@@ -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. TypeScript Example or ES5 Example.
-
.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 #var 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 #myname 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 *for iterator, create an <li> 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 #varname. Call it #todotext 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 addTodo() method and pass
it the value. Since you created a reference called todotext, you can get the value with
todotext.value.
- 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 doneTyping() 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: Arrayquickstart GitHub repository.
- This repository provides a faster start than building from npm.
- 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, index.html and
- app.ts, 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 DefinitelyTyped.
+ To fetch one of the type definitions to the local directory, we use the tsd package manager.
pre.prettyprint
- $ touch app.ts index.html
+ $ npm install -g tsd
+ $ tsd query angular2 --action install
+
+ p.
+ Next, create two empty files, index.html and app.ts, 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 --watch 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 tsconfig.json.
- 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 <my-app> tag:
+ Add the following module-loading code:
pre.prettyprint.linenums
code.
diff --git a/public/index.jade b/public/index.jade
index e4a8541bcd..8a7653dd80 100644
--- a/public/index.jade
+++ b/public/index.jade
@@ -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 {
diff --git a/public/resources/css/_state.scss b/public/resources/css/_state.scss
index 0e1f1c71b3..f73cd6d573 100644
--- a/public/resources/css/_state.scss
+++ b/public/resources/css/_state.scss
@@ -21,4 +21,4 @@
bottom: 0px;
right: 0px;
z-index: $layer-1;
-}
+}
\ No newline at end of file
diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss
index 58798b999a..f92bd6ca5c 100644
--- a/public/resources/css/base/_type.scss
+++ b/public/resources/css/base/_type.scss
@@ -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,
diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 9edd2fe87a..318808bbb0 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@@ -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);
diff --git a/public/resources/js/directives/code-pane.js b/public/resources/js/directives/code-pane.js
index a91117225b..6acaddd42b 100644
--- a/public/resources/js/directives/code-pane.js
+++ b/public/resources/js/directives/code-pane.js
@@ -15,8 +15,8 @@ angularIO.directive('codePane', function() {
compile: function(tElement, tAttrs) {
var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
- var template = '' + - '' + html + '' + + var template = '' + + '';' + html + '' + '