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..001d0e6f38 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -10,15 +10,18 @@ }, "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 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": { - "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/_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") diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 2943ba134f..9365e4ab8a 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -1,24 +1,19 @@ -.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') +.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 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 @@ -82,6 +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 - p. - [TODO: Motivate communication between components with iterator example that passes index to the child] + add ChildComponent in ParentComponent's list of directives. diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade index fb7a44dafc..274f32e102 100644 --- a/public/docs/js/latest/guide/setup.jade +++ b/public/docs/js/latest/guide/setup.jade @@ -1,4 +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 + 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. @@ -178,7 +180,6 @@ p. In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not. - .code-box pre.prettyprint.lang-typescript(data-name="es5") code. diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade index 2f837680c0..a88d287d6a 100644 --- a/public/docs/js/latest/guide/user-input.jade +++ b/public/docs/js/latest/guide/user-input.jade @@ -1,16 +1,24 @@ -.l-main-section +.statement + h4 Live Examples p. - You can make your application respond to user input by associating events with functions in your controller - using the event syntax using () to surround the name of an event. + 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 +47,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 +56,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 +69,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 @@ -89,13 +97,13 @@ p. Lastly, specify the target of the click event binding as your controller's addTodo() method and pass it the value. Since you created a reference called todotext, you can get the value with - todotext.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. + p And then create the doneTyping() method on TodoList and handle adding the todo text. pre.prettyprint.lang-javascript code. @@ -138,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] }) ]; @@ -164,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] }) @@ -188,7 +196,3 @@ } bootstrap(TodoList); - - - - 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..88a3188826 --- /dev/null +++ b/public/resources/css/module/_statement.scss @@ -0,0 +1,6 @@ +.statement { + background: $mist; + padding: 20px 20px 10px 20px; + margin-bottom: 40px; + border-radius: 6px; +}