todolist小案例
走外国服务器，￣□￣｜｜
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
核心组件app.component.ts
发现这俩不是同一类文件，哈哈哈，٩(๑>◡<๑)۶
import { Component } from '@angular/core';
const todos = [
{
id: 1,
title: '吃饭',
done: true
},
{
id: 2,
title: '唱歌',
done: false
},
{
id: 3,
title: '写代码',
done: true
}
]
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public todos: {
id: number,
title: string,
done: boolean
}[] = JSON.parse(window.localStorage.getItem('todos') || '[]')
public visibility: string = 'all'
public currentEditing: {
id: number,
title: string,
done: boolean
} = null
// 该函数是一个特殊的 Angular 生命周期钩子函数
// 它会在 Angular 应用初始化的时候执行一次
ngOnInit () {
// 初始化的时候手动调用一次
this.hashchangeHandler()
// 注意：这里要 bind this绑定
window.onhashchange = this.hashchangeHandler.bind(this)
}
// 当 Angular 组件数据发生改变的时候，ngDoCheck 钩子函数会被触发
// 我们要做的就是在这个钩子函数中去持久化存储我们的 todos 数据
ngDoCheck() {
window.localStorage.setItem('todos', JSON.stringify(this.todos))
}
get filterTodos () {
if (this.visibility === 'all') {
return this.todos
} else if (this.visibility === 'active') {
return this.todos.filter(t => !t.done)
} else if (this.visibility === 'completed') {
return this.todos.filter(t => t.done)
}
}
// 实现导航切换数据过滤的功能
// 1. 提供一个属性，该属性会根据当前点击的链接返回过滤之后的数据
// filterTodos
// 2. 提供一个属性，用来存储当前点击的链接标识
// visibility 字符串
// all、active、completed
// 3. 为链接添加点击事件，当点击导航链接的时候，改变
//
addTodo (e): void {
const titleText = e.target.value
if (!titleText.length) {
return
}
const last = this.todos[this.todos.length - 1]
this.todos.push({
id: last ? last.id + 1: 1,
title: titleText,
done: false
})
// 清除文本框
e.target.value = ''
}
get toggleAll () {
return this.todos.every(t => t.done)
}
set toggleAll (val: boolean) {
this.todos.forEach(t => t.done = val)
}
removeTodo (index: number): void {
this.todos.splice(index, 1)
}
saveEdit (todo, e) {
// 保存编辑
todo.title = e.target.value
// 去除编辑样式
this.currentEditing = null
}
handleEditKeyUp (e) {
const {keyCode, target} = e
if (keyCode === 27) {
// 取消编辑
// 同时把文本框的值恢复为原来的值
target.value = this.currentEditing.title
this.currentEditing = null
}
}
get remaningCount () {
return this.todos.filter(t => !t.done).length
}
hashchangeHandler () {
// 当用户点击了锚点的时候，我们需要获取当前的锚点标识
// 然后动态的将根组件中的 visibility 设置为当前点击的锚点标识
const hash = window.location.hash.substr(1)
switch (hash) {
case '/':
this.visibility = 'all'
break;
case '/active':
this.visibility = 'active'
break;
case '/completed':
this.visibility = 'completed'
break;
}
}
// 清除所有已完成任务项
clearAllDone () {
this.todos = this.todos.filter(t => !t.done)
}
}
模板app.component.html
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input
class="new-todo"
placeholder="What needs to be done?"
autofocus
(keyup.enter)="addTodo($event)">
</header>
<ng-template [ngIf]="todos.length">
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<input
id="toggle-all"
class="toggle-all"
type="checkbox"
(change)="toggleAll = $event.target.checked"
[checked]="toggleAll">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<!--
li 是每一个任务项
每个任务项有三种状态：
正常状态 没有样式
完成状态 completed
编辑状态 editing
-->
<li
*ngFor="let todo of filterTodos; let i = index;"
[ngClass]="{
completed: todo.done,
editing: currentEditing === todo
}">
<div class="view">
<input
class="toggle"
type="checkbox"
[(ngModel)]="todo.done">
<label (dblclick)="currentEditing = todo">{{ todo.title }}</label>
<button
class="destroy"
(click)="removeTodo(i)"></button>
</div>
<input
class="edit"
[value]="todo.title"
(keyup)="handleEditKeyUp($event)"
(keyup.enter)="saveEdit(todo, $event)"
(blur)="saveEdit(todo, $event)">
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>{{ remaningCount }}</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a [ngClass]="{
selected: visibility === 'all'
}" href="#/">All</a>
</li>
<li>
<a [ngClass]="{
selected: visibility === 'active'
}" href="#/active">Active</a>
</li>
<li>
<a [ngClass]="{
selected: visibility === 'completed'
}" href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button
(click)="clearAllDone()"
class="clear-completed">Clear completed</button>
</footer>
</ng-template>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>