Angular项目 TodoMVC

起步

准备
- 下载静态模板
  - git clone https://github.com/tastejs/todomvc-app-template.git --depth 1
  - 在静态文件根目录下 npm install
- 初始化项目
  - ng new todomvc-angular
  - 在进行基础的选择之后，ctrl+c打断下载
  - 打开新建的项目目录，CMD进入cnpm install
  - 启动npm start或者ng serve
  - angular后台服务器开启http://localhost:4200/
将静态模板装载到angular脚手架生成的项目文件中
- 将静态文件中的index.html文件HTML骨架复制粘贴到项目app文件夹下的app.component.html文件中
- 在项目文件的根目录中引入安装包todomvc-common todomvc-app-css,cnpm i todomvc-common todomvc-app-css
- 在项目文件根目录中，找到angular.json文件，找到styles全局配置文件路径文件，打开此路径中的文件，引入全局css配置，依赖文件
  - 这里载入的第三方包中的样式文件可以不写路径，直接写第三方包名称路径即可
  - 这里的CSS样式也可以写入局部CSS配置中
  - @import url('todomvc-app-css/index.css');
  - @import url('todomvc-common/base.css');
  - 至此，静态页面完全移植至angular项目中
TodoMVC需求说明
- 数据列表显示
  - 有数据
  - 无数据
- 添加任务
  - 页面初始化的时候文本框获得焦点
  - 敲回车添加到任务列表中
  - 不允许有非空数据
  - 添加完成清空文本框
- 标记所有任务完成/未完成
- 任务项
  - 切换任务完成状态
  - 删除任务项
  - 双击label进入编辑模式
- 编辑任务项
  - 编辑文本框自动获取焦点
  - 在编辑文本框中敲回车或者失去焦点
  - 输入状态按下esc取消编辑
- 显示所有未完成任务数
  - 模板逻辑
  - 方法
  - 计算属性
- 清除所有已完成任务
- 将数据持久化到localStorage中
- 路由状态切换
  - 点击链接过滤数据的输出
  - 刷新保持过滤状态
  - 切换点击链接的样式
angular列表循环的写法
- *ngFor = "表达式"
- <li *ngFor="let todo of todos">{{todo.title}}</li>
angular条件渲染
- *ngIf="todos.length"
- 若是在某标签中写上为假的判断*ngIf="false"，则此标签隐藏
angular模板语法之层级包裹
- 原先写法，在需要的模块架构之上，加上统一的div，然后写上判断语句*ngIf="todos.length"
- 模板语法：将div改成<ng-template [ngIf]="todos.length"></ng-template>

<ng-template [ngIf]="todos.length"></ng-template>

angular事件的写法
- (keyup.enter)="addTodo($event)"
- 在addTodo事件函数中，this指向数据对象，这点和Vue相似，事件指向数据

<input 
  class="new-todo" 
  placeholder="What needs to be done?" 
  autofocus 
  (keyup.enter)="addTodo($event)"
>

angular双向数据绑定
- 在主模块中引入import { FormsModule } from '@angular/forms';
- 在主模块下面的依赖列表中加入：FormsModule
- [(ngModel)]="todo.done"

<input 
  class="toggle" 
  type="checkbox"
  [(ngModel)]="todo.done"
>

angular样式绑定
- [ngClass]="{completed: todo.done}"

<li 
  *ngFor="let todo of todos"
  [ngClass]="{completed: todo.done}"
>

get set属性存取器
- get 数据写入页面
  - 当所有的t.done为真时，返回数据true，写入checked中
- set 数据取出页面
  - 当input状态改变时，将checked的值传入函数，然后子类每项赋值

  // 子开关控制总开关，全选总开关选中
  // 所有的t.done为真时，返回数据，存入checked
  get toggleAll(){
    return this.todos.every(t => t.done)
  }
  // 总开关控制子开关，全选全不选
  // 当总开关触发时`$event.target.checked`
  // 当input状态改变时，将checked的值传入函数，然后每项赋值
  set toggleAll(val){
    this.todos.forEach(t => t.done = val)
  }

angular获取当前索引
- 在for循环时，拿下索引变量i
- 将索引变量传参给事件函数removeTodo(i)
- 索引函数得到当前索引值

<li 
  *ngFor="let todo of todos; let i = index;"
  [ngClass]="{completed: todo.done}"
>
  <button 
    class="destroy"
    (click)='removeTodo(i)'
  ></button>
</li>

removeTodo(index: number){
  this.todos.splice(index, 1)
  console.log(index);
}

删除当前项方法

  removeTodo(index: number){
    this.todos.splice(index, 1)
  }

ngClass属性
- 类名: 布尔判断

<li 
  *ngFor="let todo of todos; let i = index;"
  [ngClass]="{
    completed: todo.done,
    editing: currentEditing === todo
  }"
