todoMVC_mvc框架是什么

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 { 
    }