序言
本系文章主要介紹如何通過使用AngularJS編寫一個簡單的TodoMVC應用。
本文中的代碼示例主要是根據todomvc
簡化而來的，希望通過讀者根據這個簡單的練習可以快速對AngularJS有個初步的認知。
需要的技能
- npm
- 基礎的JavaScript知識
我講學到什么
在本章節中我們將學習到如何搭建一個基本的angular應用以及以下相關的基礎指令：
- ng-controller
- ng-app
- ng-repeat
0. TodoMVC
本次編寫的應用是一個簡單的Todo類代辦事宜的清單應用。
1. 通過npm初始化工程
首先新建一個工程目錄，并新建一個package.json文件
{
"private": true,
"scripts": {
"start": "http-server"
},
"dependencies": {
"angular": "^1.4.3",
"todomvc-common": "^1.0.0",
"todomvc-app-css": "^1.0.1",
"angular-route": "^ 1.4.3"
},
"devDependencies": {
"http-server": "^0.9.0"
}
}
其中的todomvc-common與todomvc-app-css都是todomvc中的基礎組件包。
最后運行npm install來安裝關聯組件包。
2. 工程目錄結構
我們將所有的js源文件放置在js文件夾中，并且按照最簡單的功能區分的方式來組織所有angular源文件，目錄結構如下。
3.編寫入口app.js與index.html
app.js
首先,angular應用中所有的組件都是 以module為中心進行構建的。而一個應用則需要一個主要的module來組織。我們會編寫一個app.js來聲明我們todomvc應用的moudl:todomvc，并且依賴angular的路由組件庫ngRoute，其關系如下圖所示。
(function(){
'use strict';
angular.module('todomvc', ['ngRoute'])
.config(routerConfig);
//注入依賴聲明
routerConfig.$inject = ['$routeProvider'];
function routerConfig($routeProvider){
};
})();
index.html
在我們的主入口html文件中我們只引入todomvc的css文件，以及在底部引入我們的app.js。
<!doctype html>
<html lang="en" data-framework="angularjs">
<head>
<meta charset="utf-8">
<title>AngularJS ? TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
</head>
<body ng-app="todomvc">
</body>
</html>
這段代碼中在body標簽我們使用了ng-app指令來告知angular在這段代碼片段中我們將啟動todomvc的module解釋與編譯html中的指令代碼與angular表達式。
而通常ng-app中的module名稱是與整個應用的主模塊名稱一致的。
\\ in app.js
angular.module('todomvc')
\\in index.html
<body ng-app='todomvc'>
</body>
4. 編寫我們第一個controller
4.1 AngularJS與JQuery的一些區別
在編寫angular應用的時候有一些與原來我們使用jquery的設計想法最不一樣的是在angular中大部分情況是以邏輯與數據做出最先設計的部分，而不是jquery。
angular與jquery最大的不同便是，angularjs其實是一個生成編譯的html代碼的運行時環境，而jquery是直接在html上操作dom從而達到修改的html代碼的目的。
4.2 編寫TodoController
我們整個應用只會使用者一個controller,主要用于添加任務、顯示任務與刪除任務的功能。
首先，整個應用的唯一實體記錄就是任務task，我們如果簡單設計todo task的數據結構,使每個任務都有一個顯示標題的屬性:
{
"title": "string"
}
我們在TodoController中初始化一個數組用于保存我們需要在頁面上顯示的任務。
(function(){
'use strict';
angular
.module('todomvc')
.controller('TodoController',TodoController);
TodoController.$inject = [];
function TodoController(){
var vm = this;
vm.tasks = [
{
title: "第一個任務"
},
{
title: "第二個任務"
}
]
}
})();
在編寫完畢controller的代碼后，以文件名todo.controller.js保存在js/controllers文件下并且在html的script標簽區域引入該文件。
4.3 顯示任務列表
4.3.1 界面設計
TodoMVC的界面布局主要分為兩塊上面是頭部分顯示標題todos，而下半部分又分為添加任務區域和顯示任務清單區域。
4.3.2 修改index.html
ng-controller
<body ng-app="todomvc" ng-controller="TodoController as vm">
首先我們在body標簽區域增加ng-controller指令用于告知angular使用TodoController來操作折斷html模板。
其次再通過"TodoController as vm"的語法使body標簽區域中的都可以通過vm變量來獲取TodoController中的變量，從而使View層可以獲取Controller中的Model數據，只是在angular中Model層的概念比較模糊。
然后在body區域中編寫header標題與列表內容
<header id="header">
<h1>todos</h1>
</header>
<section id="main">
<ul id="todo-list">
<li ng-repeat="task in vm.tasks">
<div class="view">
<label>{{task.title}}</label>
</div>
</li>
</ul>
</section>
ng-repeat指令
ng-repeat指令是angular模板中的類似foreach迭代的指令，根據目標集合的數量重復顯示當前代碼片段，在我們的應用中，每一個任務task記錄都會生成一行li代碼用于顯示其標題title字段的信息,類似下面的代碼片段。
<li>
<label>第一個任務</label>
</li>
故我們使用ng-repeat代碼來迭代controller中的tasks數組中的所有任務記錄。
//in controller
vm.task = [
{
title: "第一個任務"
},
{
title: "第二個任務"
}
];
//in html template
<li ng-repeat="task in vm.tasks">
<div class="view">
<label>{{task.title}}</label>
</div>
</li>
4.4 運行應用
使用終端打開至應用目錄并輸入npm start通過http-server啟動一個服務器進程，使我們可以通過瀏覽器訪問我們編寫的應用。
我們在瀏覽器中輸入127.0.0.1:8080來訪問我們剛剛編寫的todo應用。
小結
在本章的練習中，我們對angular有了基本的認知，知道如何
