MVC模式的清单列表效果
使用WebStorm新建todo.html并链入bootstrap.css、bootstrap-theme.css、angular.js。要链入的相关css和js文件预先准备好，文件目录如下：
使用MVC模式前的代码：
<!DOCTYPE html>
<html ng-app>
<head> <meta charset="UTF-8"> <title>TO DO List</title> <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"/> <link href="./bootstrap/css/bootstrap-theme.css" rel="stylesheet"/> </head> <body> <div class="page-header"> <h1>Yimi's TO DO List</h1> </div> <div class="panel"> <div class="input-group"> <input class="form-control"/> <span class="input-group-btn"> <button class="btn btn-default">Add</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Description</th> <th>Done</th> </tr> </thead> <tbody> <tr><td>练车</td><td>Yes</td></tr> <tr><td>看课外书</td><td>No</td></tr> </tbody> </table> </div> </body> </html>使用MVC模式后代码如下：
<!DOCTYPE html>
<html ng-app="todoApp"> <head> <meta charset="UTF-8"> <title>TO DO List</title> <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"/> <link href="./bootstrap/css/bootstrap-theme.css" rel="stylesheet"/> <script src="./angularJs/angular.js"></script> <script> var model = { user:"Yimi", items:[{action:"练车",done:true}, {action:"看课外书",done:false}] }; var todoApp = angular.module("todoApp",[]); todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性 $scope.todo = model; }); </script> </head> <body ng-controller="ToDoCtrl"> <div class="page-header"> <h1>{{todo.user}}'s TO DO List</h1> <span class="label label-default">{{todo.items.length}}</span> </div> <div class="panel"> <div class="input-group"> <input class="form-control"/> <span class="input-group-btn"> <button class="btn btn-default">Add</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Description</th> <th>Done</th> </tr> </thead> <tbody> <tr ng-repeat="item in todo.items"> <td>{{item.action}}</td> <td>{{item.done}}</td> </tr> </tbody> </table> </div> </body> </html>效果图如下：
使用Chrome浏览器查看
模型-视图-控制器(MVC)
M:模型。程序中的数据
......
var model = {user:"Yimi",items:[{action:"练车",done:true},{action:"看课外书",done:false}]};
......V:视图。显示数据的逻辑
比如在间通过{{和}}调用之前定义的模型的值
......
<h1>{{todo.user}}'s TO DO List</h1> <span class="label label-default">{{todo.items.length}}</span> ...... <tr ng-repeat="item in todo.items"> <td>{{item.action}}</td> <td>{{item.done}}</td> </tr> ......C:控制器。对数据进行操作的逻辑
var todoApp = angular.module("todoApp",[]);todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性 $scope.todo = model; });<body ng-controller="ToDoCtrl"> 互斥对象)
