AngularJS實用基礎知識---入門必備

關鍵詞：AngularJS指令與表達式、AngularJS中的MVC中的作用域、AngularJS過濾器、AngularJS中的 http && select && DOM操作、AngularJS中的表單驗證、AngularJS中的動畫、AngularJS中的路由 ...

前言

今天來和大家學習一下AngularJS……

　　AngularJS 通過新的屬性和表達式擴展了 HTML。

　　AngularJS 可以構建一個單一頁面應用程式。

　　AngularJS 學習起來非常簡單。

一、AngularJS指令與表達式

【AngularJS常用指令】
1、ng-app:聲明Angular所管轄的區域，一般寫在body或HTML上，原則上一個頁面只有一個。
2、ng-model:把元素值（比如輸入域的值）綁定到應用程式的變數中。
eg:<input type="text" ng-model="name"/>
3、ng-bind:把應用程式變數中的數據綁定到HTML視圖中，可用表達式替代。
eg:<div id="div1" ng-bind="name">
</div>等效於<div id="div1" >{{name}}</div>
4、ng-init:初始化 AngularJS應用程式變數。
eg:<body data-ng-app="" ng-init="name=123">
5、表達式：{{}}綁定表達式，可以包含文字，運算符和變數。
但是表達式在網頁載入瞬間會看到{{}}，所以可以用ng-bind=""替代。
eg:{{ 5 + "" + 5 + ',Angular' }}

【基本概念】
指令：AngularJS中，通過擴展HTML的屬性提供功能。
所以，ng-開頭的新屬性，被我們成為指令。

二、AngularJS中的MVC中的作用域

【MVC三層架構】
1、model(模型):
應用程式中用於處理數據的部分。（保存或修改數據到資料庫、變數等）。AngularJS中的Model特指的是：數據。
View(視圖):用戶看到的用於顯示數據的頁面。
Controller(控制器):應用程式中處理用戶交互的部分。負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。

2、工作原理：
用戶從視圖層發出請求，controller接收到請求後轉發給對應的model處理，model處理完成後返回結果給controller，併在View層反饋給用戶.

3、創建一個Angular模塊，即ng-app所綁定的部分 ,需傳遞兩個參數：
①模塊名稱：即ng-app所需要綁定的名稱，ng-app="myApp"
②數組：需要註入的模塊名稱，不需要可為空。
eg:var app= angular.module("myApp",[]);

在Angular模塊上，創建一個控制器Controller，需要傳遞兩個參數。
①Controller名稱，即ng-controller需要綁定的名稱。ng-controller="myCtrl"
②Controllerd的構造函數：構造函數可以傳入多個參數，包括$scope/$rootScope以及各種系統內置對象；

【AngularJS中的作用域】
①$scope：局部作用域，聲明在$scope上的屬性和方法，只能在當前的Controller中使用
②$rootScope：根作用域，聲明在$rootScope上的屬性和方法，
可以在ng-app所包含的任何區域使用（無論是否同Controller，或是否在Controller包含範圍中）

>>>若沒有使用$scope聲明變數，而直接在HTML中使用ng-model綁定的變數作用域為：
1、如果ng-model在某個ng-controller中，則此變數會預設綁定到當前Controller的$scope上;
2、如果ng-model沒有在任何一個ng-controller中，此變數會綁定到$rootScope上。

三、AngularJS過濾器

AngularJS中，過濾器可以使用一個管道字元（|）添加到表達式和指令中。

>>>系統內置過濾器：
currency:格式化數字為貨幣格式。
filter:從數組項中選擇一個子集。
lowercase:格式化字元串為小寫。
orderBy:根據某個表達式排列數組。
uppercase:格式化字元串為大寫。

eg:
<p>{{"aBcDeF"|uppercase}}</p>
<p>{{"aBcDeF"|lowercase}}</p>
<p>{{123456|currency}}</p>

【自定義過濾器】

1 .filter('reverse',function(){ //可以註入依賴
2 return function(text){
3 if(!angular.isString(text)){
4 return "您輸入的不是字元串！"
5 }else{
6 return text.split("").reverse().join("");
7 }
8 }
9 })

四、AngularJS中的 http && select && DOM操作

一、AngularJS中的http
$http 是 AngularJS 中的一個核心服務，用於讀取遠程伺服器的數據。

二、AngularJS中的select
①使用數組作為數據源，其中，x表示數組的每一項。
預設會將x直接綁定到option的value中，而option顯示的內容，由前面的x for...決定。
eg:
<section ng-model= "name" ng-options="x.site for x in sites"></section>

