今天主要跟大家詳細講解一下angularjs的三大模塊： modal，controller，view。
首先跟大家說一下這三個模塊之間的關系。
1.數據模型（modal）主要提供數據。它不會和視圖（view）直接操作。
2.controller保存modal提供的數據，與視圖進行操作。
3.view是視圖，也就是頁面展示。
4.總而言之，controller負責數據和視圖之間的通信，就是兩者的接口人。他們分工明確，實現了模塊化。
一.如何使用數據模型（modal）？
講到數據模型，我們再來看一下上一節教程的例子：
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 --> <script src="controll.js"></script> //引入控制器 </head> <body> <div ng-controller="controller"> <input type="text" ng-model="text"> <b>{{greeting.text}} {{text}}</b> </div> </body> </html>1.首先引入，angularjs包，啟動的時候先是去找ng-app指令，也就指定了整個的作用域；
2.然后會繼續找具體的指令，這里會找到ng-model，定義了一個“text”的數據模型。
3.下面使用了text的這個模型，所以實現了雙向綁定。（只要是在ng-app的作用域內，都能直接使用text）
二.如何使用控制器（controller）？
首先說一下使用控制器的幾個要點：
1.不要視圖復用controller，一個控制器一般只負責一小塊視圖（一一對應）；
2.不要在controller中直接操作DOM，這不是控制器的職責，操作DOM要使用指令derective（見上節教程）；
3.不要在controller中進行數據過濾的操作，有專門的filter服務來實現這一塊；
4.一般來說，不同的controller之間是不互相調用的，控制器的交互一般通過事件進行。
然后我們來看上面代碼藍色的部分，controll.js的內容是：
function controller($scope){ $scope.greeting = { text : 'hello' }; }angularjs找到一個ng-controller的指令，然后會找到定義這個指令的地方，就是controll.js文件，然后可以使用greeting.text直接獲取到他的值。
三.如何使用視圖（view）？
說到如何使用視圖，就必須提到directive。（這里是新的知識了喲?。。。。?/p>
下面來看一段代碼：
var appModule = angular.module('app', []); //app是html中ng-app指令的名稱appModule.directive('hello', function() { //定義一個指令，名稱叫hello return { restrict: 'E', template: '<div>Hi there</div>', replace: true };});上面的代碼定義了一個指令標簽，你可以直接在html中試試<hello></hello>，看看會發生什么吧?。。?/p>
然后我再講解一下每個屬性的含義：
1.restrict ：（字符串）可選參數，指明指令在DOM里面以什么形式被聲明。取值有：E(元素),A(屬性),C(類),M(注釋)；上面的例子設置為元素形式（<hello></hello>）；
2.template： （字符串或者函數）可選參數，返回的內容，上面的例子返回的是一個div；
3.templateUrl: 同上，通過url返回內容，如果返回內容很多，則建議使用此屬性。
4.relace：（布爾值），默認值為false。上面的例子設為了true：頁面使用hello標簽后會被返回的div代替。
5.transclude：（布爾值），當設為true時。這個配置選項可以讓我們提取包含在指令那個元素里面的內容，再將它放置在指令模板的特定位置，與ng-transclude合用。
6.還有一些其他屬性，具體大家再慢慢了解吧。。。
OK，以上就是對這3個主要模塊的使用說明了。希望對大家的學習有幫助啦。。。如果對于上面的筆記有不懂的地方，盡管問我，我肯定會給大家解答的。祝大家生活愉快！
新聞熱點
疑難解答
