本文使用 Angular 2 搭建一个 TODO MVC 的例子。如果你不知道什么是 TODO MVC 的话，引用官方的一句话是：“ToDoMVC Helping you select an MV* framework”。如果你没听说过什么是 TODO MVC，下图是本文完成后的大概样子。

本文需要做到：

• 使用 Angular Cli 初始化一个 TODO MVC 项目。
• 创建一个 Todo 类。用来描述 todo 的信息。
• 创建一个 TodoService，用来对 todo 信息的增删改查。
• 使用 AppComponent 来向用户展示。

1. 使用 Angular CLI 来初始化你的 Todo Application

使用 Angular CLI 是一个最简单高效的方法来创建你的 Angular 项目。如果你对 Angular 还不熟悉的话，可以看看我之前写的一篇文章，对 Angular 的历史,核心及项目结构有一个了解。

• 安装 Angular CLI

  新版的angular-cli已改名成@angular/cli，更符合angular官方的命名规则

  >npm install -g @angular/cli

  等待安装完成后，若没有报错信息，在cmd中输入一下命令进行验证

  >ng -v

      _                      _                 ____ _     ___/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|/ △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___||___/@angular/cli: 1.1.0node: 6.10.3os: win32 x64
  

  出现以上结果，证明 angular cli 安装成功

• 初始化你的项目

  使用 angular-cli 创建第一个工程。ng new 工程名

  >ng new todo-app

  请耐心等待。 创建新项目需要花费很多时间，安装npm包需要比较长的时间。

• 启动服务

  >cd todo-app

  >ng serve

  正常情况下，启动成功后浏览器会自动打开。或者你可以使用 http://localhost:4200/. 来访问。

2. 创建 Todo Class

