這篇文章主要介紹了AngularJS基礎(chǔ)知識(shí)的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為類烏齊等服務(wù)建站，類烏齊等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為類烏齊企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

指令

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ù)提供類型驗(yàn)證（number、email、required）； 
     為應(yīng)用程序數(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：對(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：格式化字符串為小寫；
orderBy：根據(jù)某個(gè)表達(dá)式排列數(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>

服務(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í)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：AngularJS基礎(chǔ)知識(shí)的示例分析-創(chuàng)新互聯(lián)
URL分享：http://chinadenli.net/article38/heppp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、App開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣、標(biāo)簽優(yōu)化、外貿(mào)建站、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)