<!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.然后會繼續(xù)找具體的指令，這里會找到ng-model，定義了一個“text”的數(shù)據(jù)模型。

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

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

首先說一下使用控制器的幾個要點：

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

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

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

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

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

 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
  };
});

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: