parent
3137359c7d
commit
9e89701c30
|
@ -35,7 +35,7 @@
|
||||||
|
|
||||||
<!-- 4. Display the application -->
|
<!-- 4. Display the application -->
|
||||||
<body>
|
<body>
|
||||||
<todo class="container" style="display: block">Loading...</todo>
|
<todo-app class="container" style="display: block">Loading...</todo-app>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -5,7 +5,7 @@ import {TodoList} from './todo_list';
|
||||||
import {TodoForm} from './todo_form';
|
import {TodoForm} from './todo_form';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'todo',
|
selector: 'todo-app',
|
||||||
template: `
|
template: `
|
||||||
<h2>Todo</h2>
|
<h2>Todo</h2>
|
||||||
<span>{{remaining}} of {{todos.length}} remaining</span>
|
<span>{{remaining}} of {{todos.length}} remaining</span>
|
||||||
|
|
|
@ -12,7 +12,7 @@ import {Todo} from './todo';
|
||||||
],
|
],
|
||||||
template: `
|
template: `
|
||||||
<ul class="unstyled">
|
<ul class="unstyled">
|
||||||
<li *ngFor="var todo of todos">
|
<li *ngFor="#todo of todos">
|
||||||
<input type="checkbox" [(ngModel)]="todo.done">
|
<input type="checkbox" [(ngModel)]="todo.done">
|
||||||
<span class="done-{{todo.done}}">{{todo.text}}</span>
|
<span class="done-{{todo.done}}">{{todo.text}}</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -26,7 +26,7 @@ div
|
||||||
p.text-body Groups of coordinated components divide the responsibilities of our application. This ToDo list app has a separate component for the form, the list, and the core app logic. Where the previous example component referenced templates in separate files, this one shows using inline templates.
|
p.text-body Groups of coordinated components divide the responsibilities of our application. This ToDo list app has a separate component for the form, the list, and the core app logic. Where the previous example component referenced templates in separate files, this one shows using inline templates.
|
||||||
p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion.
|
p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion.
|
||||||
p(style='text-align:right')
|
p(style='text-align:right')
|
||||||
md-button.md-primary(href='http://plnkr.co/edit/JvjRDbhxp3UpMzZb3IAy?p=preview' target='_blank')
|
md-button.md-primary(href='http://plnkr.co/edit/q6DN6PztYuckF2mpRxQG?p=preview' target='_blank')
|
||||||
span.icon-open-in-new
|
span.icon-open-in-new
|
||||||
| Try in Plunker
|
| Try in Plunker
|
||||||
+makeTabs('../docs/_fragments/homepage-todo/ts/src/todo_app.ts,../docs/_fragments/homepage-todo/ts/src/todo_form.ts,../docs/_fragments/homepage-todo/ts/src/todo_list.ts,../docs/_fragments/homepage-todo/ts/src/todo.ts,../docs/_fragments/homepage-todo/ts/src/index.html', null, 'todo_app.ts,todo_form.ts,todo_list.ts,todo.ts,index.html')
|
+makeTabs('../docs/_fragments/homepage-todo/ts/src/todo_app.ts,../docs/_fragments/homepage-todo/ts/src/todo_form.ts,../docs/_fragments/homepage-todo/ts/src/todo_list.ts,../docs/_fragments/homepage-todo/ts/src/todo.ts,../docs/_fragments/homepage-todo/ts/src/index.html', null, 'todo_app.ts,todo_form.ts,todo_list.ts,todo.ts,index.html')
|
||||||
|
|
Loading…
Reference in New Issue