MVC模式的清单列表效果
使用WebStorm新建todo.html并链入bootstrap.css、bootstrap-theme.css、angular.js。要链入的相关css和js文件预先准备好，文件目录如下：
使用MVC模式前的代码：
TO DO List Yimi's TO DO List
Description Done 练车 Yes 看课外书 No
使用MVC模式后代码如下：
TO DO List { { todo.user}}'s TO DO List
{ { todo.items.length}}
Description Done { { item.action}} { { item.done}}
效果图如下：
使用Chrome浏览器查看
模型-视图-控制器(MVC)
M:模型。程序中的数据
......var model = { user:"Yimi", items:[{action:"练车",done:true}, {action:"看课外书",done:false}] };...... V:视图。显示数据的逻辑
比如在间通过{ {和}}调用之前定义的模型的值......{ { todo.user}}'s TO DO List
{ { todo.items.length}} ...... { { item.action}} { { item.done}} ......
C:控制器。对数据进行操作的逻辑
var todoApp = angular.module("todoApp",[]); todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性 $scope.todo = model; });