快捷導(dǎo)航

AngularJs基本特性解析(一)

更新時(shí)間：2016年07月21日 10:31:09 作者：婷風(fēng)

angularjs是javascript的一個(gè)框架，通過(guò)script標(biāo)簽添加到網(wǎng)頁(yè)中。這篇文章主要介紹了AngularJs基本特性解析(一)的相關(guān)資料,需要的朋友可以參考下

現(xiàn)在的前端項(xiàng)目中基本上都會(huì)用到angularjs框架，之前并不了解這個(gè)框架，也是因?yàn)樽罱邮值捻?xiàng)目，所以打算好好的學(xué)習(xí)下它。之前都是搞pc端，現(xiàn)在接手的是移動(dòng)端的項(xiàng)目，移動(dòng)端UI框架用的是ionic＋vordova，沒(méi)有用bootstrap，主要做的是ios+安卓的app界面，ionic這個(gè)框架也不太了解，也需要花時(shí)間好好熟悉下。angularjs學(xué)習(xí)小白一枚，歡迎大神指正。

AngularJs是什么？

簡(jiǎn)單來(lái)說(shuō)，即javascript的一個(gè)框架，通過(guò)script標(biāo)簽添加到網(wǎng)頁(yè)中。即我們使用angularjs時(shí)，需要引入下面的代碼。

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

通常建議把腳本放在<body>元素的底部，作用是：提高網(wǎng)頁(yè)加載速度。因?yàn)閔tml加載不受制于腳本加載。

AngularJs的作用？

AngularJS 使得開發(fā)現(xiàn)代的單一頁(yè)面應(yīng)用程序（SPAs：Single Page Applications）變得更加容易。
•AngularJS 把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素。
•AngularJS 可以克隆和重復(fù) HTML 元素。
•AngularJS 可以隱藏和顯示 HTML 元素。
•AngularJS 可以在 HTML 元素"背后"添加代碼。
•AngularJS 支持輸入驗(yàn)證。

像現(xiàn)在移動(dòng)端基本上使用單頁(yè)面的比較，就是利用angular的路由轉(zhuǎn)換進(jìn)行的。像我們現(xiàn)在這個(gè)項(xiàng)目也是使用的單頁(yè)面。即在主頁(yè)面里面，即跳轉(zhuǎn)的頁(yè)面都在主頁(yè)面里面進(jìn)行。截圖如下：

AngularJs表達(dá)式

AngularJS 表達(dá)式寫在雙大括號(hào)內(nèi)：{{ expression }}。

AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。

AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)。

AngularJS 表達(dá)式很像 JavaScript 表達(dá)式：它們可以包含文字、運(yùn)算符和變量。

<!doctype html>
<!-- 標(biāo)記angularjs處理整個(gè)html頁(yè)并引導(dǎo)應(yīng)用 -->
<html ng-app> 
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
<p>name:{{"ting"+"feng"}}</p>
<p>number:{{5+5}}</p>
<div ng-init="person={name:'tingfeng',age:'13'}">
<p>name:{{person.name}}&nbsp;age:{{person.age}}</p>
</div>
</body>
</html>

AngularJs在html中的應(yīng)用

主要通過(guò)ng-directive擴(kuò)展html，angularjs指令是以ng作為前綴的html屬性，包含有四大特性：mvc，模塊化，指令系統(tǒng)（directive），databinding

ng-init:該指令初始化angularjs應(yīng)用程序變量。比如下面的列子：

<!doctype html>
<!-- 標(biāo)記angularjs處理整個(gè)html頁(yè)并引導(dǎo)應(yīng)用 -->
<html ng-app> 
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
<div ng-init="name='tingfeng'">
<p>name is:<span ng-bind="name"></span></p>
</div>
</body>
</html>

ng-app:該指令表示定義一個(gè)angularjs應(yīng)用程序。通常放在html后面，也可以在局部使用ng-app指令，比如<div ng-app>則angularjs腳本僅在該div中運(yùn)行,即表明從此處開始，所有內(nèi)容均為angularjs進(jìn)行管理。

ng-model:該指令是指把元素值（比如輸入框的值）綁定到應(yīng)用程序中。

ng-bind：該指令是把應(yīng)用程序數(shù)據(jù)綁定到html視圖中。使用相應(yīng)的指令，即可利用angularjs操作html頁(yè)面。具體怎么使用，我們來(lái)看看代碼。

此時(shí)利用ng-model綁定到setname模型變量上，當(dāng)在輸入框中輸入值時(shí)，相應(yīng)的setname也會(huì)變化。可自行貼碼測(cè)試。

關(guān)于$scope解釋

$scope是什么？有什么作用？如何使用它？

簡(jiǎn)單來(lái)說(shuō)，scope是一個(gè)pojo（plainoldjavascriptobject）,類似于一個(gè)對(duì)象，有屬性和方法， scope是一個(gè)pojo（plainoldjavascriptobject）,類似于一個(gè)對(duì)象，有屬性和方法，scope提供了watch()和 watch()和apply()工具方法。angularjs的mvc全部借助于$scope進(jìn)行的。

特性：1.是表達(dá)式的執(zhí)行環(huán)境（或者作用域）

2.scope是一個(gè)樹型結(jié)構(gòu)，與dom標(biāo)簽平行，其上含有一個(gè) scope是一個(gè)樹型結(jié)構(gòu)，與dom標(biāo)簽平行，其上含有一個(gè)rootscope處于最頂層。

3.scope會(huì)繼承父 scope會(huì)繼承父rootscope的屬性和方法。

