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">

转载于:https://www.cnblogs.com/benmumu/p/9025130.html

AngularJS学习笔记（1）——MVC模式的清单列表效果相关推荐

用ajax做级联操作,学习笔记之MVC级联及Ajax操作
由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...
【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
设计模式学习笔记——解释器(Interpreter)模式
设计模式学习笔记--解释器(Interpreter)模式 @(设计模式)[设计模式, 解释器模式, Interpreter] 设计模式学习笔记解释器Interpreter模式基本介绍解释器案例类 ...
设计模式学习笔记——命令(Command)模式
设计模式学习笔记--命令(Command)模式 @(设计模式)[设计模式, 命令模式, command] 设计模式学习笔记命令Command模式基本介绍命令案例类图实现代码 Command接口 ...
设计模式学习笔记——代理(Proxy)模式
设计模式学习笔记--代理(Proxy)模式 @(设计模式)[设计模式, 代理模式, proxy] 设计模式学习笔记代理Proxy模式基本介绍代理案例类图实现代码 Printable接口 Pri ...
设计模式学习笔记——状态(State)模式框架
设计模式学习笔记--状态(State)模式框架 @(设计模式)[设计模式, 状态模式, State] 设计模式学习笔记状态State模式框架基本介绍状态案例类图实现代码 State接口 Day ...
设计模式学习笔记——备忘录(Memento)模式
设计模式学习笔记--备忘录(Memento)模式 @(设计模式)[设计模式, 备忘录模式, memento] 设计模式学习笔记备忘录Memento模式基本介绍备忘录案例类图实现代码 Memen ...
设计模式学习笔记——观察者(Observer)模式
设计模式学习笔记--观察者(Observer)模式 @(设计模式)[设计模式, 观察者模式, Observer] 设计模式学习笔记观察者Observer模式基本介绍观察者案例类图实现代码 Ob ...
设计模式学习笔记——外观(Facade)模式
设计模式学习笔记--外观(Facade)模式 @(设计模式)[设计模式, 外观模式, facade] 设计模式学习笔记外观Facade模式基本介绍外观案例类图实现代码 Database类 ma ...

AngularJS学习笔记（1）——MVC模式的清单列表效果