• 使用 Angular CLI 创建 Todo 对象

  ng g cl Todo

  该命令会创建一个 TypeScript 类:

  src/app/todo.ts

  文件 todo.ts 内容很简单，如下(当然你也可以手动创建）:

  export class Todo {
  }
  

• 修改 todo 对象

  export class Todo {id: number;title: string = '';complete: boolean = false;constructor(values: Object = {}) {Object.assign(this, values);}
  }
  

  在这个类里面我们定义了三个属性和一个构造函数：

  • id: number类型, todo 的 id

  • title: string类型, todo 的标题

  • complete: boolean类型, 用来表示 todo 是否已经完成

  • constructor：构造函数，方便我们 new 一个 todo 对象：

2. 创建 TodoService

TodoService 用来管理 Todo 实例的增删改查功能。这里我们会把数据直接保存在内存里。在实际的生产中一般会访问远程接口的 API 等，但这不是本文的重点。

• 创建 TodoService 对象

  ng g s Todo

  该命令会创建一个两个文件:

  src\app\todo.service.spec.ts

  src\app\todo.service.ts

  todo.service.ts :

  import { Injectable } from '@angular/core';@Injectable()
  export class TodoService {constructor() { }}
  

  todo.service.spec.ts (测试):

  import { TestBed, inject } from '@angular/core/testing';
  import { TodoService } from './todo.service';describe('TodoService', () => {
  beforeEach(() => {TestBed.configureTestingModule({providers: [TodoService]});
  });it('should be created', inject([TodoService], (service: TodoService) => {expect(service).toBeTruthy();
  }));
  });
  

• 修改 todo.service.ts 增加逻辑代码

  import { Todo } from './todo';
  import { Injectable } from '@angular/core';@Injectable()
  export class TodoService {// 增加 todo 时模拟自增idid: number = 0;// 用于在内存里保存 todo 信息todos: Todo[] = [];constructor() { }add(todo: Todo): Todo {if (!todo.id) {todo.id = ++this.id;}this.todos.push(todo);return todo;}deleteById(id: number): void {this.todos = this.todos.filter(todo => todo.id !== id);}update(todo: Todo): Todo {let t = this.findById(todo.id);if (!t) {return null;}Object.assign(t, todo);return t;}findById(id: number): Todo {return this.todos.filter(todo => todo.id === id).pop();}findAll(): Todo[] {return this.todos;}toggleTodoComplete(todo: Todo){todo.complete = !todo.complete;let u = this.update(todo);return u;}
  }
  

• 修改 todo.service.spec.ts 增加测试代码

  编写完 todo.service.ts 逻辑代码后，你需要确认你的服务接口是不是正常。这时候需要在todo.service.spec.ts编写 TodoService 的测试代码

  import { TestBed, inject } from '@angular/core/testing';import { TodoService } from './todo.service';
  import { Todo } from './todo';describe('TodoService', () => {
  beforeEach(() => {TestBed.configureTestingModule({providers: [TodoService]});
  });it('should be created', inject([TodoService], (service: TodoService) => {expect(service).toBeTruthy();
  }));it('get all todos', inject([TodoService], (service: TodoService) => {expect(service.findAll()).toEqual([]);
  }));it('add todo ', inject([TodoService], (service: TodoService) => {let todo1 = new Todo({ title: 'test', complete: false });service.add(todo1);expect(service.findById(1)).toEqual(todo1);
  }));it('toggle todo complete', inject([TodoService], (service: TodoService) => {let todo = new Todo({title: 'test', complete: false});service.add(todo);let updatedTodo = service.toggleTodoComplete(todo);expect(updatedTodo.complete).toEqual(true);service.toggleTodoComplete(todo);expect(updatedTodo.complete).toEqual(false);}));});
  

  这里只写了部分测试代码，使用一下命令测试：

  ng test

  运行后浏览器会自动打开

  

• 看看 todo.service.spec.ts 的结构

  ng test 使用 jasmine 来进行测试，关于更多的内容你可以查看 jasmine 官方文档

  

  测试代码会调用全局的 jasmine 函数 describe 。describe 函数包含两个参数，一个描述，另外一个便是测试方法。

    beforeEach(() => {TestBed.configureTestingModule({providers: [TodoService]});
  });
  

  TestBed 是 @angular/core/testing 提供的用来配置和创建 Angular Test 模块。我们使用 TestBed.configureTestingModule()方法配置相关信息。 providers 属性告诉测试模块，当我们运行测试用例时需要什么东西。

  it('get all todos', inject([TodoService], (service: TodoService) => {expect(service.findAll()).toEqual([]);
  }));
  

  it 类似于 java 里的测试单元，该方法的第一个参数是一个名称，第二个参数是真正的测试方法。TestBad 注册器会为我们注入TodoService，以便我们在我们的测试方法里面访问到这个service。

3. 编写 AppComponent 组件

当我们初始化完这个项目的时候，Angular CLI 已经自动为我们创建了一个主组件 AppComponent ，包含了一下4个文件：

src/app/app.component.css       // css 样式文件
src/app/app.component.html      // html 结构文件
src/app/app.component.spec.ts   // 测试文件
src/app/app.component.ts        //逻辑代码

到这里整个

• 修改 app.component.html

  1. 我们先看一下app.component.html原来的样子：

• 编写 app.component.ts

  1. 我们在先看一下 Angular CLI 默认为我们创建的这个文件里都有什么：

     <h1>
     {{title}}
     </h1>
     

  2. 我们需要修改成我们的需要的结构：

      <section class="todoapp">
     <header class="header"><h1>Todos</h1><input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodo.title" (keyup.enter)="addTodo()">
     </header>
     <section class="main" *ngIf="todos.length > 0"><ul class="todo-list"><li *ngFor="let todo of todos" [class.completed]="todo.complete"><div class="view"><input class="toggle" type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.complete"><label>{{todo.title}}</label><button class="destroy" (click)="removeTodo(todo)"></button></div></li></ul>
     </section>
     <footer class="footer" *ngIf="todos.length > 0"><span class="todo-count"><strong>{{todos.length}}</strong> {{todos.length == 1 ? 'item' : 'items'}} left</span>
     </footer>
     </section>
     

  3. 如果你对上面的模版语法还不熟悉，没关系，这里对 Angular 2 的模版语法做一个简单的介绍：

     • [property]="expression": 属性绑定，会将表达式的值设置给 property 属性。
     • [style.color]="expression": 属性绑定，会将表达式的值设置给样式属性 color。
     • [class.special]="expression": 属性绑定，如果表达式为真，则为 class 属性添加 special 样式。
     • (event)="statement": 事件绑定，当发生 event 事件时执行 statement。
     • [(property)]="expression": 双向数据绑定，表达式的值变化会影响 property。property 的值变化也会影响表达式的值

• app.component.html 各个部分解析

  1. 首先在最上面是一个 input ，用来创建新的todo对象：

     <input [(ngModel)]="newTodo.title" (keyup.enter)="addTodo()" 其他属性 >
     

     • [(ngModel)]="newTodo.title" :

       双向数据绑定，在这里会绑定 newTodo.title 和这个 input 的 value 值。

     • (keyup.enter)="addTodo()" :

       事件绑定，当回车键发送 keyup 事件时，执行 addTodo() 这个方法。

  这里我们还没有在 AppComponent 里定义 newTodo 和 addTodo。 很快我们就会讲到，这里先试着了解 Angular 模版的语法。

  2. 接下来是一个 section 里面用于定义 todo 列表的展示方式：

     <section class="main" *ngIf="todos.length > 0">
     

     • *ngIf="todos.length > 0" :

       angular 内置指令，当 todos.length > 0 时才显示 section 和 section 的子元素。

  3. 接下来是 ul 里套着一个li：

     <li *ngFor="let todo of todos" [class.completed]="todo.complete">
     

     • *ngFor="let todo of todos" :

       angular 内置指令，循环 todos 对象，生成 n 条 li 标签，n = todos.length。并为每条 li 赋值一个 todo 对象。

     • [class.completed]="todo.complete" :

       当 todo.complete 等于 true 时，为该标签的 class 添加 completed 。

  4. 最后是是一个 view 用于展示每个 todo 的详细信息

     <div class="view"><input  type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.complete"><label>{{todo.title}}</label><button (click)="removeTodo(todo)"></button>
     </div>
     

     • (click)="toggleTodoComplete(todo)" :

       当发生点击事件时，会执行 toggleTodoComplete 方法 todo 对象作为参数传入。

     • [checked]="todo.complete" :

       绑定 todo.complete 的值到 checked 属性。

     • (click)="removeTodo(todo)" :

       当点击 button 按钮时，执行 removeTodo 方法，并将 todo 对象作为参数传入。

到这里整个 app.component.html 的所有部门都介绍完毕。当然你可能会一头雾水，里面的 todos ，newTodo 还是 addTodo() 等，都是些什么东西。他们要定义在哪里? 又是如何访问的。别着急，下面我们马上就会讲到。

• 编写 app.component.ts

  1. 我们在先看一下 Angular CLI 默认为我们创建的这个文件里都有什么：

     import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
     })
     export class AppComponent {title = 'app works!';
     }
     

     这个文件很简单。首先是一个 @Component 的装饰器，装饰器作用在类上用来告诉 Angular 这个类的一些附加属性。而这些附加的属性就是称之为元数据。

     • selector: 'app-root':

       css3 选择器，当 Angular 在模版里发现了 <app-root> 这个标签后，便会用本组件去渲染。

     • templateUrl: './app.component.html :

       模版Url，这里就是我们上面一小节讲到的 app.component.html。用于告诉 Angular 本组件该如何渲染。

     • styleUrls: ['./app.component.css'] :

       css Url，样式文件的路径。一个完美的 css 能让我们的组件看起来更赏心悦目。

  2. 接下来，我们要为 app.component.ts 注入 TodoService 服务。

     import {TodoService} from './todo.service';@Component({// ...providers: [TodoService]
     })
     export class AppComponent {// ...constructor(private todoService: TodoService) {}
     }
     

     • providers: [TodoService] ：

       我们在元数据里添加了一个 providers 属性。Angular 会根据 providers 的值会到注入器中查找是否已经有 TodoService 实例，如果没有，会自动帮我们实例化一个 TodoService 对象。并存放在注入器中。

     • constructor(private todoService: TodoService) {} :

       这句话便是真正的注入， Angular 注入器会为这个组件注入 TodoService 的实例，并赋值给 todoService 属性。其实这里等价于：

       // ...
       export class AppComponent {private todoService:TodoService;// ...constructor(todoService: TodoService) {this.todoService = todoService;}
       }
       

  3. 增加我们的逻辑代码：

     import { Component } from '@angular/core';
     import { TodoService } from './todo.service';
     import { Todo } from './todo';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],providers: [TodoService]
     })
     export class AppComponent {newTodo: Todo = new Todo();constructor(private todoService:TodoService){}addTodo() {this.todoService.add(this.newTodo);this.newTodo = new Todo();}toggleTodoComplete(todo) {this.todoService.toggleTodoComplete(todo);}removeTodo(todo) {this.todoService.deleteById(todo.id);}get todos() {return this.todoService.findAll();}
     }
     

     你可能不信，增加完上面的代码，我们的应用已经能正常运行了，不过我们还是来看看这个文件的内容：

     • newTodo: Todo = new Todo(); :

       newTodo 属性用于新增 todo 对象时绑定属性。还记得我们页面的第一个 input 标签吗？ <input [(ngModel)]="newTodo.title" (keyup.enter)="addTodo()"> 这里对 input 值和 newTodo.title 的值做了双向绑定，只要这两个值中的一个变化，另外一个都会跟着变化。

     • addTodo() :

       addTodo() {this.todoService.add(this.newTodo);this.newTodo = new Todo();
       }
       

       可能你已经猜到了，当你在页面上按下回车时，那个(keyup.enter)="addTodo()" 调用方法的实现，就是在这里。addTodo会调用注入的 todoService 的 add 方法。把 newTodo 进行保存。并将 this.newTodo 赋值一个新的 Todo 对象。

     • toggleTodoComplete(todo) :

       toggleTodoComplete(todo) {this.todoService.toggleTodoComplete(todo);
       }
       

       页面<input type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.complete">,当你点击这个 checkbox 时，变会调用 toggleTodoComplete 方法并将 todo 对象传入，toggleTodoComplete 使用 todoService 服务的来转变 todo 的 complete 属性。当todo.complete 的值发生变化时，[checked] 的值也会跟着变化。

     • removeTodo(todo) :

       removeTodo(todo) {this.todoService.deleteById(todo.id);
       }
       

       页面<button (click)="removeTodo(todo)"></button>,当你点击删除按钮是，便会调用 removeTodo 方法，并传入 todo 对象作为方法的参数。而removeTodo 会根据传入的参数调用 todoService 服务的 deleteById 来删除这个 todo 对象。

     • get todos() ：

       get todos() {return this.todoService.findAll();
       }
       

       如果你对 java bean 的定义熟悉的话你应该能猜个大概。这个方法是一个属性方法。相当于定义了一个 todos 属性。 并为这个 todos 属性添加了 get 方法。所以当页面 <li *ngFor="let todo of todos" > 这个标签获取 todos 的数据时，便会调用 get todos() 方法。而 get todos() 会调用 todoService 服务的 findAll 方法，并返回所有的 todos。

  4. 编写我们的样式文件

     样式文件并不是本文的重点，这里贴出样式的代码，省的小伙伴自己编写。

     • ./src/style.css : 这个文件用于设置全局css属性：

       html,
       body {margin: 0;padding: 0;
       }button {margin: 0;padding: 0;border: 0;background: none;font-size: 100%;vertical-align: baseline;font-family: inherit;font-weight: inherit;color: inherit;-webkit-appearance: none;appearance: none;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;font-smoothing: antialiased;
       }body {font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 230px;max-width: 550px;margin: 0 auto;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;font-smoothing: antialiased;font-weight: 300;
       }button,
       input[type="checkbox"] {outline: none;
       }.hidden {display: none;
       }
       

     • /src/app/app.component.css : 编写我们组件的样式

       .todoapp {background: #fff;margin: 130px 0 40px 0;position: relative;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),0 25px 50px 0 rgba(0, 0, 0, 0.1);
       }.todoapp input::-webkit-input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
       }.todoapp input::-moz-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
       }.todoapp input::input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
       }.todoapp h1 {position: absolute;top: -155px;width: 100%;font-size: 100px;font-weight: 100;text-align: center;color: rgba(175, 47, 47, 0.15);-webkit-text-rendering: optimizeLegibility;-moz-text-rendering: optimizeLegibility;text-rendering: optimizeLegibility;
       }.new-todo,
       .edit {position: relative;margin: 0;width: 100%;font-size: 24px;font-family: inherit;font-weight: inherit;line-height: 1.4em;border: 0;outline: none;color: inherit;padding: 6px;border: 1px solid #999;box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;font-smoothing: antialiased;
       }.new-todo {padding: 16px 16px 16px 60px;border: none;background: rgba(0, 0, 0, 0.003);box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
       }.main {position: relative;z-index: 2;border-top: 1px solid #e6e6e6;
       }label[for='toggle-all'] {display: none;
       }.toggle-all {position: absolute;top: -55px;left: -12px;width: 60px;height: 34px;text-align: center;border: none; /* Mobile Safari */
       }.toggle-all:before {content: '❯';font-size: 22px;color: #e6e6e6;padding: 10px 27px 10px 27px;
       }.toggle-all:checked:before {color: #737373;
       }.todo-list {margin: 0;padding: 0;list-style: none;
       }.todo-list li {position: relative;font-size: 24px;border-bottom: 1px solid #ededed;
       }.todo-list li:last-child {border-bottom: none;
       }.todo-list li.editing {border-bottom: none;padding: 0;
       }.todo-list li.editing .edit {display: block;width: 506px;padding: 13px 17px 12px 17px;margin: 0 0 0 43px;
       }.todo-list li.editing .view {display: none;
       }.todo-list li .toggle {text-align: center;width: 40px;/* auto, since non-WebKit browsers doesn't support input styling */height: auto;position: absolute;top: 0;bottom: 0;margin: auto 0;border: none; /* Mobile Safari */-webkit-appearance: none;appearance: none;
       }.todo-list li .toggle:after {content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
       }.todo-list li .toggle:checked:after {content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
       }.todo-list li label {white-space: pre-line;word-break: break-all;padding: 15px 60px 15px 15px;margin-left: 45px;display: block;line-height: 1.2;transition: color 0.4s;
       }.todo-list li.completed label {color: #d9d9d9;text-decoration: line-through;
       }.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 40px;height: 40px;margin: auto 0;font-size: 30px;color: #cc9a9a;margin-bottom: 11px;transition: color 0.2s ease-out;
       }.todo-list li .destroy:hover {color: #af5b5e;
       }.todo-list li .destroy:after {content: '×';
       }.todo-list li:hover .destroy {display: block;
       }.todo-list li .edit {display: none;
       }.todo-list li.editing:last-child {margin-bottom: -1px;
       }.footer {color: #777;padding: 10px 15px;height: 20px;text-align: center;border-top: 1px solid #e6e6e6;
       }.footer:before {content: '';position: absolute;right: 0;bottom: 0;left: 0;height: 50px;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0, 0, 0, 0.2),0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0, 0, 0, 0.2);
       }.todo-count {float: left;text-align: left;
       }.todo-count strong {font-weight: 300;
       }.filters {margin: 0;padding: 0;list-style: none;position: absolute;right: 0;left: 0;
       }.filters li {display: inline;
       }.filters li a {color: inherit;margin: 3px;padding: 3px 7px;text-decoration: none;border: 1px solid transparent;border-radius: 3px;
       }.filters li a.selected,
       .filters li a:hover {border-color: rgba(175, 47, 47, 0.1);
       }.filters li a.selected {border-color: rgba(175, 47, 47, 0.2);
       }.clear-completed,
       html .clear-completed:active {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer;
       }.clear-completed:hover {text-decoration: underline;
       }.info {margin: 65px auto 0;color: #bfbfbf;font-size: 10px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);text-align: center;
       }.info p {line-height: 1;
       }.info a {color: inherit;text-decoration: none;font-weight: 400;
       }.info a:hover {text-decoration: underline;
       }/*Hack to remove background from Mobile Safari.Can't use it globally since it destroys checkboxes in Firefox
       */
       @media screen and (-webkit-min-device-pixel-ratio:0) {.toggle-all,.todo-list li .toggle {background: none;}.todo-list li .toggle {height: 40px;}.toggle-all {-webkit-transform: rotate(90deg);transform: rotate(90deg);-webkit-appearance: none;appearance: none;}
       }@media (max-width: 430px) {.footer {height: 50px;}.filters {bottom: 10px;}
       }
       

4. 总结

到这里我们就使用 Angular 2 创建了一个 TODO MVC 项目。让我们一起回顾下，本文以后我们都学习到了什么：

• 使用 Angular CLI 创建并初始化一个 Angular 项目。
• 使用 Angular CLI 创建 Todo 对象，TodoService 并实现里面的逻辑代码。
• 使用 ng test 测试我们 TodoService 的逻辑代码
• 对 Angular 模版语法有了一定的了解，属性绑定，事件绑定，双向绑定等。
• 对 Angular 组件有一定的了解，组件装饰器里的元数据与模版和样式文件关联，组件与模版的通过绑定进行交互，组件通过元数据和构造函数注入服务。