當(dāng)前位置：首頁(yè) > 人文社科 > 生活经验 >内容正文

生活经验

angular初步认识一

發(fā)布時(shí)間：2023/11/27 生活经验 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 angular初步认识一小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

最近比較流行MVC前端框架開(kāi)發(fā)，最近研究了一個(gè)框架AngularJS框架

不說(shuō)那么多，先上例子，我是個(gè)代碼控

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

　看到幾個(gè)比較特殊的點(diǎn)

? 1.html標(biāo)簽中多一個(gè)ng-app="myApp"

? 2.body標(biāo)簽中多一個(gè)ng-controller="MyCtrl"

? 3.tr標(biāo)簽中多了ng-repeat="item in todo.items"

? 4.{{}}是取值表達(dá)式

? 5.script里面多了一些angular.module 以及myApp.controller等方法

1.根據(jù)AngularJS的解釋是,一個(gè)文檔中只有一個(gè)ng-app的屬性，可以說(shuō)是文檔的唯一標(biāo)識(shí)，當(dāng)angular發(fā)現(xiàn)這個(gè)標(biāo)識(shí)的時(shí)候，下面的文檔樹(shù)都要經(jīng)過(guò)angular編譯

2.ng-controller的指令就是作為前端處理業(yè)務(wù)的controller層

3.作為一個(gè)前端或者后端，看到這個(gè)就會(huì)想到是一個(gè)for遍歷集合

4.不用說(shuō)了，就是取元素的值

5.這個(gè)兩個(gè)方法數(shù)據(jù)綁定和處理的業(yè)務(wù)邏輯。

這里還提一點(diǎn)，$scope是一個(gè)全局變量，還有就是數(shù)據(jù)雙向綁定，里面用到了一個(gè)ng-model指令，這個(gè)自己也在學(xué)習(xí)中，希望以后學(xué)習(xí)中能夠知道他們的原理。

下面可以看到$scope是全局，在對(duì)象上增加一個(gè)方法，可以在html元素上直接使用這個(gè)方法,看標(biāo)題欄，還有幾個(gè)事情沒(méi)有做的計(jì)數(shù)

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>angularJS學(xué)習(xí)</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>

自定義過(guò)濾器和發(fā)送ajax請(qǐng)求,寫(xiě)了一下代碼，感覺(jué)使用挺簡(jiǎn)單，過(guò)濾器接受一個(gè)參數(shù)，list是angularJS提供的集合數(shù)據(jù)

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>angularJS自定義過(guò)濾器學(xué)習(xí)</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><!--普通的過(guò)濾器可以像下面那樣 --><!--<tr ng-repeat="item in todo.items | filter:{done:false}} | orderBy:'action'"> --><!--自定義過(guò)濾器可以像下面那樣 --><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>

再來(lái)一個(gè)好玩一點(diǎn)的，就是點(diǎn)擊按鈕可以天添加數(shù)據(jù)到列表中

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>angularJS數(shù)據(jù)綁定學(xué)習(xí)</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>

轉(zhuǎn)載于:https://www.cnblogs.com/kevinlifeng/p/5192899.html

總結(jié)

以上是生活随笔為你收集整理的angular初步认识一的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Angular