></li>

关于选择当前对象
- 在循环对象创建中，是一个对象数组
- 因此，额外的创建一个空对象用来装载当前数据，以索引值为契机
- 然后，将装载的数据在对象数组中遍历匹配
- 匹配成功，即为选中当前对象
- 取消选择，只要将临时的对象清空即可

const todos = [
  {
    id: 1,
    title: '摄影',
    done: true
  },
  {
    id: 2,
    title: '设计',
    done: true
  },
  {
    id: 3,
    title: '程序',
    done: false
  }
]
// 定义对象数组
public todos: {
  id: number,
  title: string,
  done: boolean
}[] = todos
// 定义匹配对象
public currentEditing: {
  id: number,
  title: string,
  done: boolean
} = null

<!-- 将匹配对象在数组对象中遍历寻找，相同即执行 -->
<li 
  *ngFor="let todo of todos; let i = index;"
  [ngClass]="{
    completed: todo.done,
    editing: currentEditing === todo
  }"
>
<!-- 鼠标双击后，将当前值传给匹配对象 -->
<label
  (dblclick)="currentEditing = todo"
>{{ todo.title }}</label>
</li>

解构赋值
- e就是$event的传参

const {keyCode, target} = e;

过滤器
- 过滤器中的回调函数用箭头函数，可以避免this问题

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

获取标签内容
- e.srcElement.innerHTML
- e.srcElement.innerText
实现导航切换数据过滤的功能

  public visibility: string = "all"
  get filterTodos(){
    if(this.visibility === 'all'){
      return todos
    }else if(this.visibility === 'active'){
      return todos.filter(t => !t.done)
    }else if(this.visibility === 'completed'){
      return todos.filter(t => t.done)
    }
  }

初始化钩子函数
- 初始化钩子函数 ngOnInit()
- 该函数是一个特殊的Angular生命周期钩子函数
- 他会在Anhular应用初始化的时候执行一次
哈希函数
- 哈希函数即是描点函数

  ngOnInit(){
    // Angular初始化时，监听hash的变化
    // 此处要用箭头函数
    window.onhashchange = () => {
      // 当用户点击锚点时，我们需要获取当前的锚点链接
      // 然后动态的将根组件中的visibility设置为当前点击的锚点标识
      const hash = window.location.hash;
      console.log(hash);
    }
  }

实现导航切换数据过滤的功能
- 提供一个属性，该属性会根据当前点击的链接返回过滤之后的数据
  - filterTodos
- 提供一个属性，用来存储当前点击的链接标识
  - visibility 是一个字符串
  - all active completed
- 为链接添加点击事件，当点击导航链接的时候，改变
  - 在方法内写出选择判断，当点击某个值时，将选项匹配给visibility
  - 改变li遍历创建时的规则，由全部创建改为，filterTodos方法返回的数据

<li 
  *ngFor="let todo of filterTodos; let i = index;"
  [ngClass]="{
    completed: todo.done,
    editing: currentEditing === todo
  }"
>
</li>

public visibility: string = "all"
ngOnInit(){
  // Angular初始化时，监听hash的变化
  // 此处要用箭头函数
  window.onhashchange = () => {
    // 当用户点击锚点时，我们需要获取当前的锚点链接
    // 然后动态的将根组件中的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
    }
  }
}
get filterTodos(){
  if(this.visibility === 'all'){
    return todos
  }else if(this.visibility === 'active'){
    return todos.filter(t => !t.done)
  }else if(this.visibility === 'completed'){
    return todos.filter(t => t.done)
  }
}

刷新保存过滤状态
- 将以上代码中，哈希判断的代码作为另一个方法
- 在钩子函数初始化时，执行一次哈希判断
- 然后再在哈希事件中调用
- 由于在哈希事件中，this指向window，因此，此时的this需要bind绑定

  ngOnInit(){
    // Angular初始化时，监听hash的变化
    // 此处要用箭头函数
    this.hashchangeHandler();
    window.onhashchange = this.hashchangeHandler.bind(this)
  }
  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
    }
  }

数据改变触发的钩子函数
- ngDoCheck()
- 当数据发生变化时，刷新数据
数据本地永久化存储
- todos = JSON.parse(window.localStorage.getItem('todos') || '[]')
  - 将字符串转化为JSON数组
  - 从本地数据库window.localStorage读取数据
- window.localStorage.setItem('todos', JSON.stringify(this.todos))
  - 将JSON数组转化为字符串
  - 将页面更新后的数据存储到本地数据库window.localStorage中

  public todos: {
    id: number,
    title: string,
    done: boolean
  }[] = JSON.parse(window.localStorage.getItem('todos') || '[]')

  ngDoCheck(){
    window.localStorage.setItem('todos', JSON.stringify(this.todos))
  }