From 638eb68eb48d465c47c513ca17cebc0ae56c2b9b Mon Sep 17 00:00:00 2001 From: Henrique Ramos Limas Date: Wed, 29 Apr 2015 19:51:51 -0300 Subject: [PATCH 01/14] chore(rename) rename View and Templates concepts --- public/docs/dart/latest/quickstart.jade | 10 +++++----- public/index.jade | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 6087fbcbbc..05cb1f41f9 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -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/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 { From 4cfed5cac5e161783955e8956b030e4994511025 Mon Sep 17 00:00:00 2001 From: Mike Wilcox Date: Sat, 2 May 2015 19:51:25 -0400 Subject: [PATCH 02/14] fix typo --- public/docs/js/latest/guide/displaying-data.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index f5f96ad765..ca91aa17bb 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -76,7 +76,7 @@ } } 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: pre.prettyprint.lang-html code. From bdf28bc02645c963eb50cd34b2fe15e0910ff7e4 Mon Sep 17 00:00:00 2001 From: Rado Kirov Date: Mon, 4 May 2015 22:14:09 -0700 Subject: [PATCH 03/14] feat(ts): moving dev guide TS. Removes plunker links as they don't support TS yet. --- .../docs/js/latest/guide/displaying-data.jade | 186 ++++++++++-------- .../js/latest/guide/making-components.jade | 72 ++++--- public/docs/js/latest/guide/setup.jade | 123 ++++++------ public/docs/js/latest/guide/user-input.jade | 110 +++++------ 4 files changed, 247 insertions(+), 244 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index ca91aa17bb..4b9e264738 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 @@ -33,26 +36,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-box - pre.prettyprint.linenums.lang-javascript(data-name="es5") - code. - // 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] - }) - ]; - pre.prettyprint.linenums.lang-typescript(data-name="typescript") code. // TypeScript @@ -75,6 +61,22 @@ this.myName = "Alice"; } } + pre.prettyprint.linenums.lang-javascript(data-name="es5") + code. + // 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 encompasses a view and controller for the app. The view defines a template: @@ -124,13 +126,6 @@ h2#Create-an-array Create an array property and use For on the view p Moving up from a single property, create an array to display as a list. .code-box - pre.prettyprint.lang-javascript(data-name="es5") - code. - //ES5 - function DisplayComponent() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; - } pre.prettyprint.lang-typescript(data-name="typescript") code. //Typescript @@ -138,6 +133,13 @@ this.myName = "Alice"; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; } + pre.prettyprint.lang-javascript(data-name="es5") + code. + //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 for directive to create copies of DOM elements with one for each item in the array. @@ -167,20 +169,20 @@ </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-box - pre.prettyprint.lang-javascript(data-name="es5") - code. - //ES5 - directives: [angular.For] pre.prettyprint.lang-typescript(data-name="typescript") code. //Typescript import {Component, View, bootstrap, For} from ... directives: [For] + pre.prettyprint.lang-javascript(data-name="es5") + code. + //ES5 + directives: [angular.For] p Reload and you've got your list of friends! p. Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your @@ -211,28 +213,32 @@ 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"]; + 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; + 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] - }), + @Component({ + ... + injectables: [DisplayComponent] + }) ... - DisplayComponent.parameters = [[FriendsService]]; + class DisplayComponent {... .callout.is-helpful header ES5 Note p. @@ -240,6 +246,24 @@ working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon. .code-box + pre.prettyprint.lang-typescript(data-name="typescript") + code. + //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; + } + } + pre.prettyprint.lang-javascript(data-name="es5") code. //ES5 @@ -251,11 +275,11 @@ this.names = friends.names; } DisplayComponent.annotations = [ - new angular.Component({ + new angular.ComponentAnnotation({ selector: "display", injectables: [FriendsService] }), - new angular.View({ + new angular.ViewAnnotation({ template: '{{ myName }} <ul> <li *for="#name of names">{{ name }}</li> </ul>', directives: [angular.For, angular.If] }) @@ -264,12 +288,6 @@ document.addEventListener("DOMContentLoaded", function() { angular.bootstrap(DisplayComponent); }); - pre.prettyprint.lang-typescript(data-name="typescript") - code. - //TypeScript - import {Component, View, bootstrap, For} from - ... - directives: [For] .l-main-section h2#Conditionally-displaying-data-with-If Conditionally displaying data with If p. @@ -279,47 +297,23 @@ 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] + pre.prettyprint.lang-javascript(data-name="es5") + code. + //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 @@ -342,9 +336,33 @@ }) class DisplayComponent { myName: string; - todos: Array; + todos: Array<string> constructor() { this.myName = "Alice"; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; } } + 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.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] + }) + ]; diff --git a/public/docs/js/latest/guide/making-components.jade b/public/docs/js/latest/guide/making-components.jade index 5efbce9296..80a19c1528 100644 --- a/public/docs/js/latest/guide/making-components.jade +++ b/public/docs/js/latest/guide/making-components.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-its-all-a-tree It's all a tree @@ -16,24 +11,6 @@ component that uses a <child> component like so: .code-box - pre.prettyprint.linenums.lang-javascript(data-name="es5") - code. - //ES5 - function ParentComponent() { - 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 @@ -54,25 +31,28 @@ this.message = "I'm the parent"; } } + pre.prettyprint.linenums.lang-javascript(data-name="es5") + code. + //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] + }) + ]; + 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() { - this.message = "I'm the child"; - } - ChildComponent.annotations = [ - new angular.Component({ - selector: "child" - }), - new angular.View({ - template: '<p> {{ message }} </p>' - }) - ]; - pre.prettyprint.linenums.lang-typescript(data-name="typescript") code. //TypeScript @@ -85,10 +65,26 @@ ` }) class ChildComponent { + message: string; constructor() { this.message = "I'm the child"; } } + pre.prettyprint.linenums.lang-javascript(data-name="es5") + code. + //ES5 + function ChildComponent() { + this.message = "I'm the child"; + } + ChildComponent.annotations = [ + new angular.ComponentAnnotation({ + selector: "child" + }), + new angular.ViewAnnotation({ + template: '<p> {{ message }} </p>' + }) + ]; + 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..e0f0850dab 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,21 +37,9 @@ 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> @@ -61,22 +47,27 @@ <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> + <script src="https://code.angularjs.org/2.0.0-alpha.21/angular2.dev.js"></script> </head> <body> <my-app></my-app> <script> - System.config({ - paths: { - '*': '*.js', - 'angular2/*': 'angular2/*', - } - }); System.import('main'); </script> </body> </html> + pre.prettyprint.lang-html(data-name="es5") + code. + <!DOCTYPE html> + <html> + <head> + <script src="https://code.angularjs.org/2.0.0-alpha.21/angular2.sfx.dev.js"></script> + <script src="main.js"></script> + </head> + <body> + </body> + </html> .callout.is-helpful header Don't use code.angularjs.org in a live app @@ -88,28 +79,11 @@ 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. - function AppComponent() {} - - AppComponent.annotations = [ - new angular.Component({ - selector: 'my-app' - }), - new angular.View({ - template: '<h1>My first Angular 2 App</h1>' - }) - ]; - - document.addEventListener('DOMContentLoaded', function() { - angular.bootstrap(AppComponent); - }); - pre.prettyprint.lang-typescript(data-name="typescript") code. import {Component, View, bootstrap} from 'angular2/angular2'; @@ -125,13 +99,37 @@ bootstrap(AppComponent); + pre.prettyprint.lang-javascript(data-name="es5") + code. + function AppComponent() {} + + AppComponent.annotations = [ + new angular.ComponentAnnotation({ + selector: 'my-app' + }), + new angular.ViewAnnotation({ + template: '<h1>My first Angular 2 App</h1>' + }) + ]; + + document.addEventListener('DOMContentLoaded', function() { + angular.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') @@ -181,18 +179,15 @@ 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); - - - + 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); + }); diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade index 25429533f4..a5abcf762a 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 @@ -43,6 +38,18 @@ on the array when called. .code-box + 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); + } + } pre.prettyprint.linenums.lang-javascript(data-name="es5") code. //ES5 @@ -53,19 +60,6 @@ }; } - 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); - } - } - .callout.is-helpful header Production Best Practice p. @@ -118,45 +112,6 @@ h2#section-final-code Final Code .code-box - pre.prettyprint.lang-javascript(data-name="es5") - code. - //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.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 @@ -179,7 +134,7 @@ directives: [For, If] }) class TodoList { - todos: Array; + todos: Array<string>; constructor() { this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; @@ -198,3 +153,42 @@ } bootstrap(TodoList); + pre.prettyprint.lang-javascript(data-name="es5") + code. + //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); + }); + From b0c75b49e29e60d617b768c5c3907dd2a9ea074d Mon Sep 17 00:00:00 2001 From: Sam Verschueren Date: Thu, 7 May 2015 09:01:54 +0200 Subject: [PATCH 04/14] Added my-app directive to the ES5 'Getting started' guide --- public/docs/js/latest/guide/setup.jade | 1 + 1 file changed, 1 insertion(+) diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade index e0f0850dab..a6de4147ce 100644 --- a/public/docs/js/latest/guide/setup.jade +++ b/public/docs/js/latest/guide/setup.jade @@ -66,6 +66,7 @@ <script src="main.js"></script> </head> <body> + <my-app></my-app> </body> </html> From 438a27bd781c38d7c2a03b1b14e77b819ced29b8 Mon Sep 17 00:00:00 2001 From: Cody Lundquist Date: Wed, 29 Apr 2015 09:33:45 -0700 Subject: [PATCH 05/14] Fix typo in annotations docs --- public/docs/js/latest/api/annotations/_data.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/js/latest/api/annotations/_data.json b/public/docs/js/latest/api/annotations/_data.json index aececb1801..bec55c2516 100644 --- a/public/docs/js/latest/api/annotations/_data.json +++ b/public/docs/js/latest/api/annotations/_data.json @@ -1,7 +1,7 @@ { "index" : { "title" : "Annotations", - "intro" : "Annotations provide the additional information that Angular requires in order to run your application. This modulecontains Component, Directive, and View annotations, as well as Parent and Ancestor annotations that areused by Angular to resolve dependencies." + "intro" : "Annotations provide the additional information that Angular requires in order to run your application. This module contains Component, Directive, and View annotations, as well as Parent and Ancestor annotations that are used by Angular to resolve dependencies." }, "Directive-class" : { @@ -43,4 +43,4 @@ "Ancestor-class" : { "title" : "Ancestor Class" } -} \ No newline at end of file +} From a40310d8421a505c6c2550941ff29ccab0333ae1 Mon Sep 17 00:00:00 2001 From: Alex Eagle Date: Thu, 7 May 2015 18:24:40 -0700 Subject: [PATCH 06/14] Update the quickstart for alpha22. We no longer need to use the quickstart repo since the published bundle works with Decorators. --- public/docs/js/latest/quickstart.jade | 45 +++++++++++++-------------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 4158b33113..6bb6aa8725 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -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 Node and npm. p. - For the sake of this quickstart we recommend using the - quickstart 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. From ac2155209c0ccfff57d6b737e3735341a8a2fbbe Mon Sep 17 00:00:00 2001 From: Francisco Javier Jimenez Saez Date: Fri, 8 May 2015 11:20:29 +0200 Subject: [PATCH 07/14] fix(ts): change wrong injectable class on typescript guide 02 --- public/docs/js/latest/guide/displaying-data.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 4b9e264738..9fa3d948da 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -235,7 +235,7 @@ code. @Component({ ... - injectables: [DisplayComponent] + injectables: [FriendsService] }) ... class DisplayComponent {... From 491f2cc97f2b499ac9f43adad3395c467bb6179f Mon Sep 17 00:00:00 2001 From: Rado Kirov Date: Fri, 8 May 2015 13:30:38 -0700 Subject: [PATCH 08/14] fix(version): bump to alpha.22 Closes: #98 --- public/docs/dart/latest/guide/displaying-data.jade | 4 ++-- public/docs/dart/latest/guide/setup.jade | 2 +- public/docs/dart/latest/guide/user-input.jade | 2 +- public/docs/dart/latest/quickstart.jade | 4 ++-- public/docs/js/latest/guide/setup.jade | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade index b0f82fe82c..4f3bdb8d70 100644 --- a/public/docs/dart/latest/guide/displaying-data.jade +++ b/public/docs/dart/latest/guide/displaying-data.jade @@ -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 diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade index ee9144b69b..77fec51e0f 100644 --- a/public/docs/dart/latest/guide/setup.jade +++ b/public/docs/dart/latest/guide/setup.jade @@ -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 pub get to download the packages your app depends on. diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade index b4ca124b0d..9fba3e3182 100644 --- a/public/docs/dart/latest/guide/user-input.jade +++ b/public/docs/dart/latest/guide/user-input.jade @@ -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 diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 05cb1f41f9..3fbc3e7482 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -30,14 +30,14 @@ p. p. In 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 diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade index a6de4147ce..4131018218 100644 --- a/public/docs/js/latest/guide/setup.jade +++ b/public/docs/js/latest/guide/setup.jade @@ -47,7 +47,7 @@ <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.21/angular2.dev.js"></script> + <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script> </head> <body> <my-app></my-app> @@ -62,7 +62,7 @@ <!DOCTYPE html> <html> <head> - <script src="https://code.angularjs.org/2.0.0-alpha.21/angular2.sfx.dev.js"></script> + <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.sfx.dev.js"></script> <script src="main.js"></script> </head> <body> From 443e4e5b5f7c710c3332a1385835fc26bab33261 Mon Sep 17 00:00:00 2001 From: Leigh Zhu Date: Sun, 10 May 2015 17:40:48 +0800 Subject: [PATCH 09/14] fix variable name --- public/docs/js/latest/guide/displaying-data.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 9fa3d948da..d63df755dc 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -55,7 +55,7 @@ }) class DisplayComponent { myName: string; - todos: Array<string>; + names: Array<string>; constructor() { this.myName = "Alice"; From 3f09871344634bbdd93ae8e3eb66948e4e7bd1b8 Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Thu, 14 May 2015 14:02:55 -0700 Subject: [PATCH 10/14] docs(README): add note about harp version --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 766de0f514..6f79fd3a46 100644 --- a/README.md +++ b/README.md @@ -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/) From 1af6775b616896c23d191f132f5dc617712e7a72 Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Thu, 14 May 2015 14:06:37 -0700 Subject: [PATCH 11/14] docs(contribute): Update the Contribute to Angular to add AngularDart closes #111 --- public/contribute.jade | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/public/contribute.jade b/public/contribute.jade index e0fe20aacd..edc9bc38d2 100644 --- a/public/contribute.jade +++ b/public/contribute.jade @@ -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 From d135d1bf7e76c4a31ce7f469982c18016fcd51f6 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Sun, 17 May 2015 11:34:24 -0700 Subject: [PATCH 12/14] Updates for mobile list styles and layout --- public/docs/dart/latest/guide/index.jade | 4 ++-- public/docs/js/latest/api/index.jade | 19 +++++++++---------- public/docs/js/latest/guide/index.jade | 4 ++-- public/resources/css/_state.scss | 2 +- public/resources/css/base/_type.scss | 5 +++++ public/resources/css/layout/_layout.scss | 10 ++++++++++ 6 files changed, 29 insertions(+), 15 deletions(-) diff --git a/public/docs/dart/latest/guide/index.jade b/public/docs/dart/latest/guide/index.jade index 66aa7bf4dd..1fe63c7ec3 100644 --- a/public/docs/dart/latest/guide/index.jade +++ b/public/docs/dart/latest/guide/index.jade @@ -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 }) 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/guide/index.jade b/public/docs/js/latest/guide/index.jade index 66aa7bf4dd..1fe63c7ec3 100644 --- a/public/docs/js/latest/guide/index.jade +++ b/public/docs/js/latest/guide/index.jade @@ -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 }) 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); From b29c96817ee3a619d9e6e3bb4516e00f362b9147 Mon Sep 17 00:00:00 2001 From: Markus Date: Mon, 18 May 2015 06:59:13 +0200 Subject: [PATCH 13/14] fixed typos in bios (harp.json) --- harp.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/harp.json b/harp.json index 99d20df193..e5f5dc50d4 100644 --- a/harp.json +++ b/harp.json @@ -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": { From 9d30e6da413b08cca46ed14529bfbf9e4bd35719 Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Mon, 18 May 2015 17:39:04 -0700 Subject: [PATCH 14/14] docs(api): update API docs to head --- .../docs/js/latest/api/annotations/_data.json | 4 +- .../ChangeDetection-class.jade | 2 +- .../DynamicChangeDetection-class.jade | 4 +- .../JitChangeDetection-class.jade | 4 +- .../api/core/ViewContainerRef-class.jade | 2 +- .../DependencyAnnotation-class.jade | 2 +- .../api/di_annotations/Inject-class.jade | 2 +- .../api/di_annotations/InjectLazy-class.jade | 2 +- .../di_annotations/InjectPromise-class.jade | 2 +- .../api/di_annotations/Injectable-class.jade | 2 +- .../api/di_annotations/Optional-class.jade | 2 +- .../api/pipes/AsyncPipeFactory-class.jade | 14 +++++ .../pipes/CollectionChangeRecord-class.jade | 2 +- .../api/pipes/IterableChanges-class.jade | 2 +- .../api/pipes/KVChangeRecord-class.jade | 2 +- .../api/pipes/KeyValueChanges-class.jade | 2 +- .../pipes/KeyValueChangesFactory-class.jade | 14 +++++ .../js/latest/api/pipes/NullPipe-class.jade | 2 +- .../api/pipes/NullPipeFactory-class.jade | 14 +++++ .../docs/js/latest/api/pipes/Pipe-class.jade | 2 +- .../latest/api/pipes/WrappedValue-class.jade | 53 +++++++++++++++++++ public/docs/js/latest/api/pipes/_data.json | 4 ++ .../js/latest/api/router/Router-class.jade | 39 ++++++-------- public/docs/js/latest/api/router/_data.json | 4 ++ .../api/router/routerInjectables-var.jade | 9 ++++ .../js/latest/api/view/Compiler-class.jade | 4 +- .../latest/api/view/ComponentRef-class.jade | 2 +- .../view/DynamicComponentLoader-class.jade | 2 +- 28 files changed, 152 insertions(+), 47 deletions(-) create mode 100644 public/docs/js/latest/api/pipes/WrappedValue-class.jade create mode 100644 public/docs/js/latest/api/router/routerInjectables-var.jade diff --git a/public/docs/js/latest/api/annotations/_data.json b/public/docs/js/latest/api/annotations/_data.json index bec55c2516..aececb1801 100644 --- a/public/docs/js/latest/api/annotations/_data.json +++ b/public/docs/js/latest/api/annotations/_data.json @@ -1,7 +1,7 @@ { "index" : { "title" : "Annotations", - "intro" : "Annotations provide the additional information that Angular requires in order to run your application. This module contains Component, Directive, and View annotations, as well as Parent and Ancestor annotations that are used by Angular to resolve dependencies." + "intro" : "Annotations provide the additional information that Angular requires in order to run your application. This modulecontains Component, Directive, and View annotations, as well as Parent and Ancestor annotations that areused by Angular to resolve dependencies." }, "Directive-class" : { @@ -43,4 +43,4 @@ "Ancestor-class" : { "title" : "Ancestor Class" } -} +} \ No newline at end of file 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/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