和我一塊兒入坑，Angular入門，Angular版的ToDoList

時間 2019-11-06

標籤一塊兒 angular 入門 todolist 欄目 AngularJS 简体版

原文原文鏈接

和我一塊兒入坑-Angular入門-Angular版的ToDoList

本項目是仿照這個作滴 ToDoList 。使用angular實現這個代辦事項功能。完整的項目在這裏GitHub。css

（一）基本功

入坑前不得先看看文檔嘛，Angular quickstart 。
而後開擼~html

前置項
安裝Node ，須要注意版本，node 6.9.x 和 npm 3.x.x。
而後全局安裝 Angular CLI 。前端
```
npm install -g @angular/cli
```
建立項目vue
```
ng new ng-first
```
啓動開發服務器node
```
cd ng-first
ng serve --open
```
瀏覽器自動打開 http://localhost:4200/ ，看到了ng的標，是否是好激動 （手動滑稽）。git
建立組件
這個操做會直接建立文件，並在根組件配置。github
```
ng g component components/todolist
```
建立服務
保持隊形，再來一個。npm
```
ng g service services/storage
```
小試牛刀，打個招呼
按照國際慣例，先來問個好！
在app.component中插入自定義組件app-todolist，這個名字取決於 todolist.component.ts中selector: 'app-todolist'。數組
```

<app-todolist></app-todolist>
```
繼續，在todolist.component.ts中定義一個變量msg,這種語法是ts的默認套路。 （手動捂臉，其實我也不太會ts啦）瀏覽器
```
//todolist.component.ts
export class TodolistComponent implements OnInit {
  public msg: any = 'Hello World !';

  constructor() { }

  ngOnInit() {
  }

}
```
在todolist.component.html中綁定數據
```
//todolist.component.html
<h3> {{msg}} </h3>
```
```
/*todolist.component.css*/
h3{
  text-align: center;
  color:  #369;
}
```
切到瀏覽器，噔噔噔噔！

哇咔咔，下面開始進入正題。

（二）html和css部分

這個不重要，不是本文重點，打開控制檯抄一抄就行了（好不要臉呀）。

這是html,直接複製到todolist.component.html，去掉一些用不到的代碼。

<!--todolist.component.html-->
<header>
  <section>
    <label for="title">ToDoList</label>
    <input type="text" placeholder="添加ToDo"/>
  </section>
</header>
<section>
  <h2>正在進行
    <span>1</span>
  </h2>
  <ol class="demo-box">
    <li>
      <input type="checkbox">
      <p>記得吃藥</p>
      <a>-</a>
    </li>
  </ol>
  <h2>已經完成
    <span>1</span>
  </h2>
  <ul>
    <li draggable="true">
      <input type="checkbox"checked="checked">
      <p>記得吃飯</p>
      <a>-</a>
    </li>
  </ul>
</section>
<footer>
  Copyright &copy; 2014 todolist.cn
  <a>clear</a>
</footer>

這是css樣式,直接複製到todolist.component.css，把body的樣式複製到src目錄下的styles.css。

/*todolist.component.css*/
header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
section{margin:0 auto;}
label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
input:focus{outline-width:0}
h2{position:relative;}
span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#E6E6FA;line-height:22px;text-align:center;color:#666;font-size:14px;}
ol,ul{padding:0;list-style:none;}
li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
p{margin: 0;}
li p input{top:3px;left:40px;width:70%;height:20px;line-height:14px;text-indent:5px;font-size:14px;}
li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
    padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
