todoMVC_mvc框架是什么

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

依赖css

npm i todomvc-common todomvc-app-css

app.component.ts

import { 
Component} from '@angular/core';
const todos = [
{ 

id: 1,
title: '吃饭',
done: true
},
{ 

id: 1,
title: '工作',
done: false
},
{ 

id: 1,
title: '运动',
done: true
}
]
@Component({ 

selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { 

h_title = 'todo-angular';
public todos: { 

id: number,
title: string,
done: boolean
}[] = JSON.parse( window.localStorage.getItem('todos') || '[]');
// 该函数是一个特殊的angular生命周期钩子函数
// 它会在angular应用初始话的时候执行一次
ngOnInit() { 

window.onhashchange = () => { 

this.hashChangeHandler()
// 当用户点击了锚点的时候，我们需要获取当前的锚点标识
// 然后动态的将根组件visibility设置为当前点击的锚点标识
//注意 bind ,不然的话this就变成window了
window.onhashchange = this.hashChangeHandler.bind(this)
}
}
// 当angular组件数据发生改变的时候，ngDoCheck钩子被触发
// 在钩子函数中持久化数据
ngDoCheck(){ 

window.localStorage.setItem('todos', JSON.stringify(this.todos))
}
public currentEditing: { 

id: number,
title: string,
done: boolean
} = null
// 实现导航切换数据过滤
// 1. 提供一个属性，该属性会根据当前点击的连接返回过滤后的数据 filterTodos
// 2. 提供一个属性，用来存储当前点击的连接标识 visibility all active completed
// 3. 为连接提供点击事件，当点击导航链接的时候，改变
//
public visibility: string = 'all'
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)
}
return null
}
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) { 

this.todos.forEach(t => t.done = val)
}
removeTodo(index: number) { 

this.todos.splice(index, 1)
}
saveEdit(todo, e) { 

this.currentEditing = null
todo.title = e.target.value
}
handleEditUp(e) { 

const { 
keyCode, target} = e
if (keyCode === 27) { 

target.value = this.currentEditing.title
this.currentEditing = null
}
}
get remainingCount() { 

return this.todos.filter(t => !t.done).length
}
hashChangeHandler(){ 

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" ng-app="">
<header class="header">
<h1>待办事项</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus (keyup.enter)="addTodo($event)" >
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main" *ngIf="todos.length">
<input id="toggle-all" class="toggle-all" type="checkbox" [checked]="toggleAll">
<!-- (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 *ngFor="let todo of filterTodos; let i = index;" [ngClass]="{ editing: currentEditing === todo, completed: todo.done }">
<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.enter)="saveEdit(todo, $event)" (keyup)="handleEditUp($event)" (blur)="saveEdit(todo, $event)">
</li>
</ul>
</section>
<!-- This footer should be hidden by default and shown when there are todos -->
<footer class="footer" *ngIf="todos.length">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>{
{remainingCount}}</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>
</section>

style.css

/* You can add global styles to this file, and also import other style files */
@import url('~todomvc-common/base.css');
@import url('~todomvc-app-css/index.css');

tsconfig.json

"strict": false,

app.module.ts

import { 
 NgModule } from '@angular/core';
import { 
 BrowserModule } from '@angular/platform-browser';
import { 
FormsModule} from "@angular/forms";
import { 
 AppComponent } from './app.component';
@NgModule({ 

declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
}) export class AppModule { 
 }