angular初步认识一
生活随笔
收集整理的這篇文章主要介紹了
angular初步认识一
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近比較流行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>
?
自定義過濾器和發送ajax請求,寫了一下代碼，感覺使用挺簡單，過濾器接受一個參數，list是angularJS提供的集合數據
<!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"}var myApp = angular.module("myApp",[]);myApp.run(function($http){$http.get("/angular/todo.json").success(function(data){model.items = data;})});myApp.filter("checkedItems",function(){return function(list,showComplete){var resultArr = [];angular.forEach(list,function(item){if (!item.done || showComplete ) {resultArr.push(item);};});return resultArr;}});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 | filter:{done:false}} | orderBy:'action'"> --><!--自定義過濾器可以像下面那樣 --><tr ng-repeat="item in todo.items | checkedItems:showComplete | orderBy:'action'"><td>{{item.action}}</td><td><input type="checkbox" ng-model="item.done" /></td><td>{{item.done}}</td></tr></tbody></table><div class="checkbox-inline"><label><input type="checkbox" ng-model="showComplete" />Show Complete</label></div></div>
</body>
</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"}var myApp = angular.module("myApp",[]);myApp.run(function($http){$http.get("/angular/todo.json").success(function(data){model.items = data;})});myApp.filter("checkedItems",function(){return function(list,showComplete){var resultArr = [];angular.forEach(list,function(item){if (!item.done || showComplete ) {resultArr.push(item);};});return resultArr;}});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;}$scope.addNewItem = function(actionText){$scope.todo.items.push({"action":actionText,"done":false});}})</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" ng-model="actionText"/><span class="input-group-btn"><button class="btn bth-default" ng-click="addNewItem(actionText)">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 | checkedItems:showComplete | orderBy:'action'"><td>{{item.action}}</td><td><input type="checkbox" ng-model="item.done" /></td><td>{{item.done}}</td></tr></tbody></table><div class="checkbox-inline"><label><input type="checkbox" ng-model="showComplete" />Show Complete</label></div></div>
</body>
</html>
?
轉載于:https://www.cnblogs.com/kevinlifeng/p/5192899.html
總結
以上是生活随笔為你收集整理的angular初步认识一的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 耶稣十字架是谁画的呢？
- 下一篇： 微信个性签名积极向上