3.1 AngularJS必備知識

AngularJS是一個WEB應用框架。

本節我們會學習控制器（控制數據），會學習作用域（連接控制器和用戶界面），用戶界面又叫做視圖，通過模板和作用域來創建交互視覺效果。另外，我們還會學習其他的特性比如如何使用過濾器來轉換數據、如何構建并使用指令來增強現有的HTML元素，以及如何從外部數據源中加載并保存應用數據。

3.1 AngularJS初探

一個典型的AngularJS應用的組件：

3.1.1 視圖和模板：描述內容

模板：是一塊HTML內容，就是帶有指令或者表達式的HTML，可以在需要的時候載入應用。

視圖：會使用模板來展示數據，視圖一定會有一個模板（就是HTML標簽），還會有模板需要用到的數據，視圖會獲取數據并使用數據中的值來對模板進行渲染。

指令：指令會修改包含它的元素的行為。Angular有很多自帶的指令，他們都是以ng開頭的，如用來修飾顯示樣式的（ngShow、ngClass）、用于表單的（ngModel、ngForm）、用于監聽單擊等事件的（ngClick、ngMouseover）,Angular還有許多作用在原生HTML元素上的指令，提供一些HTML沒有的功能，這些元素包括輸入框、文本區域和錨點。

表達式：雙花括號{{}}，表示某些數據會被展示在這里，這種思想被稱為數據綁定。花括號中的所有內容都是表撒施，AngularJS會用當前模型的數據對表達式進行求值。

ngApp和ng-App的區別：

ngApp是javaScript版本的名字，ng-App是HTML版本的名字。

模板代碼示例：

//以下是一段模板

• ng-repeat="note in notes" //ng-repeat為筆記數組中的每個筆記創建一個li ng-click="displayNote($index)" //ng-click會在li被點擊時調用displayNote()方法 ng-class="{active:note.id == content.id}">{{note.title}}
  //用ng-class來控制是否顯示一個類 {{note.date | date:'short'}} //顯示數據并使用過濾器顯示較短的日期格式

3.1.2 控制器、模型和作用域：管理數據和邏輯

控制器：是附加在文檔對象模型（DOM）節點上的函數，用來驅動你的應用邏輯。在javaScript中，控制器就是一個函數，用來和作用域通信并相應事件。

作用域：可以理解為在控制器和視圖之間共享的一個上下文，可以爸它看做控制器和界面的橋梁，作用域在控制器中更新時也會更新視圖。作用域有兩個核心角色：存儲數據并允許控制器的方法訪問數據。存儲在作用域中的數據被稱為模型，模型可以是任意的JavaScript值（通常是數組或者對象，也可以是簡單的數字或者字符串），你可以把它存儲在作用域中，然后通過作用域共享給控制器和視圖。

控制器代碼示例：

angular.module('app').controller('Controller',function($scope){ //聲明控制器并使用$scope服務來訪問作用域 $scope.notes = [ //創建筆記對象數組并賦值給notes模型，ngrepeat會顯示這個模型 {id:1,title:'Note 1',date:new Date()}, {id:2,title:'Note 2',date:new Date()} ]; $scope.getNote=function(index){ //添加一個方法，它會被視圖中的ngClick命令出發并更新當前值 $scope.content=$scope.notes[index]; }; });

控制器中的所有內容和應用的其他部分隔離，除了它自己的子作用域。這很重要，因為這可以限制代碼和變量的可見性。

根作用域（通過$root Scope對象訪問）是Angular創建的第一個作用域，是其他所有作用域的基礎，這意味著你放在根作用域上的所有東西對其他作用域都是可見的，聽起來似乎還不錯，但是最好不要這樣做。需要保持作用域整潔和聚焦，而不是把所有東西都推在根作用域里。

控制器不是萬能的：一要避免在控制器中進行DOM操作，二要避免在控制器中格式化或者過濾數據，可以使用表單來做這些事。

3.1.3 Service:可重用的對象和方法

Angular中有一個概念叫service，它本質上就是一個JavaScript對象，可以在整個應用中共享。Angular默認提供了許多service，你也可以創建自己的service。

$http是一個非常常見的service，Angular用它來操作HTTP請求。

service是有Angular延遲加載的，也就是說，他們只會在使用的時候才會載入內存。他們還是單例的，如果你在一個地方改變了service的值，其他用到這個service的地方都會受到影響。

Ionic把許多特性寫成了Angular的service，需要注意的是，控制器中包含的幾乎所有內容都是service。

3.1.4 雙向數據綁定：在控制器和視圖之間共享數據

Angular最強大的特性之一就是雙向數據綁定。視圖將數據綁定到模板，反過來也同樣使用。視圖可以改變作用域中的數據，數據會立刻更新到作用域并反映到控制器中。這在表單中尤其有用，用戶向文本框中輸入內容時作用域中的值會同步更新。你不需要做任何特殊的事情來啟動雙向數據綁定，它會自動實現。如下面的例子：

以上就是Angular的核心概念，這些背景知識已經足夠你起步。

Angular AngularJS HTML

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。