AngularJS學習第一篇，了解指令、過濾器等相關內容。
指令
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-
1、 ng-app：
定義了 AngularJS 應用程序的根元素；
ng-app 指令在網(wǎng)頁加載完畢時會自動引導（自動初始化）應用程序；
<div ng-app="Demo"></div>
2、 ng-init：
為 AngularJS 應用程序定義了 初始值；
通常情況下，我們使用一個控制器或模塊來代替它；
<div ng-app="Demo" ng-init="firstName='John'"> <p>我的名字是：{{ firstName }}</p></div>3、 ng-model：
綁定 HTML 元素 到應用程序數(shù)據(jù)
同時也可以：
為應用程序數(shù)據(jù)提供類型驗證（number、email、required）；
為應用程序數(shù)據(jù)提供狀態(tài)（invalid、dirty、touched、error）；
為HTML 元素提供 CSS 類；
綁定 HTML 元素到 HTML 表單；
<div ng-app="Demo" ng-init="firstName='John'"> <p>姓名：<input type="text" ng-model="firstName"></p> <p>我的名字是：{{ firstName }}</p></div>4、ng-repeat：對于集合中（數(shù)組中）的每個項會 克隆一次 HTML 元素。
<div ng-app="Demo" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul></div> 5、ng-controller：為應用程序添加控制器。請根據(jù)下面示例進行了解：
<div ng-app="Demo"> <h1 ng-controller="DemoCtrl">{{name}}</h1> <h1 ng-controller="DemoCtrl2">{{lastName}}</h1></div><script> // $scope表示作用區(qū)域，指向當前controller // 每個應用都有一個$rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。用 rootscope 定義的值，可以在各個 controller 中使用。 var app = angular.module('Demo', []); app.controller('DemoCtrl', function($scope, $rootScope) { $scope.name = "Volvo"; $rootScope.lastName = "Tom"; });</script><div ng-app="Demo" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"> <br> 姓: <input type="text" ng-model="lastName"> <br> 姓名: {{fullName()}}</div><script> var app = angular.module('Demo', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } });</script>6、ng-options：創(chuàng)建一個下拉列表，列表項通過對象和數(shù)組循環(huán)輸出。
<div ng-app="Demo" ng-controller="DemoCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.names = ["Google", "W3Cschool", "Taobao"];});</script>7、ng-disabled：指令直接綁定應用程序數(shù)據(jù)到 HTML 的 disabled 屬性。
<div ng-app="" ng-init="mySwitch=true"> <button ng-disabled="mySwitch">點我!</button> <input type="checkbox" ng-model="mySwitch"/>按鈕 {{ mySwitch }}</div> 8、ng-show：指令隱藏或顯示一個 HTML 元素。
<div ng-app=""> <p ng-show="true">我是可見的。</p> <p ng-show="false">我是不可見的。</p></div>
9、ng-click：指令定義了一個 AngularJS 單擊事件。
<div ng-app="Demo" ng-controller="myController"> <button ng-click="count = count + 1">點我！</button> <p>{{ count }}</p></div>10、ng-include：使用 ng-include 指令來包含 HTML 內容。
過濾器
使用一個管道字符（|）添加到表達式和指令中
常見表達式：
currency：格式化數(shù)字為貨幣格式；
filter：從數(shù)組項中選擇一個子集；
lowercase：格式化字符串為小寫；
orderBy：根據(jù)某個表達式排列數(shù)組；
uppercase：格式化字符串為大寫；
<div ng-app="Demo" ng-controller="DemoCtrl"> <p>姓名為 {{ lastName | uppercase }}</p></div><div ng-app="Demo" ng-controller="DemoCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul></div>服務
在 AngularJS 中，服務是一個函數(shù)或對象，可在你的 AngularJS 應用中使用；
AngularJS 中你可以創(chuàng)建自己的服務，或使用內建服務；
AngularJS 內建了30 多個服務；
自定義服務
app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});var app = angular.module('Demo', []);app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl();}); 常用內置服務
1、$http：是 AngularJS 中的一個核心服務。服務向服務器發(fā)送請求，應用響應服務器傳送過來的數(shù)據(jù)；
var app = angular.module('Demo', []);app.controller('DemoCtrl', function($scope, $http) { $http({ url:'data.json', method:'GET', params:{ 'username':'tan' } }).success(function(data,header,config,status){ //響應成功 }).error(function(data,header,config,status){ //處理響應失敗 });});2、$location：服務對應了 window.location 函數(shù)。
3、$timeout：服務對應了 window.setTimeout 函數(shù)。
4、$interval：服務對應了 window.setInterval 函數(shù)。
5、$rootScope：它可以作用在 ng-app 指令包含的所有 HTML 元素中。用 rootscope 定義的值，可以在各個 controller 中使用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
