快捷導(dǎo)航

AngularJS實(shí)用基礎(chǔ)知識(shí)_入門(mén)必備篇(推薦)

更新時(shí)間：2017年07月10日 07:44:06 投稿：jingxian

下面小編就為大家?guī)?lái)一篇AngularJS實(shí)用基礎(chǔ)知識(shí)_入門(mén)必備篇(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

今天來(lái)和大家學(xué)習(xí)一下AngularJS……

AngularJS 通過(guò)新的屬性和表達(dá)式擴(kuò)展了 HTML。

AngularJS 可以構(gòu)建一個(gè)單一頁(yè)面應(yīng)用程序。

AngularJS 學(xué)習(xí)起來(lái)非常簡(jiǎn)單。

一、AngularJS指令與表達(dá)式

【AngularJS常用指令】

1、ng-app:聲明Angular所管轄的區(qū)域，一般寫(xiě)在body或HTML上，原則上一個(gè)頁(yè)面只有一個(gè)。

2、ng-model:把元素值（比如輸入域的值）綁定到應(yīng)用程序的變量中。

eg:<input type="text" ng-model="name"/>

3、ng-bind:把應(yīng)用程序變量中的數(shù)據(jù)綁定到HTML視圖中，可用表達(dá)式替代。

eg:<div id="div1" ng-bind="name">
</div>等效于<div id="div1" >{{name}}</div>

4、ng-init:初始化 AngularJS應(yīng)用程序變量。

eg:<body data-ng-app="" ng-init="name=123">

5、表達(dá)式：{{}}綁定表達(dá)式，可以包含文字，運(yùn)算符和變量。

但是表達(dá)式在網(wǎng)頁(yè)加載瞬間會(huì)看到{{}}，所以可以用ng-bind=""替代。

eg:{{ 5 + "" + 5 + ',Angular' }}

【基本概念】

指令：AngularJS中，通過(guò)擴(kuò)展HTML的屬性提供功能。

所以，ng-開(kāi)頭的新屬性，被我們成為指令。

二、AngularJS中的MVC中的作用域

【MVC三層架構(gòu)】

1、model(模型):

應(yīng)用程序中用于處理數(shù)據(jù)的部分。（保存或修改數(shù)據(jù)到數(shù)據(jù)庫(kù)、變量等）。AngularJS中的Model特指的是：數(shù)據(jù)。

View(視圖):用戶看到的用于顯示數(shù)據(jù)的頁(yè)面。

Controller(控制器):應(yīng)用程序中處理用戶交互的部分。負(fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。

2、工作原理：

用戶從視圖層發(fā)出請(qǐng)求，controller接收到請(qǐng)求后轉(zhuǎn)發(fā)給對(duì)應(yīng)的model處理，model處理完成后返回結(jié)果給controller，并在View層反饋給用戶.

3、創(chuàng)建一個(gè)Angular模塊，即ng-app所綁定的部分 ,需傳遞兩個(gè)參數(shù)：

①模塊名稱：即ng-app所需要綁定的名稱，ng-app="myApp"

②數(shù)組：需要注入的模塊名稱，不需要可為空。

eg:var app= angular.module("myApp",[]);

在Angular模塊上，創(chuàng)建一個(gè)控制器Controller，需要傳遞兩個(gè)參數(shù)。

①Controller名稱，即ng-controller需要綁定的名稱。ng-controller="myCtrl"

②Controllerd的構(gòu)造函數(shù)：構(gòu)造函數(shù)可以傳入多個(gè)參數(shù)，包括$scope/$rootScope以及各種系統(tǒng)內(nèi)置對(duì)象；

【AngularJS中的作用域】

①$scope：局部作用域，聲明在$scope上的屬性和方法，只能在當(dāng)前的Controller中使用

②$rootScope：根作用域，聲明在$rootScope上的屬性和方法，

可以在ng-app所包含的任何區(qū)域使用（無(wú)論是否同Controller，或是否在Controller包含范圍中）

>>>若沒(méi)有使用$scope聲明變量，而直接在HTML中使用ng-model綁定的變量作用域?yàn)椋?/p>

1、如果ng-model在某個(gè)ng-controller中，則此變量會(huì)默認(rèn)綁定到當(dāng)前Controller的$scope上;

2、如果ng-model沒(méi)有在任何一個(gè)ng-controller中，此變量會(huì)綁定到$rootScope上。

三、AngularJS過(guò)濾器

AngularJS中，過(guò)濾器可以使用一個(gè)管道字符（|）添加到表達(dá)式和指令中。

>>>系統(tǒng)內(nèi)置過(guò)濾器：

currency:格式化數(shù)字為貨幣格式。
filter:從數(shù)組項(xiàng)中選擇一個(gè)子集。
lowercase:格式化字符串為小寫(xiě)。
orderBy:根據(jù)某個(gè)表達(dá)式排列數(shù)組。
uppercase:格式化字符串為大寫(xiě)。

eg:

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

【自定義過(guò)濾器】

.filter('reverse',function(){ //可以注入依賴
return function(text){
if(!angular.isString(text)){
return "您輸入的不是字符串！"
}else{
return text.split("").reverse().join("");
}
}
})

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

一、AngularJS中的http

$http 是 AngularJS 中的一個(gè)核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)。

二、AngularJS中的select