4.$scope可以傳播事件，類似于dom，可以向上傳播也可以向下。

5.$scope不僅是mvc的基礎(chǔ)，也是后面實(shí)現(xiàn)雙向綁定的基礎(chǔ)。

AngularJs的組成部分

模板：即編寫的html和css的文件，展現(xiàn)應(yīng)用的視圖。angularjs可以在html中構(gòu)建自己的html標(biāo)記！
控制器:與ajax不同，不需要另外編寫偵聽器或dom控制器，因?yàn)樗呀?jīng)內(nèi)置到angularjs中。好處：便于編寫，測(cè)試，維護(hù)和理解。

模型數(shù)據(jù)：模型是從angularjs做用域?qū)ο蟮膶傩砸甑?。模型的?shù)據(jù)可能是js對(duì)象，數(shù)組或基本類型，但都屬于angularjs作用域?qū)ο蟆?br />

如何理解angularjs中的作用域？

即一個(gè)作用域可以視作模板，模型和控制器協(xié)同工作的粘接器，angularjs使用作用域，同時(shí)還有模板中的信息，數(shù)據(jù)模型和控制器。這些可以幫助模型和視圖分離，但他們兩者確實(shí)時(shí)同步的！任何對(duì)于模型的更改都會(huì)即時(shí)反映到視圖上，任何視圖的更改都會(huì)被立刻體現(xiàn)在模型中。

視圖：在angularjs中，一個(gè)視圖是模型通過(guò)html模板渲染之后的映射。即不論模型什么時(shí)候發(fā)生變化，angularjs會(huì)實(shí)時(shí)更新結(jié)合點(diǎn)，隨之更新視圖。

還是貼碼來(lái)看，更加直觀！

<!doctype html>
<html ng-app="HelloAngular"> 
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script>
//模塊化
var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular
myModule.controller("helloAngular", ['$scope',
function HelloAngular($scope) {
$scope.value = {
name: 'jiangting'
};
}
]); 
</script>
</head>
<body>
<!-- mvc看angular-->
<div ng-controller="helloAngular"> －－控制器為helloAngular
<p>{{value.name}},hello!</p>
</div>
<!-- angular 模塊化 --> 
</body>
</html>

我們來(lái)看看controller的應(yīng)用，即控制器，即控制器通過(guò)操作數(shù)據(jù)，將其進(jìn)行綁定，展現(xiàn)在html頁(yè)面上。

AngularJS 模塊（Module）定義了 AngularJS 應(yīng)用。

AngularJS 控制器（Controller）用于控制 AngularJS 應(yīng)用。

ng-app指令定義了應(yīng)用, ng-controller 定義了控制器。我們用上面的列子來(lái)看：

AngularJS模塊定義應(yīng)用：

var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular

angularjs控制器控制應(yīng)用：

myModule.controller("helloAngular", ['$scope',
function HelloAngular($scope) {
$scope.value = {
name: 'jiangting'
};
}
]);

了解前端mvc

關(guān)于controller特性：

1.不要試圖去服用controller，一個(gè)控制器一般只負(fù)責(zé)一個(gè)小塊視圖

2.不要直接在controller中操作dom，這不是其職責(zé)

3.不要在controller里面做數(shù)據(jù)過(guò)濾的操作，ng有filter服務(wù)

4.不要在controller里面做數(shù)據(jù)格式化，ng有很好用的表單控件

5.controller是不會(huì)互相調(diào)用，控制器之間的交互會(huì)通過(guò)事件進(jìn)行，通過(guò) filter服務(wù)4.不要在controller里面做數(shù)據(jù)格式化，ng有很好用的表單控件5.controller是不會(huì)互相調(diào)用，控制器之間的交互會(huì)通過(guò)事件進(jìn)行，通過(guò)scope進(jìn)行調(diào)用

下面看下如何自定義指令系統(tǒng)，代碼如下：

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script>
//指令系統(tǒng)
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'E',
template: '<div>Hi everyone!</div>', --這里我們插入一段html標(biāo)簽
replace: true
}
});
</script>
</head>
<body> 
<hello></hello>
</body>
</html>

directive中，后面返回有三個(gè)參數(shù)，其中template中指所插入的html標(biāo)簽?，F(xiàn)在我門自己來(lái)寫一段html代碼，看看如何將其變?yōu)閍ngularjs的寫法。

原靜態(tài)html代碼如下：

<ul>
<li>
<span>new1</span>
<p>just a test page1</p>
</li>
<li>
<span>new2</span>
<p>just a test page2</p>
</li> 
</ul>

將其改版為angularjs的寫法如下：

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script>
//$scope為控制器的作用域，
//angularjs作用域：可以視作模板，當(dāng)應(yīng)用啟動(dòng)之后，會(huì)有一個(gè)根作用域被創(chuàng)建出來(lái)，而控制器的作用域是根作用域的一個(gè)典型后繼。
function newsCtrl($scope){
$scope.news=[
{"content":"new1",
"introduce":"just a test page1"},
{"content":"new2",
"introduce":"just a test page2"}
];
$scope.phones={
length:"4" 
// 單個(gè)的屬性不能加分號(hào)，多個(gè)屬性用逗號(hào)分隔
};
}
</script>
</head>
<body ng-controller="newsCtrl">
<ul>
<li ng-repeat="new in news">
{{new.content}}
<p>{{new.introduce}}</p>
</li>
</ul> 
</body>
</html>

以上所述是小編給大家介紹的AngularJs基本特性解析(一)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: