當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
AngularJS学习笔记（1）——MVC模式的清单列表效果
生活随笔
收集整理的這篇文章主要介紹了
AngularJS学习笔记（1）——MVC模式的清单列表效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
MVC模式的清單列表效果
使用WebStorm新建todo.html并鏈入bootstrap.css、bootstrap-theme.css、angular.js。要鏈入的相關(guān)css和js文件預(yù)先準(zhǔn)備好，文件目錄如下：?
使用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的內(nèi)置特性 $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:模型。程序中的數(shù)據(jù)
...... var model = {user:"Yimi",items:[{action:"練車",done:true},{action:"看課外書",done:false}]}; ......V:視圖。顯示數(shù)據(jù)的邏輯?
比如在間通過{{和}}調(diào)用之前定義的模型的值
C:控制器。對數(shù)據(jù)進(jìn)行操作的邏輯
var todoApp = angular.module("todoApp",[]);todoApp.controller("ToDoCtrl",function($scope){ //以$開頭的變量名表示AngularJS的內(nèi)置特性 $scope.todo = model; }); <body ng-controller="ToDoCtrl">轉(zhuǎn)載于:https://www.cnblogs.com/benmumu/p/9025130.html
總結(jié)
以上是生活随笔為你收集整理的AngularJS学习笔记（1）——MVC模式的清单列表效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mac 查看端口并终结
- 下一篇： Jenkins构建Spring+Node