①使用數(shù)組作為數(shù)據(jù)源，其中，x表示數(shù)組的每一項(xiàng)。

默認(rèn)會(huì)將x直接綁定到option的value中，而option顯示的內(nèi)容，由前面的x for...決定。

eg:
<section ng-model= "name" ng-options="x.site for x in sites"></section>

②使用對(duì)象作為數(shù)據(jù)源，其中，（x,y）表示鍵值對(duì)，x為鍵，y為值。

默認(rèn)會(huì)將值y綁定到option的value中，而option顯示的內(nèi)容，由前面的x for...決定。

eg:
<section ng-model= "name" ng-options="x for (x,y) in sites"></section>

三、AngularJS中的DOM操作

①ng-disabled="true/false"

當(dāng)傳入true時(shí)，控件禁用。傳入false時(shí)，啟用。

②ng-show

默認(rèn)隱藏傳入true時(shí)顯示
<label>
<input type="checkbox" ng-model="mySwitch1">是否
顯示？
</label>
<button ng-show="mySwitch1" class="btn btn-primary">點(diǎn)我!</button>
<p></p>

③ng-hide

默認(rèn)顯示傳入true是隱藏
<label>
<input type="checkbox" ng-model="mySwitch2">是否隱藏？
</label>
<button ng-hide="mySwitch2" class="btn btn-primary">點(diǎn)我!</button>
<p></p>

④ng-click

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

DOM操作附錄：

eg:

先導(dǎo)入JS文件angular.js！?。?/span>

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

JS代碼：

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

五、AngularJS中的表單驗(yàn)證

1、表單中常見(jiàn)的驗(yàn)證操作：

$dirty:表單有填寫(xiě)記錄
$valid:字段內(nèi)容合法的
$invalid:字段內(nèi)容是非法的
$pristine:表單沒(méi)有填寫(xiě)記錄
$error:表單驗(yàn)證不通過(guò)的錯(cuò)誤信息

2、驗(yàn)證時(shí)需給表單及需要驗(yàn)證的input，設(shè)置name屬性；

給form及input設(shè)置name后，會(huì)將form表單信息，默認(rèn)綁定到$scope作用域中，故可以使用formName.inputName.$驗(yàn)證操作得到驗(yàn)證結(jié)果；

eg:

formName.inputName.$dirty="true" 表單被填寫(xiě)過(guò)
formName.inputName.$invalid="true" 表單輸入不合法
formName.inputName.$error.required="true" 表單必填但未填
$error支持的驗(yàn)證有：required/minlength/maxlength/pattern/email/number/data
/url等……

3、為避免沖突，例如使用type="email"時(shí)，H5也會(huì)進(jìn)行驗(yàn)證操作。

如果只想使用AngularJS驗(yàn)證，可以使用<form novalidate></form>屬性，禁用H5自帶驗(yàn)證功能。

六、AngularJS中的動(dòng)畫(huà)

AngularJS中使用動(dòng)畫(huà) ：

提供了動(dòng)畫(huà)效果，可以配合 CSS使用。

1、AngularJS 使用動(dòng)畫(huà)需要引入angular-animate.js庫(kù)！

2、如果頁(yè)面中沒(méi)有自定義的模塊（ng-app），可以直接綁定系統(tǒng)模塊ng-app="ngAnimate"；

如果頁(yè)面中已有自定義模塊，可以在自定義模塊后注入"ngAnimate"模塊。
eg:angular.module("app",["ngAnimate"])

3、當(dāng)調(diào)用相關(guān)指令控制元素顯示隱藏時(shí)，會(huì)自動(dòng)添加對(duì)應(yīng)的class類；

ng-show/ng-hide 會(huì)移除/添加ng-hide
ng-if/ng-switch/ng-repeat等其他指令，需要分別設(shè)置顯示后和隱藏后的class樣式；
顯示后：.ng-enter-active,.ng-leave{}
隱藏后：.ng-enter,.ng-leave-active{}

七、AngularJS中的路由

1、載入了實(shí)現(xiàn)路由的 js 文件：angular-route.js。

2、包含了 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊。

eg:angular.module("app",["ngRoute"])

3.即將超鏈接改為路有格式：

eg:<a href="#/page1" rel="external nofollow" >page1</a>

4.在config中，注入$routeProvider，進(jìn)行路由配置：

$routeProvider
.when('/',{template:'這是首頁(yè)頁(yè)面'})
.when('/page1',{template:'這是page1頁(yè)面'})
.when('/page2',{template:'這是page2頁(yè)面'})
.when('/page3',{template:'這是page3頁(yè)面'})
.otherwise({redirectTo:'/'});
})

5、在頁(yè)面的合適位置，添加ng-view，用于承載打開(kāi)的頁(yè)面
<div ng-view></div> <ng-view></ng-view>

【路由參數(shù)對(duì)象中可選屬性】

1.tempalte：自定的HTML模板，會(huì)加載在ng-view中
2.tempalteUrl:導(dǎo)入外部的HTML模板，為了避免沖突外部的HTML只需要保留body內(nèi)部的代碼即可；
3.redirectTo：重定向于某個(gè)頁(yè)面，一般用于.otherwise()中；
4.controller：在當(dāng)模板上執(zhí)行的controller函數(shù)，生成新的scope

以上這篇AngularJS實(shí)用基礎(chǔ)知識(shí)_入門(mén)必備篇(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: