Angular2.x 的学习笔记及实现TodoList

导语：

如果是新手的话 建议去这个网站看看：快速入门Angular

一、 环境

好的工具能让开发更加简单快捷。 我这里使用的 IDE

Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

在开始工作之前，需要电脑上安装node.js

注意：node版本是8.x以上 npm版本是5.x 以上 版本越老越容易出错，更新的版本则没有问题

安装完成node后，全局安装 Angular CLI  可以用cnpm （阿里的，速度比较快）

命令：npm install -g @angular/cli

二、创建项目

利用Angular CLI 创建Angular项目 ：TODOList

命令：ng new TodoList/TODOList

执行完成后，执行命令文件处会生成一个Angular项目，进入项目命令，启动服务

命令：ng serve --open

命令简析 ：ng serve 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件    发生变化时重新构建本应用。

--open 标志会打开浏览器，并访问 http://localhost:4200/。

三、 基础使用

1、绑定html 自动解析


this.h="
这是一个 h2 用[innerHTML]来解析
"





2、*ngFor普通循环



    


        {{item}}

    



3、循环的时候设置 key



    


        {{item}} --{{i}}

    



4、	template 循环数据


    


        {{item}}

    



5、条件判断	*ngIf

    
这是 ngIF 判断是否显示

    
这是 ngIF 判断是否显示


6、绑定属性
    
调试工具看看我的属性

    
 如果ID 等于1 的话 这个div会具有hidden 属性 
7、绑定事件
    
    在ts文件中实现函数 遵循es6 的写法

下面是利用对数据的操作实现TODOList代码：

首先新建一个组件，这个组件会自动注入到AppComponent中,在 app.module.ts文件中可以查看，之后使用新生成的组件

这些步骤官网中文文档上都有，下面就直接上代码了：

组件文件夹下新建一个class：

export class TODO {
  msg: string;
  status: number;
}

之后再是HTML 代码 放在component.component.html 中

  TODO





  将要做的事情


  

    已完成
    {{key}}-------{{todo.msg}}
    删除
  





  已经完成的事情


  

    再做一遍
    {{key}}-------{{todo.msg}}
    删除
  

最后是ts代码 放在component.component.ts文件中

import {Component, OnInit} from '@angular/core';
import {TODO} from './Todo';

@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.css']
})
export class ComponentComponent implements OnInit {
  public WILLTODOS: TODO[] = [];
  /*初始化数组*/
  data = '添加要做的事件';

  constructor() {
  }

  ngOnInit() {
  }

  addData(e) {
    if (e.keyCode === 13) {
      const obj: TODO = {
        /**声明变量*/
        msg: this.data,
        status: 1
      };
      // this.things.msg = this.data;
      // this.things.status = 1;
      this.WILLTODOS.push(obj);
      this.data = '';
    }
  }

  changeData(key, status) {
    this.WILLTODOS[key].status = status;
  }

  deleDate(key) {
    this.WILLTODOS.splice(key, 1);
  }
}

最终效果：