標籤：
最近比較流行MVC前端架構開發，最近研究了一個架構AngularJS架構
不說那麼多，先上例子，我是個代碼控
<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>capter1-angular</title><link rel="stylesheet" href="../css/bootstrap.min.css"><link rel="stylesheet" href="../css/bootstrap-theme.css"><script src="../js/angular.min.js"></script><script type="text/javascript">var model = {user:"Lifeng",items:[{action:"Buy Flowers",done:false},{action:"Get Shoes",done:false},{action:"Collect Tickets",done:true},{action:"Call Joe",done:false}]}var myApp = angular.module("myApp",[]);myApp.controller("MyCtrl",function($scope){$scope.todo = model;})</script></head><body ng-controller="MyCtrl"><div class="page-header"><h1>{{todo.user}}‘s To Do List<span class="label label-default">{{todo.items.length}}</span></h1></div><div class="panel"><div class="input-group"><input type="text" class="form-control"/><span class="input-group-btn"><button class="btn bth-default">Add</button></span></div><table class="table table-striped"><thead><tr><th>Description</th><th>Done</th><th> </th></tr></thead><tbody><tr ng-repeat="item in todo.items"><td>{{item.action}}</td><td><input type="checkbox" ng-model="item.done" /></td><td>{{item.done}}</td></tr></tbody></table></div></body></html>
看到幾個比較特殊的點
1.html標籤中多一個ng-app="myApp"
2.body標籤中多一個ng-controller="MyCtrl"
3.tr標籤中多了ng-repeat="item in todo.items"
4.{{}}是取值運算式
5.script裡面多了一些angular.module 以及myApp.controller等方法
1.根據AngularJS的解釋是,一個文檔中只有一個ng-app的屬性，可以說是文檔的唯一標識，當angular發現這個標識的時候，下面的文檔樹都要經過angular編譯
2.ng-controller的指令就是作為前端處理業務的controller層
3.作為一個前端或者後端，看到這個就會想到是一個for遍曆集合
4.不用說了，就是取元素的值
5.這個兩個方法資料繫結和處理的商務邏輯。
這裡還提一點，$scope是一個全域變數，還有就是資料雙向繫結，裡面用到了一個ng-model指令，這個自己也在學習中，希望以後學習中能夠知道他們的原理。
下面可以看到$scope是全域，在對象上增加一個方法，可以在html元素上 直接使用這個方法,看標題列，還有幾個事情沒有做的計數
<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>angularJS學習</title><link rel="stylesheet" href="../css/bootstrap.min.css"><link rel="stylesheet" href="../css/bootstrap-theme.css"><script src="../js/angular.min.js"></script><script type="text/javascript">var model = {user:"Lifeng",items:[{action:"Buy Flowers",done:false},{action:"Get Shoes",done:false},{action:"Collect Tickets",done:true},{action:"Call Joe",done:false}]}var myApp = angular.module("myApp",[]);myApp.controller("MyCtrl",function($scope){$scope.todo = model;$scope.incompleteCount = function(){var _count = 0;angular.forEach($scope.todo.items,function(item){if(!item.done){_count++}});return _count;}})</script></head><body ng-controller="MyCtrl"><div class="page-header"><h1>{{todo.user}}‘s To Do List<span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span></h1></div><div class="panel"><div class="input-group"><input type="text" class="form-control"/><span class="input-group-btn"><button class="btn bth-default">Add</button></span></div><table class="table table-striped"><thead><tr><th>Description</th><th>Done</th><th> </th></tr></thead><tbody><tr ng-repeat="item in todo.items"><td>{{item.action}}</td><td><input type="checkbox" ng-model="item.done" /></td><td>{{item.done}}</td></tr></tbody></table></div></body></html>
angular初步認識一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
