導語：

如果是新手的話 建議去這個網站看看：快速入門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 命令會構建本應用、啟動開發伺服器、監聽原始檔，並且當那些檔案    發生變化時重新構建本應用。

三、 基礎使用

1、繫結html 自動解析


this.h="<h2>這是一個 h2 用[innerHTML]來解析</h2>"

<div [innerHTML]="h"></div>



2、*ngFor普通迴圈

<ul>

    <li *ngFor="let item of list">

        {{item}}

    </li>

</ul>

3、迴圈的時候設定 key

<ul>

    <li *ngFor="let item of list;let i = index;">

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

    </li>

</ul>

4、	template 迴圈資料
<ul>

    <li template="ngFor let item of list">

        {{item}}

    </li>

</ul>

5、條件判斷	*ngIf

    <p *ngIf="list.length > 3">這是 ngIF 判斷是否顯示</p>

    <p template="ngIf list.length > 3">這是 ngIF 判斷是否顯示</p>


6、繫結屬性
    <div [id]="id" [title]="msg">除錯工具看看我的屬性</div>

    <div [hidden]=”id == 1 ”> 如果ID 等於1 的話 這個div會具有hidden 屬性 </div>
7、繫結事件
    <button class="button" (click)="getData()">
    在ts檔案中實現函式 遵循es6 的寫法
 

下面是利用對資料的操作實現TODOList程式碼：

首先新建一個元件，這個元件會自動注入到AppComponent中,在 app.module.ts檔案中可以檢視，之後使用新生成的元件

這些步驟官網中文文件上都有，下面就直接上程式碼了：

元件資料夾下新建一個class：

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

之後再是HTML 程式碼 放在component.component.html 中

<h1 style="align-content: center">
  TODO
</h1>
<input type="text" [(ngModel)]="data" placeholder="{{data}}" (keydown)="addData($event)">
<hr>
<hr>
<h2>
  將要做的事情
</h2>
<ul>
  <li *ngFor="let todo of WILLTODOS;let key = index" [hidden]="todo.status == 2">
    <button (click)="changeData(key, 2)">已完成</button>
    <span>{{key}}-------{{todo.msg}}</span>
    <button (click)="deleDate(key)">刪除</button>
  </li>
</ul>
<br>
<hr>
<h2>
  已經完成的事情
</h2>
<ul>
  <li *ngFor="let todo of WILLTODOS;let key = index" [hidden]="todo.status == 1">
    <button (click)="changeData(key, 1)">再做一遍</button>
    <span>{{key}}-------{{todo.msg}}</span>
    <button (click)="deleDate(key)">刪除</button>
  </li>
</ul>
<br>
 

最後是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);
  }
}

最終效果：