From 6fe86825b51b6139362de2a1af08530e3186614c Mon Sep 17 00:00:00 2001 From: David East Date: Wed, 22 Apr 2015 04:35:13 -0700 Subject: [PATCH 1/9] Displaying data clean up. --- public/docs/js/latest/guide/displaying-data.jade | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 2943ba134f..343e9fcd2c 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -260,7 +260,7 @@ new angular.Component({ selector: "display", injectables: [FriendsService] - }), + }), new angular.View({ template: '{{ myName }} <ul> <li *for="#name of names"<{{ name }}>/li< >/ul<', directives: [angular.For, angular.If] @@ -286,7 +286,17 @@ 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 [TODO: CODE] + + pre.prettyprint.lang-javascript + code. + //ES5 + directives: [angular.For, angular.If] + pre.prettyprint.lang-typescript + code. + //Typescript + import {Component, View, bootstrap, For, If} from + ... + directives: [For, 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. From 7ebb9173b041d8245f6aaa6d8b4a0323f319cb94 Mon Sep 17 00:00:00 2001 From: David East Date: Wed, 22 Apr 2015 05:25:15 -0700 Subject: [PATCH 2/9] Docs changes. --- .../docs/js/latest/guide/displaying-data.jade | 36 +++++++++---------- public/docs/js/latest/guide/setup.jade | 12 ++++--- public/docs/js/latest/guide/user-input.jade | 36 ++++++++++--------- 3 files changed, 42 insertions(+), 42 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 343e9fcd2c..bfafc2dbf9 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -1,24 +1,20 @@ -.l-main-section - p. - Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML - templates and Angular automatically updates the UI as data changes. - p. - Let's walk through how we'd display a property, a list of properties, and then conditionally show content - based on state. - p. - We'll end up with a UI that looks like this: - div(align='center') - img(src='displaying-data-example1.png') +.callout.is-helpful + header Live Examples + p. + If you want to skip to the working examples you can check out these links on Plunker. TypeScript Example or TypeScript Example or ES5 Example. + h2#section-install-or-plunker Install Angular or Use Plunker p There are four steps to create any Angular app: ol @@ -22,10 +28,6 @@ pre.prettyprint.lang-bash code python -m SimpleHTTPServer 8000 - p. - If you want to skip the working examples you can check out these links on Plunker. TypeScript Example or - ES5 Example. - .l-main-section h2#section-create-an-entry-point Create an entry point p. @@ -195,4 +197,4 @@ // window.angular is available because the script file attaches the angular property to the window document.addEventListener('DOMContentLoaded', function() { angular.bootstrap(AppComponent); - }); \ No newline at end of file + }); diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade index 2f837680c0..a991bae389 100644 --- a/public/docs/js/latest/guide/user-input.jade +++ b/public/docs/js/latest/guide/user-input.jade @@ -1,7 +1,13 @@ .l-main-section + + .callout.is-helpful + header Live Examples + p. + If you want to skip to the working examples you can check out these links on Plunker. TypeScript Example or #myname creates a local variable in the template that we'll refer to below in the <p> element. The (keyup) tells Angular to trigger updates when it gets a keyup - event. And the {{my-name.value}} binds the text node of the <p> element to the + event. And the {{myname.value}} binds the text node of the <p> element to the input's value property. p Let's do something a little more complex where users enter items and add them to a list like this: div(align='center') img(src='user-input-example1.png') -.l-main-section +.l-ain-section h2#section-create-an-array-property Create an array property p. - With the default bootstrapping in place, create a TodoController class that will manage interactions with the - list. Inside TodoController, add an array with an initial list of items. Then add a method that pushes new items + With the default bootstrapping in place, create a controller class that will manage interactions with the + list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items on the array when called. pre.prettyprint.linenums.lang-javascript @@ -39,7 +45,7 @@ //ES5 function TodoList() { this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; - this.addTodo = function(todo) { + this.addTodo = function(todo) { this.todos.push(todo); }; } @@ -48,11 +54,11 @@ code. //TypeScript class TodoList { - todos: Array; - constructor() { + todos: Array<string> + constructor() { this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; } - addTodo(todo: string) { + addTodo(todo: string) { this.todos.push(todo); } } @@ -61,7 +67,7 @@ header Production Best Practice p. As with the previous example, in a production application you will separate your model out into another class - and inject it into TodoController. We've omitted it here for brevity. + and inject it into TodoList. We've omitted it here for brevity. .l-main-section h2#section-display-the-list-of-todos Display the list of todos @@ -95,7 +101,7 @@ code. <button (click)="addTodo(todotext.domElement.value)">Add Todo</button> - p And then create the doneTyping() method on TodoList and handle adding the todo text. + p And then create the doneTyping() method on TodoList and handle adding the todo text. pre.prettyprint.lang-javascript code. @@ -188,7 +194,3 @@ } bootstrap(TodoList); - - - - From 15e799781991643a8cc8b7ff6a12cd055bd172c1 Mon Sep 17 00:00:00 2001 From: David East Date: Wed, 22 Apr 2015 05:25:26 -0700 Subject: [PATCH 3/9] Intro layout --- public/_includes/_intro.jade | 7 +++++++ public/docs/js/latest/guide/_data.json | 6 ++++-- public/docs/js/latest/guide/_layout.jade | 4 +++- 3 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 public/_includes/_intro.jade diff --git a/public/_includes/_intro.jade b/public/_includes/_intro.jade new file mode 100644 index 0000000000..166f64bf0a --- /dev/null +++ b/public/_includes/_intro.jade @@ -0,0 +1,7 @@ +.intro(style='\ + background: #E6E7EC;\ + padding: 40px;\ + font-size: 22px;\ + line-height: 32px;\ + ') + | #{ intro } diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 219ab5e2b6..9f6c110114 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -10,11 +10,13 @@ }, "displaying-data": { - "title": "Displaying Data" + "title": "Displaying Data", + "intro": "Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML templates and Angular automatically updates the UI as data changes." }, "user-input": { - "title": "User Input" + "title": "User Input", + "intro": "DOM events drive user input in Angular. You can use the native events you're used to like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements." }, "making-components": { diff --git a/public/docs/js/latest/guide/_layout.jade b/public/docs/js/latest/guide/_layout.jade index b53b63a3aa..ac6b62af47 100644 --- a/public/docs/js/latest/guide/_layout.jade +++ b/public/docs/js/latest/guide/_layout.jade @@ -7,6 +7,8 @@ html(lang="en" ng-app="angularIOApp") != partial("../../../../_includes/_main-nav") != partial("../../../../_includes/_docs-nav") != partial("../../../../_includes/_hero") + if intro + != partial("../../../../_includes/_intro") if banner != partial("../../../../_includes/_banner") @@ -16,4 +18,4 @@ html(lang="en" ng-app="angularIOApp") != partial("../../../../_includes/_next-item") != partial("../../../../_includes/_footer") - != partial("../../../../_includes/_scripts-include") \ No newline at end of file + != partial("../../../../_includes/_scripts-include") From 0b917e0f93ae02563115c22cf8eb91ade81715e2 Mon Sep 17 00:00:00 2001 From: David East Date: Wed, 22 Apr 2015 05:37:58 -0700 Subject: [PATCH 4/9] Statements scss --- public/resources/css/main.scss | 2 +- public/resources/css/module/_statement.scss | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 public/resources/css/module/_statement.scss diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index 4facb1d628..5b11417a1a 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -38,7 +38,7 @@ @import 'module/modal'; @import 'module/shadow'; @import 'module/showcase'; - +@import 'module/statement'; /* * PRINT STYLES diff --git a/public/resources/css/module/_statement.scss b/public/resources/css/module/_statement.scss new file mode 100644 index 0000000000..836bdfd1fc --- /dev/null +++ b/public/resources/css/module/_statement.scss @@ -0,0 +1,6 @@ +.statement { + background: $mist; + padding: 20px 20px 10px 20px; + margin-bottom: 20px; + border-radius: 6px; +} From 5f08eecc58589342aca632e4d296a24d0d50534e Mon Sep 17 00:00:00 2001 From: David East Date: Wed, 22 Apr 2015 05:38:10 -0700 Subject: [PATCH 5/9] Docs updates. --- public/docs/js/latest/guide/_data.json | 3 ++- public/docs/js/latest/guide/displaying-data.jade | 7 ++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 9f6c110114..09c551c1c3 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -20,7 +20,8 @@ }, "making-components": { - "title": "Making Components" + "title": "Making Components", + "intro": "Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template." }, "talking-to-components": { diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index bfafc2dbf9..49d29905cf 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -1,13 +1,10 @@ -.callout.is-helpful - header Live Examples +.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 Date: Wed, 22 Apr 2015 05:42:47 -0700 Subject: [PATCH 6/9] Docs clean up. --- public/docs/js/latest/guide/displaying-data.jade | 2 ++ public/docs/js/latest/guide/setup.jade | 10 +++++----- public/docs/js/latest/guide/user-input.jade | 13 +++++++------ 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 49d29905cf..9365e4ab8a 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -5,6 +5,8 @@ .l-main-section + h2#section-displaying-controller-properties Displaying controller properties + p. Let's walk through how we'd display a property, a list of properties, and then conditionally show content based on state. diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade index 6c2d3acd43..118cad590a 100644 --- a/public/docs/js/latest/guide/setup.jade +++ b/public/docs/js/latest/guide/setup.jade @@ -1,10 +1,10 @@ +.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 - .callout.is-helpful - header 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. - h2#section-install-or-plunker Install Angular or Use Plunker p There are four steps to create any Angular app: ol diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade index a991bae389..e1967fa574 100644 --- a/public/docs/js/latest/guide/user-input.jade +++ b/public/docs/js/latest/guide/user-input.jade @@ -1,10 +1,11 @@ -.l-main-section +.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 TypeScript Example or TypeScript Example or ES5 Example. + .l-main-section + + h2#section-its-all-a-tree It's all a tree + p. As mentioned earlier, you build Angular applications as a tree of nested components. You've seen how to create a top-level component. You add child components to a parent component by using them in the parent component's @@ -83,5 +91,3 @@ p. Notice that in addition to using the <child> element in the parent template, you also need to add ChildComponent in ParentComponent's list of directives - p. - [TODO: Motivate communication between components with iterator example that passes index to the child] From ebbdc5dd9a0cdfd017c86401a51aa25ab35d6008 Mon Sep 17 00:00:00 2001 From: David East Date: Wed, 22 Apr 2015 05:55:25 -0700 Subject: [PATCH 8/9] Statement clean up. --- public/docs/js/latest/guide/_data.json | 2 +- public/docs/js/latest/guide/making-components.jade | 2 +- public/resources/css/module/_statement.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 09c551c1c3..cfd13a7df1 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -16,7 +16,7 @@ "user-input": { "title": "User Input", - "intro": "DOM events drive user input in Angular. You can use the native events you're used to like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements." + "intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all of the ins and outs of using the event syntax." }, "making-components": { diff --git a/public/docs/js/latest/guide/making-components.jade b/public/docs/js/latest/guide/making-components.jade index 3b782d5c2b..a4e3e29bf8 100644 --- a/public/docs/js/latest/guide/making-components.jade +++ b/public/docs/js/latest/guide/making-components.jade @@ -90,4 +90,4 @@ p. Notice that in addition to using the <child> element in the parent template, you also need to - add ChildComponent in ParentComponent's list of directives + add ChildComponent in ParentComponent's list of directives. diff --git a/public/resources/css/module/_statement.scss b/public/resources/css/module/_statement.scss index 836bdfd1fc..88a3188826 100644 --- a/public/resources/css/module/_statement.scss +++ b/public/resources/css/module/_statement.scss @@ -1,6 +1,6 @@ .statement { background: $mist; padding: 20px 20px 10px 20px; - margin-bottom: 20px; + margin-bottom: 40px; border-radius: 6px; } From 65868abf875a86900601ee5c30dc2e44b042589a Mon Sep 17 00:00:00 2001 From: David East Date: Wed, 22 Apr 2015 06:03:21 -0700 Subject: [PATCH 9/9] Remove domElement in examples. --- public/docs/js/latest/guide/_data.json | 2 +- public/docs/js/latest/guide/user-input.jade | 15 ++++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index cfd13a7df1..001d0e6f38 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -16,7 +16,7 @@ "user-input": { "title": "User Input", - "intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all of the ins and outs of using the event syntax." + "intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all the ins and outs of using the event syntax." }, "making-components": { diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade index e1967fa574..a88d287d6a 100644 --- a/public/docs/js/latest/guide/user-input.jade +++ b/public/docs/js/latest/guide/user-input.jade @@ -4,17 +4,18 @@ If you want to skip to the working examples you can check out these links on Plunker. TypeScript Example or addTodo() method and pass it the value. Since you created a reference called todotext, you can get the value with - todotext.domElement.value. + todotext.value. pre.prettyprint.lang-html code. - <button (click)="addTodo(todotext.domElement.value)">Add Todo</button> + <button (click)="addTodo(todotext.value)">Add Todo</button> p And then create the doneTyping() method on TodoList and handle adding the todo text. @@ -145,7 +146,7 @@ '</li>' + '</ul>' + '<input #textbox (keyup)="doneTyping($event)">' + - '<button (click)="addTodo(textbox.domElement.value)">Add Todo</button>', + '<button (click)="addTodo(textbox.value)">Add Todo</button>', directives: [angular.For, angular.If] }) ]; @@ -171,7 +172,7 @@ </ul> <input #todotext (keyup)="doneTyping($event)"> - <button (click)="addTodo(todotext.domElement.value)">Add Todo</button> + <button (click)="addTodo(todotext.value)">Add Todo</button> `, directives: [For, If] })