构建一个简单的to-do应用。
to-do列表项格式如下:
interface Todo {
completed: boolean;
label: string;
}
首先导入所有需要用到的模块:
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
然后声明组件以及对应的元数据:
@Component({
selector: 'app',
templateUrl: './app.html',
styles: [
`ul li {
list-style: none;
}
.completed {
text-decoration: line-through;
}`
]
})
这里我们把Todo组件的选择器指定为app标签,然后添加模版的url地址,指向app.html文件,然后还使用了styles属性,其作用是给组件设置样式。
接下来是Todo应用里面模板所对应的controller实现:
class TodoCtrl {
todos: Todo[] = [{
label: 'Buy milk',
completed: false
}, {
label: "Save the world",
completed: false
}];
name: string = 'John';
addTodo(label) {
this.todos.push({
label,
completed: false
})
}
removeTodo(idx) {
this.todos.splice(idx, 1);
}
toggleCompletion(idx) {
let todo = this.todos[idx];
todo.completed = !todo.completed;
}
}
bootstrap(TodoCtrl);
在类声明中,我们初始化了todos属性数组,在里面添加了两个todo项目:
{
label: 'Buy milk',
completed: false
}, {
label: "Save the world",
completed: false
}
然后更新模板把这些项目渲染出来:
<ul>
<li *ngFor="let todo of todos; let index = index" [class.completed]="todo.completed">
<input type="checkbox" [checked]="todo.completed"
(change)="toggleCompletion(index)">
{{todo.label}}
</li>
</ul>
在上述模板中,我们遍历了控制器todos属性里面的所有todo项目。为每一个todo项目创建了一个checkbox,用来切换项目的完成状态,同时我们还利用取值指令渲染了todo项的label。
其中可看到一些之前解释过的语法:
- 使用(change)="statement"绑定了checkbox的change事件;
- 使用[checked]="expr"绑定到了todo项目上的对应属性。
为了在已完成的todo项目上显示一个中划线,我们绑定了标签的class.completed属性。为了在所有已完成的项目上应用completed这个样式类,我们使用了[class.completed]="todo.completed"。通过这种方式声明:需要根据todo.completed这个表达式的值来决定是否应用conpleted这个样式类。
与绑定样式的语法类似,angular也允许在标签上绑定style和attribute。举例:
<td [attr.colspan]="colspanCount"></td>
上述代码绑定了td标签的attr中colspan属性。
<div [style.backgroundImage]="expression"></div>
上述代码绑定了div标签的style中backgroundImage属性。