使用Angular编写TodoMVC Vol 1
序言
本系文章主要介绍如何通过使用AngularJS编写一个简单的TodoMVC应用。
本文中的代码示例主要是根据todomvc
简化而来的，希望通过读者根据这个简单的练习可以快速对AngularJS有个初步的认知。
需要的技能
- npm
- 基础的JavaScript知识
我讲学到什么
在本章节中我们将学习到如何搭建一个基本的angular应用以及以下相关的基础指令：
- ng-controller
- ng-app
- ng-repeat
0. TodoMVC
本次编写的应用是一个简单的Todo类代办事宜的清单应用。
Paste_Image.png
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源文件，目录结构如下。
Paste_Image.png
3.编写入口app.js与index.html
app.js
首先,angular应用中所有的组件都是 以module为中心进行构建的。而一个应用则需要一个主要的module来组织。我们会编写一个app.js来声明我们todomvc应用的moudl:todomvc，并且依赖angular的路由组件库ngRoute，其关系如下图所示。
Paste_Image.png
(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，而下半部分又分为添加任务区域和显示任务清单区域。
Paste_Image.png
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层的概念比较模糊。
Angular的MVC
然后在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启动一个服务器进程，使我们可以通过浏览器访问我们编写的应用。
启动成功，可以通过8080端口访问应用
我们在浏览器中输入127.0.0.1:8080来访问我们刚刚编写的todo应用。
显示了两条任务信息
小结
在本章的练习中，我们对angular有了基本的认知，知道如何