ol li{cursor:move;}
ul li{border-left: 5px solid #999;opacity: 0.5;}
li a{position:absolute;top:2px;right:5px;display:inline-block;width:14px;height:12px;border-radius:14px;border:6px double #FFF;background:#CCC;line-height:14px;text-align:center;color:#FFF;font-weight:bold;font-size:14px;cursor:pointer;}
footer{color:#666;font-size:14px;text-align:center;}
footer a{color:#666;text-decoration:none;color:#999;}
@media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
@media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}

/*src/styles.css*/
body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}

複製完以後，頁面應該長這樣。

好了，以上是沒必要要的前戲 （手動滑稽）。

（三）實現ToDoList的功能

研究 ToDoList 上的js源碼，大概的邏輯就是用戶輸入待辦事項後，添加一個done屬性，默認值爲false,表示正在進行；點擊完成按鈕，done屬性變爲true,表示已經完。且能夠刪除。瀏覽器刷新後，數據仍然存在，由於使用了HTML5的localStorage。

添加代辦事項的功能

聲明todo變量

//todolist.component.ts
export class TodolistComponent implements OnInit {
  public todo: any = ''; 
  public todoList = [];

  constructor() { }

  ngOnInit() {
  }
  
  addTodo(e) {
    let todoObj = {
      todo: this.todo,
      done: false
    }

    if (e.keyCode == 13) {  //表示回車按鈕
      this.todoList.push(todoObj);
      this.todo = '';       //清空輸入框
    }
  }
}

<!--todolist.component.html-->
<header>
  <section>
    <label for="title">ToDoList</label>
    <input type="text" [(ngModel)]='todo' (keydown)='addTodo($event)' placeholder="添加ToDo" />
  </section>
</header>

[(ngModel)]是一個Angular語法，用於把todo綁定到輸入框中。它的數據流是雙向的：從屬性到輸入框，而且從輸入框回到屬性。

到這一步的時候，控制檯報錯啦。
解救的辦法就是咱們必須選擇使用FormsModule模塊。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //NgModel lives here

@NgModule({
  
  imports: [
    BrowserModule, 
    FormsModule  //import the FormsModule before binding with [(ngModel)]
  ],
  
})

循環添加的事項

添加內置指令*ngFor,循環列表。

<h2>正在進行
    <span>{{todoList.length}}</span>
  </h2>
  <ol class="demo-box">
    <li *ngFor="let item of todoList" >
      <input type="checkbox">
      <p>{{item.todo}}</p>
      <a>-</a>
    </li>
  </ol>

能看到添加的事項咯。

切換事項完成與否以及刪除該事項

綁定changeTodo、deleteTodo事件

<h2>正在進行
    <span>{{todoList.length}}</span>
  </h2>
  <ol class="demo-box">
    <li *ngFor="let item of todoList;let key = index" >
      <input type="checkbox" (click)="changeTodo(key,true)">
      <p>{{item.todo}}</p>
      <a (click)="deleteTodo(key,true)">-</a>
    </li>
  </ol>
  <h2>已經完成
    <span>{{doneList.length}}</span>
  </h2>
  <ul>
    <li *ngFor="let item of doneList;let key = index" >
      <input type="checkbox" (click)="changeTodo(key,false)" checked='checked'>
      <p>{{item.todo}}</p>
      <a (click)="deleteTodo(key,false)">-</a>
    </li>
  </ul>

將添加的事項和已完成的事項分爲兩個數組，（或者放在一個數組裏，而後根據done的值來控制是否顯示），可是我以爲分兩個比較容易操做。

public doneList = [];  //再聲明一個已完成的數組
  
  deleteTodo(index, done) {
    if (done) {
      this.todoList.splice(index, 1);
    } else {
      this.doneList.splice(index, 1);
    }
  }
  
  changeTodo(index, done) {
    if (done) {
      var tempTodo = this.todoList[index]
      this.doneList.push(tempTodo);
      this.todoList.splice(index, 1);
    } else {
      var tempDone = this.doneList[index]
      this.todoList.push(tempDone);
      this.doneList.splice(index, 1);
    }

  }

到此，這個功能就算完成啦~
等等，刷新頁面，歐漏，剛剛輸入的事項不見了。
這個時候，localStorage閃亮登場！！

建立StorageService服務

爲了避免再把相同的代碼複製一遍又一遍，咱們要建立一個單一的可複用的數據服務，而且把它注入到須要它的那些組件中。

在（一）基本功中第6步，建立服務時，angular-cli已經幫咱們生成了一個服務的基本結構。
建立服務，方便在任何地方使用。

//storage.service.ts
export class StorageService {

  constructor() { }
  
  setItem(key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  }
  getItem(key) {
    return JSON.parse(localStorage.getItem(key))
  }

}

使用該服務，只須要注入它。

//todolist.component.ts
import { StorageService } from '../../services/storage.service'  //導入服務
...
constructor(private storage: StorageService) { } //注入服務

好了，咱們就能夠輕鬆愉快的使用它了。

將數據存到localStorage

使用this.storage就可使用封裝好的服務。
每次操做數據後都要存一遍。是否是有點雞肋~

addTodo(e) {
    let todoObj = {
      todo: this.todo,
      done: false
    }

    if (e.keyCode == 13) {
      var tempList = this.storage.getItem('todoList');
      if (tempList) {
        tempList.push(todoObj)
        this.storage.setItem('todoList', tempList);
      } else {
        var tempData = []
        tempData.push(todoObj)
        this.storage.setItem('todoList', tempData);
      }
      this.todoList.push(todoObj);
      this.todo = '';
    }
  }
  
  deleteTodo(index, done) {
    if (done) {
      this.todoList.splice(index, 1);
      this.storage.setItem('todoList', this.todoList)
    } else {
      this.doneList.splice(index, 1);
      this.storage.setItem('doneList', this.doneList)
    }
  }
  
  changeTodo(index, done) {
    if (done) {
      var tempTodo = this.todoList[index]
      console.log(tempTodo)
      this.doneList.push(tempTodo);
      console.log(this.doneList)
      this.todoList.splice(index, 1);
      this.storage.setItem('todoList', this.todoList)
      this.storage.setItem('doneList', this.doneList)
    } else {
      var tempDone = this.doneList[index]
      this.todoList.push(tempDone);
      this.doneList.splice(index, 1);
      this.storage.setItem('todoList', this.todoList)
      this.storage.setItem('doneList', this.doneList)
    }
  }

初始事件

OnInit接口的鉤子方法叫作ngOnInit， Angular在建立組件後馬上調用它。

個人理解就是，相似於vue中的mounted？

ngOnInit() {
    this.initTodo();
  }
  initTodo() {
    var todoArr = this.storage.getItem('todoList');
    if (todoArr) {
      this.todoList = todoArr
    }
    var doneArr = this.storage.getItem('doneList');
    if (doneArr) {
      this.doneList = doneArr
    }
  }

而後，大功告成！

還有頁腳的clear按鈕

<!--todolist.component.html-->
<footer>
  Copyright &copy; 2014 todolist.cn
  <a (click)="clearData()">clear</a>
</footer>

clearData() {
    localStorage.clear();
    this.todoList = [];
    this.doneList = [];
  }

說在後面的話

還有拖拽排序的的功能，不寫了。

完整的項目在這裏GitHub。前端小白，仍有不足，請賜教~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。