您好,登錄后才能下訂單哦!
這篇文章主要介紹了AngularJS基礎(chǔ)知識(shí)的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
指令
AngularJS 指令是擴(kuò)展的 HTML 屬性,帶有前綴 ng-
1、 ng-app:
定義了 AngularJS 應(yīng)用程序的根元素;
ng-app 指令在網(wǎng)頁(yè)加載完畢時(shí)會(huì)自動(dòng)引導(dǎo)(自動(dòng)初始化)應(yīng)用程序;
<div ng-app="Demo"></div>
2、 ng-init:
為 AngularJS 應(yīng)用程序定義了 初始值;
通常情況下,我們使用一個(gè)控制器或模塊來(lái)代替它;
<div ng-app="Demo" ng-init="firstName='John'"> <p>我的名字是:{{ firstName }}</p> </div>
3、 ng-model:
綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)
同時(shí)也可以:
為應(yīng)用程序數(shù)據(jù)提供類(lèi)型驗(yàn)證(number、email、required);
為應(yīng)用程序數(shù)據(jù)提供狀態(tài)(invalid、dirty、touched、error);
為HTML 元素提供 CSS 類(lèi);
綁定 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:對(duì)于集合中(數(shù)組中)的每個(gè)項(xiàng)會(huì) 克隆一次 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:為應(yīng)用程序添加控制器。請(qǐng)根據(jù)下面示例進(jìn)行了解:
<div ng-app="Demo"> <h2 ng-controller="DemoCtrl">{{name}}</h2> <h2 ng-controller="DemoCtrl2">{{lastName}}</h2> </div> <script> // $scope表示作用區(qū)域,指向當(dāng)前controller // 每個(gè)應(yīng)用都有一個(gè)$rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。用 rootscope 定義的值,可以在各個(gè) 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)建一個(gè)下拉列表,列表項(xiàng)通過(guò)對(duì)象和數(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:指令直接綁定應(yīng)用程序數(shù)據(jù)到 HTML 的 disabled 屬性。
<div ng-app="" ng-init="mySwitch=true"> <button ng-disabled="mySwitch">點(diǎn)我!</button> <input type="checkbox" ng-model="mySwitch"/>按鈕 {{ mySwitch }} </div>
8、ng-show:指令隱藏或顯示一個(gè) HTML 元素。
<div ng-app=""> <p ng-show="true">我是可見(jiàn)的。</p> <p ng-show="false">我是不可見(jiàn)的。</p> </div>
9、ng-click:指令定義了一個(gè) AngularJS 單擊事件。
<div ng-app="Demo" ng-controller="myController"> <button ng-click="count = count + 1">點(diǎn)我!</button> <p>{{ count }}</p> </div>
10、ng-include:使用 ng-include 指令來(lái)包含 HTML 內(nèi)容。
過(guò)濾器
使用一個(gè)管道字符(|)添加到表達(dá)式和指令中
常見(jiàn)表達(dá)式:
currency:格式化數(shù)字為貨幣格式;
filter:從數(shù)組項(xiàng)中選擇一個(gè)子集;
lowercase:格式化字符串為小寫(xiě);
orderBy:根據(jù)某個(gè)表達(dá)式排列數(shù)組;
uppercase:格式化字符串為大寫(xiě);
<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>
服務(wù)
在 AngularJS 中,服務(wù)是一個(gè)函數(shù)或?qū)ο螅稍谀愕?AngularJS 應(yīng)用中使用;
AngularJS 中你可以創(chuàng)建自己的服務(wù),或使用內(nèi)建服務(wù);
AngularJS 內(nèi)建了30 多個(gè)服務(wù);
自定義服務(wù)
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(); });
常用內(nèi)置服務(wù)
1、$http:是 AngularJS 中的一個(gè)核心服務(wù)。服務(wù)向服務(wù)器發(fā)送請(qǐng)求,應(yīng)用響應(yīng)服務(wù)器傳送過(guò)來(lái)的數(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){ //響應(yīng)成功 }).error(function(data,header,config,status){ //處理響應(yīng)失敗 }); });
2、$location:服務(wù)對(duì)應(yīng)了 window.location 函數(shù)。
3、$timeout:服務(wù)對(duì)應(yīng)了 window.setTimeout 函數(shù)。
4、$interval:服務(wù)對(duì)應(yīng)了 window.setInterval 函數(shù)。
5、$rootScope:它可以作用在 ng-app 指令包含的所有 HTML 元素中。用 rootscope 定義的值,可以在各個(gè) controller 中使用。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“AngularJS基礎(chǔ)知識(shí)的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。