From fa8312a1bd230e0167446167bb31afab746a9184 Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Tue, 19 May 2015 14:28:26 -0700 Subject: [PATCH 1/9] refactor(guide): remove setInterval example It distracts from the flow of this step of the guide, and isn't used in the rest of the guide. The use case of updating data is better covered in the next step of the guide. --- .../docs/js/latest/guide/displaying-data.jade | 20 +------------------ 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index b249074f4f..73f7d2940b 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -103,24 +103,6 @@ While you've used template: to specify an inline view, for larger templates you'd want to move them to a separate file and load them with templateUrl: instead. - p To see Angular dynamically update content, add a line after - - code-example(language="html" escape="html"). -

My name: {{ myName }}

- - p add this: - pre.prettyprint.lang-html - code. - <p>Current time: {{ time }}</p> - p. - Then give the DisplayComponent a starting value for time and a call to update time - via setInterval. - - pre.prettyprint.lang-javascript - code. - setInterval(function () { this.time = (new Date()).toString(); }.bind(this), 1000); - p Reload the page in your browser and you'll now see the seconds updating automatically. - .l-main-section 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. @@ -182,7 +164,7 @@ 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 + Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your 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: From b9339e5a173f27338c9be3884528995377cef81f Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Tue, 19 May 2015 14:30:55 -0700 Subject: [PATCH 2/9] fix(guide): fix incomplete import statements in displaying-data --- public/docs/js/latest/guide/displaying-data.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 73f7d2940b..424fca815f 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -154,8 +154,8 @@ code-tabs code-pane(language="javascript" name="TypeScript" format="linenums"). //Typescript - import {Component, View, bootstrap, For} from ... + import {Component, View, bootstrap, For} from 'angular2/angular2'; directives: [For] code-pane(language="javascript" name="ES5" format="linenums"). @@ -277,7 +277,7 @@ code-tabs code-pane(language="javascript" name="TypeScript" format="linenums"). //Typescript - import {Component, View, bootstrap, For, If} from + import {Component, View, bootstrap, For, If} from 'angular2/angular2'; ... directives: [For, If] code-pane(language="javascript" name="ES5" format="linenums"). From 20f1992e330d0e28d879e8e1a627080e2a13bd06 Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Tue, 19 May 2015 14:31:43 -0700 Subject: [PATCH 3/9] fix(guide): remove html escaping from samples in displaying-data --- public/docs/js/latest/guide/displaying-data.jade | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 424fca815f..8ad1e8722c 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -108,13 +108,14 @@ p Moving up from a single property, create an array to display as a list. code-tabs - code-pane(language="javascript" name="TypeScript" format="linenums" escape="html"). + code-pane(language="javascript" name="TypeScript" format="linenums"). //Typescript constructor() { this.myName = "Alice"; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; } - code-pane(language="javascript" name="Javascript (ES5)" format="linenums" escape="html"). + + code-pane(language="javascript" name="Javascript (ES5)" format="linenums"). //ES5 function DisplayComponent() { this.myName = "Alice"; From 99663edb8cef96a1e7d1e3a7fb04668d861ec1cc Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Tue, 19 May 2015 14:33:21 -0700 Subject: [PATCH 4/9] style(guide): add more context throughout displaying-data guide --- .../docs/js/latest/guide/displaying-data.jade | 95 ++++++++++--------- 1 file changed, 50 insertions(+), 45 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 8ad1e8722c..de702c0e6a 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -110,16 +110,21 @@ code-tabs code-pane(language="javascript" name="TypeScript" format="linenums"). //Typescript - constructor() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + class DisplayComponent { + myName: string; + names: Array; + + constructor() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } } code-pane(language="javascript" name="Javascript (ES5)" format="linenums"). //ES5 function DisplayComponent() { this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + 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 @@ -155,13 +160,22 @@ code-tabs code-pane(language="javascript" name="TypeScript" format="linenums"). //Typescript - ... import {Component, View, bootstrap, For} from 'angular2/angular2'; + @View({ + ... directives: [For] + }) + code-pane(language="javascript" name="ES5" format="linenums"). //ES5 - directives: [angular.For] + DisplayComponent.annotations = [ + ... + new angular.ViewAnnotation({ + ... + directives: [angular.For] + }) + ]; p Reload and you've got your list of friends! p. @@ -185,39 +199,32 @@ p Using this syntax, you can build UI lists from any iterable object. .l-main-section h2#Create-a-class Create a class for the array property and inject into component + p. Before we get too much further, we should mention that putting our model (array) directly in our controller isn't 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. - code-example(language="javascript" format="linenums"). - class FriendsService { - names: Array<string>; - constructor() { - this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + code-tabs + code-pane(language="javascript" name="TypeScript" format="linenums"). + class FriendsService { + names: Array<string>; + constructor() { + this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + } + + code-pane(language="javascript" name="ES5" format="linenums"). + function FriendsService() { + this.names = ["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 + Now replace the current list of friends in DisplayComponent by including the FriendsService in the injectables list, + then including the service in the constructor, and finally setting the list of names in DisplayComponent to the names provided by the service you passed in. - 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 - code-example(language="javascript" format="linenums"). - @Component({ - ... - injectables: [FriendsService] - }) - ... - class DisplayComponent {... .callout.is-helpful header ES5 Note p. @@ -226,41 +233,39 @@ code-tabs code-pane(language="javascript" name="TypeScript" format="linenums"). - //TypeScript - class FriendsService { + @Component({ + ... + injectables: [FriendsService] + }) + class DisplayComponent { + myName: string; names: Array<string>; - constructor() { - this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + constructor(friendsService: FriendsService) { + this.myName = 'Alice'; + this.names = friendsService.names; } } - ... - class DisplayComponent { - names: Array<string>; - constructor(friendsService: FriendsService) { - this.names = friendsService.names; - } - } code-pane(language="javascript" name="ES5" format="linenums"). //ES5 function FriendsService() { this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; } - function DisplayComponent(friends) { + function DisplayComponent(friends) { this.myName = "Alice"; - this.names = friends.names; + this.names = friends.names; } DisplayComponent.annotations = [ new angular.ComponentAnnotation({ selector: "display", - injectables: [FriendsService] + injectables: [FriendsService] }), new angular.ViewAnnotation({ template: '{{ myName }} <ul> <li *for="#name of names">{{ name }}</li> </ul>', - directives: [angular.For, angular.If] + directives: [angular.For] }) ]; - DisplayComponent.parameters = [[FriendsService]]; + DisplayComponent.parameters = [[FriendsService]]; document.addEventListener("DOMContentLoaded", function() { angular.bootstrap(DisplayComponent); }); From 7722b596fb6560b091d18a5bb906ad7cc636a11d Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Tue, 19 May 2015 14:36:03 -0700 Subject: [PATCH 5/9] fix(guide): rename todos->names --- 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 de702c0e6a..12a26979b5 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -315,7 +315,7 @@ }) class DisplayComponent { myName: string; - todos: Array<string> + names: Array<string> constructor() { this.myName = "Alice"; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; From f096b9bc6acc55694986c317d89fad4aa5b81b6e Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Tue, 19 May 2015 15:09:37 -0700 Subject: [PATCH 6/9] style(guide): incorporate FriendsService into final example, If directive --- .../docs/js/latest/guide/displaying-data.jade | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 12a26979b5..c5cd39b0d2 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -297,11 +297,9 @@ code-pane(language="javascript" name="TypeScript" format="linenums"). //TypeScript import {Component, View, bootstrap, For, If} from 'angular2/angular2'; - @Component({ - selector: 'display' - }) + ... @View({ - template: ` + template: ` <p>My name: {{ myName }}</p> <p>Friends:</p> <ul> @@ -314,25 +312,25 @@ directives: [For, If] }) class DisplayComponent { - myName: string; - names: Array<string> + ... + } + + class FriendsService { + names: Array; constructor() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + this.names = ["Aarav", "Martín", "Shannon"]; } } code-pane(language="javascript" name="ES5" format="linenums"). //ES5 - function DisplayComponent() { + function DisplayComponent(friends) { this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + this.names = friends.names; } DisplayComponent.annotations = [ - new angular.ComponentAnnotation({ - selector: "display" - }), + ... new angular.ViewAnnotation({ - template: + template: ' '<p>My name: {{ myName }}</p>' + '<p>Friends:</p>' + '<ul>' + @@ -340,7 +338,11 @@ '{{ name }}' + '</li>' + '</ul>' + - '<p *if="names.length > 3">You have many friends!</p>', + '<p *if="names.length > 3">You have many friends!</p>'', directives: [angular.For, angular.If] }) ]; + + function FriendsService () { + this.names = ["Aarav", "Martín", "Shannon"]; + } From ad884ff6b305770adf4642801f43ac863d067164 Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Tue, 19 May 2015 15:10:47 -0700 Subject: [PATCH 7/9] style(guide): uppercase the For directive --- 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 c5cd39b0d2..2f8a18fcab 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -127,7 +127,7 @@ 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 + 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. code-tabs From abb973d069b095ba322a5a8355958b6759f1ff5e Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Tue, 19 May 2015 15:16:44 -0700 Subject: [PATCH 8/9] fix(guide): use correct number of friends in list on displaying-data guide --- public/docs/js/latest/guide/displaying-data.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 2f8a18fcab..5f56161a08 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -290,8 +290,8 @@ //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. + As there are currently 6 items it the list, you'll see the message congratulating you on your many friends. + Remove three items from the list, reload your browser, and see that the message no longer displays. code-tabs code-pane(language="javascript" name="TypeScript" format="linenums"). From 7917bba1a40be6ed6d0f85ee443bf7da15e589aa Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Tue, 19 May 2015 15:17:16 -0700 Subject: [PATCH 9/9] style(guide): remove FriendsService from ES5 example where TS example does not have it --- public/docs/js/latest/guide/displaying-data.jade | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 5f56161a08..56c373a519 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -220,6 +220,7 @@ function FriendsService() { this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; } + p. Now replace the current list of friends in DisplayComponent by including the FriendsService in the injectables list, then including the service in the constructor, and finally setting the list of @@ -248,9 +249,6 @@ 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;