詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域
上次分享完該系列文章后有朋友也建議說1.x版本除了維護(hù)也沒有必要學(xué)習(xí),可以學(xué)習(xí)2.0開始學(xué)習(xí),我也知道1.x無論是從性能還是架構(gòu)上都沒有2.x好,但是我想因?yàn)楝F(xiàn)在也有一些朋友還在用1.x版本,因?yàn)?.x升級(jí)到2.x難度很大,甚至可以說重構(gòu),就向我們公司現(xiàn)在還在用1.x版本,所以我還是決定把這系列寫完,也給自己一個(gè)整理的過程。本人現(xiàn)在也正在學(xué)習(xí)Angular4.0版本的學(xué)習(xí),但是4.0用typescript及nodejs集成比較大,還有學(xué)習(xí)angular-cli腳手架的學(xué)習(xí),所以等我學(xué)會(huì)以后準(zhǔn)備在分享給大家。這個(gè)暫時(shí)先不討論,今天繼續(xù)給大家分享控制、數(shù)據(jù)綁定、作用域的知識(shí)點(diǎn)。
1、控制器:
概念:在angularJS中控制器是一個(gè)函數(shù),用來向視圖的作用域添加額外的功能,用來設(shè)置作用域的初始狀態(tài)并添加自定義行為。
控制器的聲明: app.controller(‘controllerName',function($scope){...})
// 控制器定義 // 第一參數(shù): 控制器名稱, 第二個(gè)參數(shù): 匿名函數(shù), 傳入作用域,并在作用域上添加額外功能 app.controller('myCtrl', function($scope) { $scope.expression = "hello expression"; $scope.ngbind = "hello ng-bind"; $scope.htmlbind = "<font color='red'>hello,htmlbind</font>"; $scope.subCtrl = "hello subCtrl"; });
控制器的使用:在需要的地方(html某個(gè)標(biāo)簽上)添加ng-controller。
<body ng-app="myapp" ng-controller="myCtrl">
從上面看控制的定義和使用還是比較簡(jiǎn)單的,但是很多人會(huì)對(duì)控制器的作用及控制器中都需要寫什么代碼有些不了解,有的人會(huì)把整個(gè)代碼都推擠到控制器中,我個(gè)人覺得控制器只是一個(gè)頁(yè)面view及mode的一個(gè)紐帶,只處理一些數(shù)據(jù)綁定,事件綁定等等一些列簡(jiǎn)單的邏輯,具體的服務(wù)器訪問或者數(shù)據(jù)讀取等應(yīng)該在服務(wù)里去實(shí)現(xiàn),服務(wù)我在下次的時(shí)候會(huì)詳細(xì)給大家說。
我簡(jiǎn)單對(duì)控制使用方面注意的事項(xiàng)整理了一下,供大家參考:
1)盡可能精簡(jiǎn)控制器和$scope相關(guān)的操作。
2)不要復(fù)用Controller,一個(gè)控制器一般只負(fù)責(zé)一小塊視圖。
3)不要在Controller中操作DOM,這不是控制器的職責(zé)。
4)盡量不要在Controller里做數(shù)據(jù)過濾、數(shù)據(jù)操作。
5)一般來說,Controller里不會(huì)互相調(diào)用的,控制器之間的交互會(huì)通過事件進(jìn)行
2、作用域($scope)
上面控制器中也提到作用域,控制器主要跟$scope相關(guān)的操作,我簡(jiǎn)單給大家說一下作用域在AngularJs中的作用及他的生命周期,我用內(nèi)部分享時(shí)的總結(jié)貼出來給大家分享一下:
3、數(shù)據(jù)綁定:
AngularJs數(shù)據(jù)綁定也有好幾種綁定,我給大家列出來,有可能大家都用過,有可能有的朋友有些綁定沒有用過。
1)表達(dá)式{{}}:
常量:{{‘const'}}
變量:{{abc}}
函數(shù):{{func()}}
表達(dá)式:{{a+b}}
該方法是最為常見的,表達(dá)式綁定,只要在Angular的作用域范圍之內(nèi)Angular遇到該表達(dá)式自動(dòng)解析為Html識(shí)別的表達(dá)式或者變量。
2)指令方式(ng-bind):
該綁定方式為在元素上添加ng-bind指令,然后Angular解析指令并執(zhí)行該綁定。
3)ng-model:
該方式主要用在表單提交方面用的比較多,實(shí)現(xiàn)數(shù)據(jù)雙向綁定,頁(yè)面內(nèi)容及model之間實(shí)現(xiàn)雙向數(shù)據(jù)。
4)ng-bind-html:
該方式為主要針對(duì)Html元素綁定時(shí)用,因?yàn)锳ngularjs默認(rèn)對(duì)Html標(biāo)簽不做解析,直接輸出,所以想在頁(yè)面上顯示Html標(biāo)簽內(nèi)容可以借助該綁定方法,但是該綁定需要引用一個(gè)序列化js文件。
<script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js"></script>
5)ng-bind-template:
該方式可以一次綁定多個(gè)變量及表達(dá)式。
使用場(chǎng)景:
首頁(yè)使用ng-bind, 模板里面的頁(yè)面可以使用括號(hào) {{}},表單使用ng-model,{{}}語(yǔ)法的缺陷:在用戶的不斷刷新中是有可能看到{}的;而且在網(wǎng)絡(luò)不好的情況下也有可能看到
如下代碼為把上述五種方法的整體代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁(yè)</title> <!--引用AngularJs庫(kù) --> <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script> <!-- 引入angularJs Html格式化庫(kù)--> <script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js"></script> </head> <!-- 數(shù)據(jù)綁定方式1、{{}} 2、指令綁定 3、ng-bind綁定 4、ng-bind-html綁定 5、ng-bind-template綁定--> <body ng-app="myapp" ng-controller="myCtrl"> <!-- 1、表達(dá)式綁定 --> <h1>{{expression}}</h1> <!-- 2、指令綁定--> <h2>{{ngmodel}}</h2> <input type="text" ng-model="ngmodel"> <!-- 3、ng-bind綁定--> <h3 ng-bind="ngbind"></h3> <h3 class="ng-bind:ngbind"></h3> <!-- 4、ng-bind-html綁定--> <h4 ng-bind-html="htmlbind"></h4> <!-- 5、ng-bind-template --> <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5> </body> </html> <script> //模塊定義 // 第一個(gè)參數(shù):應(yīng)用名稱,第二個(gè)參數(shù):應(yīng)用依賴模塊 var app = angular.module('myapp', ['ngSanitize']); // 控制器定義 // 第一參數(shù): 控制器名稱, 第二個(gè)參數(shù): 匿名函數(shù), 傳入作用域,并在作用域上添加額外功能 app.controller('myCtrl', function($scope) { $scope.expression = "hello expression"; $scope.ngbind = "hello ng-bind"; $scope.htmlbind = "<font color='red'>hello,htmlbind</font>"; $scope.subCtrl = "hello subCtrl"; }); </script>
以上這篇詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Angularjs全局變量被作用域監(jiān)聽的正確姿勢(shì)
- 詳細(xì)談?wù)凙ngularJS的子級(jí)作用域問題
- 關(guān)于angularJs指令的Scope(作用域)介紹
- 淺談angularJS 作用域
- 詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
- 詳解AngularJS中的作用域
- AngularJS實(shí)現(xiàn)單獨(dú)作用域內(nèi)的數(shù)據(jù)操作
- AngularJS入門教程之Scope(作用域)
- AngularJS Controller作用域
- 詳解angularjs中的隔離作用域理解以及綁定策略
- AngularJS中的作用域?qū)嵗治?/a>
相關(guān)文章
Angular2從搭建環(huán)境到開發(fā)步驟詳解
本文的內(nèi)容主要是想幫助那些想學(xué)習(xí)Angular2的朋友們,因?yàn)槲易约涸谕鍭ngular2時(shí)碰到了不少坑,而且Angular2語(yǔ)法一直處于變化中,讓人很頭疼。不過也怪不了Anguar2,因?yàn)樗F(xiàn)在是處于并長(zhǎng)期處于alpha階段,下面就通過本文來學(xué)習(xí)Angular2的搭建環(huán)境和開發(fā)吧。2016-10-10利用Angular.js限制textarea輸入的字?jǐn)?shù)
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識(shí)后,就可以開始創(chuàng)建第一個(gè)AngularJS應(yīng)用程序,這篇文章通過示例給大家介紹如何利用Angular.js限制textarea輸入的字?jǐn)?shù),有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法,文章開始先進(jìn)行了簡(jiǎn)單的介紹,而后通過完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-12-12AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
這篇文章主要介紹了AngularJS數(shù)據(jù)綁定原理,較為詳細(xì)的分析了AngularJS數(shù)據(jù)綁定的原理、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別
這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09Angularjs通過指令監(jiān)聽ng-repeat渲染完成后執(zhí)行腳本的方法
指令是angular的核心功能之一,用好了事半功倍,監(jiān)聽ng-repeat執(zhí)行狀態(tài)僅僅是它功能的冰山一角吧。下面這篇文章主要介紹了Angularjs通過指令監(jiān)聽ng-repeat渲染完成后執(zhí)行腳本的方法,需要的朋友可以參考下。2016-12-12