今天的主要講解部分有以下幾點(diǎn)：1.演示一個(gè)完整的項(xiàng)目結(jié)構(gòu) 2.$scope的含義 3.模塊化和依賴(lài)注入。

一.演示一個(gè)完整的項(xiàng)目結(jié)構(gòu)。

下面的所有這些代碼，都是轉(zhuǎn)載于@大漠窮秋 老師的。我轉(zhuǎn)載來(lái)之后放到了github上，大家可以去這個(gè)鏈接看源代碼。一邊看，一邊學(xué)習(xí)，效果最好了～～～～

　　下面我們來(lái)看這個(gè)截圖，

　　這就是一個(gè)完整的angularjs項(xiàng)目應(yīng)該有的目錄結(jié)構(gòu)。下面我來(lái)講解每一個(gè)文件夾對(duì)應(yīng)的分別是什么含義。

　　1.css：不用說(shuō)了，就是放一些css的樣式文件。

　　2.framework：這里一般放一些除了angularjs之外的第三方需要的前端框架（ui），比如bootstrap、ueditor等等。

　　3.imgs：也不用說(shuō)，放圖片文件。

　　4.index.html：主要文件，當(dāng)然，如果項(xiàng)目文件比較多，也可以單獨(dú)建個(gè)文件夾放頁(yè)面。

　　5.js：不用多說(shuō)，放自己新建的js文件。

　　6.tpls：全稱(chēng)是templates，意思是模版。里面放的是部分html代碼。與angualrjs的directive命令中的templateUrl屬性合用。

下面我們主要看一下tpls的使用方法：這里的tpls文件夾下有一個(gè)test.html文件，代碼如下：

<ul>
  <li>
    第一行test
  </li>
  <li>
    第二行test
  </li><li>
    第三行test
  </li>
</ul>

　　我們上面也說(shuō)，這里的文件只是html的一部分，比如這里只是一個(gè)ul的部分代碼。那有些人就奇怪了，這樣寫(xiě)有什么用呢，我該怎么使用呢？不急，下面我來(lái)告訴大家怎么使用：

　　其實(shí)我們上節(jié)課提到過(guò)了，不知道的人點(diǎn)擊這里，你可以看到第三點(diǎn)，我提到的directive方法。它的意思呢就是定義一個(gè)html標(biāo)簽，然后返回的html內(nèi)容就是就是這里的ul部分啦。

　　下面來(lái)看具體使用代碼：

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

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

對(duì)上面代碼的解釋?zhuān)壕褪嵌x了一個(gè)hello標(biāo)簽，使用此標(biāo)簽的時(shí)候，返回的是test.html的內(nèi)容（使用template和templateUrl都行）。

為什么我們要把上面的ul內(nèi)容放到單獨(dú)的文件夾呢？現(xiàn)在想明白了嗎？？就是為了當(dāng)返回的內(nèi)容很多時(shí)，直接使用鏈接對(duì)應(yīng)就好了，讓代碼看起來(lái)很清晰。

二.看一些$scope。

　　我們來(lái)看下面這個(gè)圖片，深入講解一些scope和它的特性：

　　我們來(lái)看一下上面的代碼：先是定義了一個(gè)控制器叫做HelloCtrl，里面給$scope添加了一個(gè)屬性greeting，greeting屬性是一個(gè)對(duì)象，添加了text屬性，值為‘Hello'，就這么簡(jiǎn)單。然后在頁(yè)面中就可以直接調(diào)用greeting.text，就能夠得到‘Hello'的值了。是不是很神奇呢？那$scope到底是個(gè)什么東西呢？為什么能夠?qū)崿F(xiàn)這些功能呢？下面這些都是它的特性，看了之后一定要對(duì)它有一定的理解。

　　1.$scope是一個(gè)作用域，也可以理解為一個(gè)對(duì)象。

　　2.$scope提供了一些工具和方法，比如$watch()和$apply()等等。

　　3.$scope也是一個(gè)執(zhí)行環(huán)境（作用域）。

　　4.子$scope可以繼承父$scope的屬性和方法。

　　5.每一個(gè)Angular應(yīng)用只有一個(gè)跟$scope（$rootscope，位于ng-app中）。

3.模塊化和依賴(lài)注入

　　來(lái)看下面這段定義控制器的代碼：

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

myApp.controller('HelloCtrl', ['$scope',function($scope) {
    $scope.greeting = {
      text: 'Hello'
    };
  }
]);
myApp.controller('ByeCtrl', ['$scope',function($scope) {
    //.....
  }
]);

　　還記得最開(kāi)始講解的定義控制器嗎？直接使用funciton name(){}的方法。 慢慢的我們發(fā)現(xiàn)，如果控制器太多，這樣就不好管理了，為了實(shí)現(xiàn)angualrjs的模塊化，我們需要換成上面的寫(xiě)法，然后我給大家解釋一下這段代碼的含義。

　　第1行： 先獲取整個(gè)頁(yè)面的modula名稱(chēng)‘myApp'，，，angularApp是html中ng-app的值。

　　第3行： 定義一個(gè)控制器，名稱(chēng)為‘HelloCtrl'；

　　第9行同上。

　　這樣，我們就不知不覺(jué)的實(shí)現(xiàn)了模塊化?。?！

　　這里我們只調(diào)用了controller方法，還有第一節(jié)提到的directive、filter等等方法，都應(yīng)該在myApp上調(diào)用，以實(shí)現(xiàn)響應(yīng)的功能。然后使用多個(gè)模塊完成一個(gè)項(xiàng)目，我們就實(shí)現(xiàn)了依賴(lài)注入??！

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

最新評(píng)論