angularjs學(xué)習(xí)筆記之三大模塊（modal，controller，view）

更新時(shí)間：2015年09月26日 11:09:01 投稿：hebedich

本文給大家記錄的是angularjs的三大模塊（modal，controller，view）的使用說明，方便初學(xué)者能夠順利的學(xué)習(xí)angularjs.

今天主要跟大家詳細(xì)講解一下angularjs的三大模塊： modal，controller，view。

首先跟大家說一下這三個(gè)模塊之間的關(guān)系。

1.數(shù)據(jù)模型（modal）主要提供數(shù)據(jù)。它不會(huì)和視圖（view）直接操作。

2.controller保存modal提供的數(shù)據(jù)，與視圖進(jìn)行操作。

3.view是視圖，也就是頁面展示。

4.總而言之，controller負(fù)責(zé)數(shù)據(jù)和視圖之間的通信，就是兩者的接口人。他們分工明確，實(shí)現(xiàn)了模塊化。

一.如何使用數(shù)據(jù)模型（modal）？

講到數(shù)據(jù)模型，我們再來看一下上一節(jié)教程的例子：

<!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包，啟動(dòng)的時(shí)候先是去找ng-app指令，也就指定了整個(gè)的作用域；

2.然后會(huì)繼續(xù)找具體的指令，這里會(huì)找到ng-model，定義了一個(gè)“text”的數(shù)據(jù)模型。

3.下面使用了text的這個(gè)模型，所以實(shí)現(xiàn)了雙向綁定。（只要是在ng-app的作用域內(nèi)，都能直接使用text）

二.如何使用控制器（controller）？

首先說一下使用控制器的幾個(gè)要點(diǎn)：

1.不要視圖復(fù)用controller，一個(gè)控制器一般只負(fù)責(zé)一小塊視圖（一一對應(yīng)）；

2.不要在controller中直接操作DOM，這不是控制器的職責(zé)，操作DOM要使用指令derective（見上節(jié)教程）；

3.不要在controller中進(jìn)行數(shù)據(jù)過濾的操作，有專門的filter服務(wù)來實(shí)現(xiàn)這一塊；

4.一般來說，不同的controller之間是不互相調(diào)用的，控制器的交互一般通過事件進(jìn)行。

然后我們來看上面代碼藍(lán)色的部分，controll.js的內(nèi)容是：

 function controller($scope){
   $scope.greeting = {
     text : 'hello'
   };
 }

angularjs找到一個(gè)ng-controller的指令，然后會(huì)找到定義這個(gè)指令的地方，就是controll.js文件，然后可以使用greeting.text直接獲取到他的值。

三.如何使用視圖（view）？

說到如何使用視圖，就必須提到directive。（這里是新的知識了喲?。。。。?/p>

下面來看一段代碼：

var appModule = angular.module('app', []); //app是html中ng-app指令的名稱

appModule.directive('hello', function() { //定義一個(gè)指令，名稱叫hello
  return {
    restrict: 'E',
    template: '<div>Hi there</div>',
    replace: true
  };
});

上面的代碼定義了一個(gè)指令標(biāo)簽，你可以直接在html中試試<hello></hello>，看看會(huì)發(fā)生什么吧?。?！

然后我再講解一下每個(gè)屬性的含義：

1.restrict ：（字符串）可選參數(shù)，指明指令在DOM里面以什么形式被聲明。取值有：E(元素),A(屬性),C(類),M(注釋)；上面的例子設(shè)置為元素形式（<hello></hello>）；

2.template：（字符串或者函數(shù)）可選參數(shù)，返回的內(nèi)容，上面的例子返回的是一個(gè)div；

3.templateUrl: 同上，通過url返回內(nèi)容，如果返回內(nèi)容很多，則建議使用此屬性。

4.relace：（布爾值），默認(rèn)值為false。上面的例子設(shè)為了true：頁面使用hello標(biāo)簽后會(huì)被返回的div代替。

5.transclude：（布爾值），當(dāng)設(shè)為true時(shí)。這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置，與ng-transclude合用。

6.還有一些其他屬性，具體大家再慢慢了解吧。。。

OK，以上就是對這3個(gè)主要模塊的使用說明了。希望對大家的學(xué)習(xí)有幫助啦。。。如果對于上面的筆記有不懂的地方，盡管問我，我肯定會(huì)給大家解答的。祝大家生活愉快！

您可能感興趣的文章: