什么是angular js的控制器?

一.背景介紹

在學習angular的過程中,不同于javascript,遇到了許多新的概念,比如指令(directive)、服務(service)、控制器(controller)、模型(model)等。還接觸到了MVC這種將數據管理、業務邏輯控制和數據展示分離開,進而使程序的邏輯性和可維護性更強的思想。接下來,我們會分享、討論一下控制器的用法。

二.知識剖析

2.1什么是控制器?

AngularJS中的控制器是一個常規的js對象,也是一個函數,用來向視圖的作用域添加額外的功能.我們用它來給作用域對象設置初始狀態,并添加自定義行為. 一般的使用的方法是通過調用模塊的controller()方法注冊控制器,該方法接收兩個參數,第一個參數是控制器名稱,第二個參數是一個匿名函數,在該函數中可以聲明一個$scope形參,該形參就表示了控制器對應的作用域我們可以通過一個簡單的列子來直觀的感受一下:

<div?ng-controller="MyController">


</div>

<p>商品價格:<input type="number" ng-model="price"></p>

商品數量:

總價:{{price * num}}

總價:{{totalPrice()}}

//創建一個名為app的angular js應用模塊

var app=angular.module('app',[]);

//注冊一個名為MyController的控制器

app.controller('MyController',function($scope) {

//通過$scope為price和num這兩個屬性設置初始值

$scope.price=50;

$scope.num=2;

2.2 控制器的作用域范圍和繼承

在html中使用ng-controller指令實例化控制器時,會產生一個新的作用域對象。在同一個頁面的ng-app作用域下可以通過ng-controller實例化多個控制器對象。但是,每個控制器對應的作用域對象只能與ng-controller指令所在標簽的開始與結束標簽之間的DOM元素上建立數據綁定。

這里創建了三個ng-controller 指令,這樣創建了三個scope(作用域對象):

MainController scope,包含了name和age兩個屬性

ChildController scope,繼承了age但覆蓋了name屬性

lastController scope,覆蓋了name和age兩個屬性

myApp.controller('MainController', function($scope) {

$scope.age = 20;

$scope.name = '老大';

});

myApp.controller('ChildController', function($scope) {

$scope.name = '老二';

});

myApp.controller('LastController', function($scope) {

$scope.age = 18;

$scope.name = '老三';

});

2.3 控制器的作用

控制器的作用主要有兩個:第一個,scope作用域對象初始化 ;第二個,給scope作用域對象通過一些方法或者函數增加行為 。

三.常見問題

如何在多個controller中進行信息的溝通?

四.解決方案

方法一:利用作用域繼承的原理,子控制器訪問父級控制器中的內容。

方法二:使用service服務進行數據傳輸。

在之前的例子我們提到,controller是相對獨立的,兩個controller之間,內存是不共享的,同級DOM下,兩個controller是無法互相訪問其中的屬性或者方法的。

那么,在實際項目中,我們會有很多的頁面和控制器,不同頁面下的controller之間有時候是需要傳輸數據的,之前我們學習了localStorage,用于頁面之間的傳參。其實,官方建議頁面之間通過service互相訪問。

五.編碼實戰

六.擴展思考

在多個controller中進行信息的溝通還有哪些?

1.$rootscope

大家都知道$scope是html和單個controller之間的橋梁,數據綁定就靠他了。而$rootscope可以被認為是全局$scope, 在各個controller里面都可以顯示,也都可以修改。

2.作用域繼承 + $watch

為了解決作用域繼承不能解決的從子孫到祖先的數據傳遞問題,可以用$scope.$watch函數來監視數據變化。

七.參考文獻

1.不同controller作用域之間通信的方式

八.更多討論

1.controller是怎樣獲得service中的數據的?

--通過依賴注入的方式實現的

2.angular怎么傳參?

--用ui-sref和state.go

3.為什么controller as vm是一項最佳實踐?

--ng-if會阻斷$scope,用這種方法就沒關系

PPT



undefined_騰訊視頻
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容