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); + }); +