②使用對象作為數據源，其中，（x,y）表示鍵值對，x為鍵，y為值。
預設會將值y綁定到option的value中，而option顯示的內容，由前面的x for...決定。
eg:
<section ng-model= "name" ng-options="x for (x,y) in sites"></section>

三、AngularJS中的DOM操作
①ng-disabled="true/false"
當傳入true時，控制項禁用。傳入false時，啟用。
<label>
<input type="checkbox" ng-model="mySwitch">是否同意
小希真萌！
</label>
<button ng-disabled="!mySwitch" class="btn btn-primary">點我!</button>
<p></p>

②ng-show
預設隱藏傳入true時顯示
<label>
<input type="checkbox" ng-model="mySwitch1">是否
顯示？
</label>
<button ng-show="mySwitch1" class="btn btn-primary">點我!</button>
<p></p>

③ng-hide
預設顯示傳入true是隱藏
<label>
<input type="checkbox" ng-model="mySwitch2">是否隱藏？
</label>
<button ng-hide="mySwitch2" class="btn btn-primary">點我!</button>
<p></p>

④ng-click
定義了AngularJS中的點擊事件。
只能觸發綁定在Angular作用域中的屬性與方法。
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
<button ng-click="func()">說一下感想吧！</button>

DOM操作附錄：
eg:
先導入JS文件angular.js！！！

<script src="libs/angular.js"></script>

JS代碼：

1 angular.module("app",[])
2 .controller("ctrl",function($scope,$rootScope){
3 $scope.count = 10;
4 $scope.func = function(){
5 alert("小希真萌！");
6 }
7 })

五、AngularJS中的表單驗證

1、表單中常見的驗證操作：
$dirty:表單有填寫記錄
$valid:欄位內容合法的
$invalid:欄位內容是非法的
$pristine:表單沒有填寫記錄
$error:表單驗證不通過的錯誤信息

2、驗證時需給表單及需要驗證的input，設置name屬性；
給form及input設置name後，會將form表單信息，預設綁定到$scope作用域中，故可以使用formName.inputName.$驗證操作得到驗證結果；
eg:
formName.inputName.$dirty="true" 表單被填寫過
formName.inputName.$invalid="true" 表單輸入不合法
formName.inputName.$error.required="true" 表單必填但未填
$error支持的驗證有：required/minlength/maxlength/pattern/email/number/data
/url等……

3、為避免衝突，例如使用type="email"時，H5也會進行驗證操作。
如果只想使用AngularJS驗證，可以使用<form novalidate></form>屬性，禁用H5自帶驗證功能。

六、AngularJS中的動畫

AngularJS中使用動畫：
提供了動畫效果，可以配合 CSS使用。

1、AngularJS 使用動畫需要引入angular-animate.js庫！

2、如果頁面中沒有自定義的模塊（ng-app），可以直接綁定系統模塊ng-app="ngAnimate"；
如果頁面中已有自定義模塊，可以在自定義模塊後註入"ngAnimate"模塊。
eg:angular.module("app",["ngAnimate"])

3、當調用相關指令控制元素顯示隱藏時，會自動添加對應的class類；
ng-show/ng-hide 會移除/添加ng-hide
ng-if/ng-switch/ng-repeat等其他指令，需要分別設置顯示後和隱藏後的class樣式；
顯示後：.ng-enter-active,.ng-leave{}
隱藏後：.ng-enter,.ng-leave-active{}

七、AngularJS中的路由

1、載入了實現路由的 js 文件：angular-route.js。

2、包含了 ngRoute 模塊作為主應用模塊的依賴模塊。
eg:angular.module("app",["ngRoute"])

3.即將超鏈接改為路有格式：
eg:<a href="#/page1">page1</a>

4.在config中，註入$routeProvider，進行路由配置：
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/page1',{template:'這是page1頁面'})
.when('/page2',{template:'這是page2頁面'})
.when('/page3',{template:'這是page3頁面'})
.otherwise({redirectTo:'/'});
})
5、在頁面的合適位置，添加ng-view，用於承載打開的頁面
<div ng-view></div> <ng-view></ng-view>

【路由參數對象中可選屬性】
1.tempalte：自定的HTML模板，會載入在ng-view中
2.tempalteUrl:導入外部的HTML模板，為了避免衝突外部的HTML只需要保留body內部的代碼即可；
3.redirectTo：重定向於某個頁面，一般用於.otherwise()中；
4.controller：在當模板上執行的controller函數，生成新的scope

今天的理論知識先分享到這裡，願能幫助到你~~~小菜鳥一枚，感謝您的支持！

作者：夕照希望
出處：http://www.cnblogs.com/hope666/