標籤：js對象 頁面 範圍 like size mode today 方向 分離
第一章 簡單認識AngularJS
1、雙向資料繫結
可通過ng-model監控輸入
ng-app屬性聲明所有被其包含的內容都屬於這個AngularJs應用，這也是我們在web應用中嵌套AngularJs的原因
只有被具有ng-app屬性的DOM元素包含的元素才會受AngularJs的影響
2、MVC模式
MVC是一種軟體架構設計模式，它將表現從使用者互動中分離出來；模型中包含應用的資料和與資料進行互動的方法，視圖將資料
呈現給使用者，而控制器則是二者之間的橋樑。
3、模組
使用angular.module()方法來聲明模組，這個方法能夠接受兩個參數，第一個是模組名稱，第二個是依賴列表，也就是可以被注入
到模組中的對象列表。
angular.module(‘myapp‘,[]);//此方法是用來定義模組的
angular.module(‘myapp‘); //擷取對模組的引用
開發大型應用時，我們會建立多個模組來承載商務邏輯
參數：
1、name ：模組的名稱 字串變數
2、requires： 包含了一個字串變數組成的列表，每個元素都是一個模組名稱
4、範圍 （scope）
範圍是構成AngularJs應用的核心基礎
$scope對象是定義應用商務邏輯、控制器方法和視圖屬性的地方
$rootScope是AngularJs中最接近全域範圍的對象
$scope 對象就是一個普通的JavaScript對象，我們可以在其上隨意修改和添加屬性
$scope對象在AngualrJs中充當資料模型，但與傳統的資料模型不一樣，它不負責處理和操作資料，只是視圖和HTML之間的橋樑
，是視圖和控制器之間的膠水
*****$scope的所有屬性，都可以自動被視圖訪問到
可以使用$scope的$destory()的方法來清理範圍（儘管angualrJs會自己清理範圍）
5、多種標記
可以在AngularJs應用的模板中使用多種標記
指令：將DOM元素增強為可複用的DOM組件的屬性或元素 指令通常不會建立自己的$scope,但也有例外，比如：ng-controller,ng-repeat會
建立自己的子範圍並將它們附加到DOM元素上
值綁定：模板文法{{}}可以將運算式綁定到視圖上
過濾器：可以在視圖中使用的函數，用來進行格式化
表單控制項：用來檢驗使用者輸入的控制項
6、控制器
AngularJs允許我們在視圖中像調用普通資料一樣調用$scope上的函數。
angularJs同其他js架構最主要的區別：控制器並不適合用來執行DOM操作、格式化或資料操作，以及除儲存資料模型之外的狀態維護操作
它只是視圖和$scope之間的橋樑。
AngularJS允許在$scope上設定包括對象在內的任何類型的資料，並且在視圖中還可以展示對象的屬性。
控制器嵌套：（範圍包含範圍）
7、運算式
運算式特性：
1、所有的運算式都在其所屬的範圍內部執行，並有訪問$scope的許可權
2、如果運算式發生了TypeError和ReferenceError並不會拋異常
3、不允許使用任何流程式控制制功能
4、可以接受過濾器和過濾器鏈
AngularJs 會在運行$digest迴圈的過程中自動解析運算式
AngularJS通過$parse這個內部服務來進行運算式的運算，將$parse服務注入到控制器中，然後調用它就可以實現手動解析運算式
8、 過濾器
過濾器用來格式化需要展示給使用者的資料，AngularJs有很多實用的內建過濾器，同時也提供了方便的途徑可以自己建立過濾器
過濾器可以在html中使用 例如：{{123.456789 | number:2 }} 過濾器和參數之間用冒號分割； 使用多個過濾器時，用| 短豎線分割
也可以在js中使用過濾器
AngularJS提供的內建過濾器：
1、currency：可以將一個數值格式化為貨幣格式，但是也可以自訂貨幣符號
{{123 |currency }}
2、date :可以將日期格式化為需要的格式
年份格式化：
四位：{{today | date:‘yyyy‘}}
兩位：{{today | date:‘yy‘}}
一位：{{today | date:‘y‘}}
還有月份、日期等格式 詳見AngularJs權威教程page25
3、filter：可以從給定數組中選擇一個子集，並將其產生一個新數組返回。
這個過濾器通常用來過濾需要進行展示的元素
第一個參數：
這個過濾器的第一個參數可以是字串、對象、或是一個用來從數組中選擇元素的函數
字串：返回所有包含該字串的元素（還可以通過加！表示不包含此字串的所有元素）
例如：{{[‘Air‘,‘Lerner‘,‘Likes‘,‘Eat‘,‘Pizza‘] | filter:‘e‘ }}
對象：AngularJs會將待過濾對象的屬性同這個對象中的同名屬性進行比較
{{[{
‘name‘:‘Ari‘,
‘city‘:‘San Franisco‘,
‘favorite Food‘:‘Pizza‘
},
{
‘name‘:‘Kate‘,
‘city‘:‘indian Franisco‘,
‘favorite Food‘:‘Pizza‘
}
] | filter:{‘favorite Food‘:‘Pizza‘} }}
函數：對每個元素都執行這個函數，返回非假值的元素會出現在新的數組中並返回
（也可以用自訂函數進行過濾，這個函數定義在$scope上）
第二個參數：用來指定預期值同實際值進行比較的方式
4、json
json 過濾器可以將一個JSON或js對象轉換成字串。
{{{‘name‘:‘Ari‘,‘City‘:‘San Francisco‘}| json }}
5、limitTo ：會根據傳入的參數產生一個新的數組或字串
例如：截取字串的前三個字元
{{San Franisco is very cloudy | limitTo:3}}
截取字串的後六個字元
{{San Franisco is very cloudy | limitTo-6}}
返回數組的第一個元素
{{[‘a‘,‘b‘,‘c‘,‘d‘] | limitTo: 1 }}
6、lowercase:將字串轉為小寫
{{"San Franisco is very cloudy" | lowercase}}
7、number ：將數字格式化為文本，第二個參數可選：用來控制小數點後截取的位元
{{123.46789 | number:2}}
8、orderBy：可以用運算式對指定的數組進行排序
第一個參數：是用來確定數組排序方向的謂詞（即根據什麼來排序）
第二個參數：用來控制排序的方向（是否逆向）
9、uppercase:將字串轉為大寫
{{"San Franisco is very cloudy" | uppercase}}
10、自訂過濾器
注意：angular.module(‘這裡只能寫ng-app的值‘,[]);
11、表單驗證
AngularJs能夠將HTML5表單驗證功能同它自己的驗證指令結合起來使用，並且非常方便
要使用表單驗證，首先要確保表單form中有name屬性
如果想要屏蔽瀏覽器對錶單的預設驗證行為，可以在表單元素上添加novalidate標記
可以在input上使用的所有驗證選項：
1、必填項：required
2、最小長度：ng-minlength=‘位元’
3、最大長度：ng-maxlength=‘位元’
4、模式比對：ng-pattern=‘Regex’
5、電子郵件：type=‘email’
6、數字：type=‘number’
7、URL： type=‘url’
8、自訂驗證：第十章講
9、在表單中控制變數
根據表單的屬性，可以對錶單做出即時響應
formName.inputName.property
未修改的表單： formName.inputName.$pristine
修改過的表單： formName.inputName.$dirty
合法的表單： formName.inputName.$valid
不合法的表單： formName.inputName.$invalid
錯誤： $error對象，它包含當前表單的所有驗證內容，以及它們是否合法的資訊，用下面語句訪問這個屬性
formName.inputName.$error
第二章 指令簡介
1、指令：自訂HTML元素和屬性
指令本質上就是AngularJS擴充具有自訂功能的HTML元素的途徑
2、HTML引導
當瀏覽器載入一個包含AngularJS應用的HTML時，我們只需要一小段簡單的代碼就能夠啟動AngularJs應用。
在HTML中要用內建指令ng-app標記出應用的根節點。這個指令需要以屬性的形式來使用，因此可以將它寫到任何位置，但是寫到<html>的開始標籤上是最常規的做法：
內建指令是打包在AngularJS內部的指令。所有內建指令的命名空間都使用ng作為首碼。為防止命名衝突，不要在自訂指令前加ng首碼。
現在，在HTML元素中可以使用所有內建指令和自訂指令了。同時，基於JavaScript的原型繼承機制，任何在這個根項目內部的指令只要能夠訪問範圍，就可以訪問$rootscope。
這裡的能夠訪問範圍指的是同DOM進行了連結，這個操作會在指令稍後的生命週期中進行。
3、我們的第一個指令
讓我們來建立一個自訂指令：<my-directive></my-directive>
假設我們已經建立了一個完整的HTML文檔，其中包含了AngularJS，並且DOM中已經用ng-app指令標識出了應用的根項目，當AngualrJs編譯HTML時就會調用指令。
調用指令意味著執行指令背後與之相關的JavaScript代碼，這些代碼是我們用指令定義寫出來的：
myDirective指令的定義是這樣的：
angular.module(‘myApp‘,[])
.dirctive(‘myDirective‘,function(){
return {
restrict:‘E‘,
template:‘<a href="http://google.com">Click me to go to Gooogle</a>‘
}
})
通過AngularJs模組API中的.directive()方法，我們可以通過傳入一個字串和一個函數註冊一個新指令。其中字串是這個指令的名字，指令名應該是駝峰命名風格的，函數用過返回一個對象。
因為我們之前在HTML裡使用my-directive聲明指令，因此指令定義必須以myDirective為名字
directive()方法返回的對象中包含了用來定義和配置指令的方法和屬性。為了儘快掌握簡單的屬性定義，我們只用了restrict和template兩個設定項來定義指令。
開啟Chrome開發人員工具，可以看到AngularJS在頁面載入以及調用指令定義後產生的程式碼，AngularJS把產生後的代碼提供給Chrome進行渲染
預設情況下，AngualrJS將模板產生的HTMl代碼嵌套在自訂標籤<my-directive>內部。
下面向指令定義中添加一些新的設定：我們可以將自訂標籤從產生的DOM中完全移除掉，並只留下由模板產生的連結。將replace設定為true就可以實現這個效果：
angular.module("myApp",[])
.directive("myDirective",function(){
return {
restrict:‘E‘,
replace:true,
template:‘<a href="http://Google.com">Click me to go to Google</a>‘
};
});
再次看一下產生後的代碼，會發現DOM原始的指令已經不見了，只有我們在模板中寫的HTML代碼。replace方法會用自訂元素取代指令聲明，而不是嵌套在其內部。
我們把建立的這些自訂元素稱為指令（用directive()方法建立），因為事實上指令並不需要建立一個新的自訂元素。
下面都是用來聲明前面建立指令的合法格式：
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
你好你好
AngularJS學習總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
