AngularJS 模塊化詳解及實(shí)例代碼

更新時(shí)間：2016年09月14日 16:19:35 作者：xingoo

這篇文章主要介紹了AngularJS 模塊化，這里整理了詳細(xì)的資料及簡(jiǎn)單實(shí)例代碼，實(shí)現(xiàn)效果圖，有需要的小伙伴可以參考下

AngularJS有幾大特性，比如：

　　1 MVC

　　2 模塊化

　　3 指令系統(tǒng)

　　4 雙向數(shù)據(jù)綁定

那么本篇就來(lái)看看AngularJS的模塊化。

　　首先先說(shuō)一下為什么要實(shí)現(xiàn)模塊化：

　　1 增加了模塊的可重用性

　　2 通過(guò)定義模塊，實(shí)現(xiàn)加載順序的自定義

　　3 在單元測(cè)試中，不必加載所有的內(nèi)容

　　之前做的幾個(gè)例子，控制器的代碼直接寫(xiě)在script標(biāo)簽里面，這樣聲明的函數(shù)都是全局的，顯然不是一個(gè)最好的選擇。

　　下面看看如何進(jìn)行模塊化：

 <script type="text/javascript">
      var myAppModule = angular.module('myApp',[]);
      
      myAppModule.filter('test',function(){
        return function(name){
          return 'hello, '+name+'!';
        };
      });

      myAppModule.controller('myAppCtrl',['$scope',function($scope){
        $scope.name='xingoo';
      }]);
    </script>

　　首先，通過(guò)全局變量angular創(chuàng)建模塊myAppModule

angular.module('myApp',[]);

　　第一個(gè)參數(shù)是綁定的應(yīng)用app名稱，這個(gè)app標(biāo)識(shí)了頁(yè)面中angular的入口點(diǎn)，類似main函數(shù)的作用。

　　第二個(gè)參數(shù)[]里面標(biāo)識(shí)了依賴的模塊。

　　下面看看如何使用模塊吧！

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      {{name | test }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module('myApp',[]);
      
      myAppModule.filter('test',function(){
        return function(name){
          return 'hello, '+name+'!';
        };
      });

      myAppModule.controller('myAppCtrl',['$scope',function($scope){
        $scope.name='xingoo';
      }]);
    </script>
  </body>
</html>

　　直接綁定myApp到ng-app上，就可以了。

　　在script中，我們通過(guò)模塊創(chuàng)建了一個(gè)filter和一個(gè)控制器。

　　filter的作用是添加字符串修飾。

　　控制器的作用則是初始化變量。

　　程序的運(yùn)行結(jié)果如下：

以上就是對(duì)AngularJS 模塊化的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

angularJS實(shí)現(xiàn)不同視圖同步刷新詳解
今天小編就為大家分享一篇angularJS實(shí)現(xiàn)不同視圖同步刷新詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
AngularJS入門(mén)教程（二）：AngularJS模板
這篇文章主要介紹了AngularJS入門(mén)教程（二）：AngularJS模板,本文是系列文章的第三篇,本系列會(huì)用一個(gè)項(xiàng)目來(lái)講解AngularJS的使用,需要的朋友可以參考下
2014-12-12
詳解angularJs中關(guān)于ng-class的三種使用方式說(shuō)明
本篇文章主要介紹了angularJs中關(guān)于ng-class的三種使用方式說(shuō)明，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
解析AngularJS中g(shù)et請(qǐng)求URL出現(xiàn)的跨域問(wèn)題
本文主要介紹了AngularJS中g(shù)et請(qǐng)求URL出現(xiàn)跨域問(wèn)題。需要的朋友可以參考下
2016-12-12
基于angular-utils-ui-breadcrumbs使用心得(分享)
下面小編就為大家?guī)?lái)一篇基于angular-utils-ui-breadcrumbs使用心得(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
如何以Angular的姿勢(shì)打開(kāi)Font-Awesome詳解
這篇文章主要給大家介紹了關(guān)于如何以Angular的姿勢(shì)打開(kāi)Font-Awesome的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
Angular在一個(gè)頁(yè)面中使用兩個(gè)ng-app的方法
這篇文章主要介紹了Angular在一個(gè)頁(yè)面中使用兩個(gè)ng-app的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
Angular使用ControlValueAccessor創(chuàng)建自定義表單控件
這篇文章主要介紹了Angular使用ControlValueAccessor創(chuàng)建自定義表單控件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
AngularJS實(shí)現(xiàn)使用路由切換視圖的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)使用路由切換視圖的方法,結(jié)合學(xué)生信息管理系統(tǒng)為例分析了使用controllers.js控制器來(lái)切換視圖的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-01-01
使用AngularJS和PHP的Laravel實(shí)現(xiàn)單頁(yè)評(píng)論的方法
這篇文章主要介紹了使用AngularJS和PHP的Laravel實(shí)現(xiàn)單頁(yè)評(píng)論的方法,本文的示例是前端JavaScript和后端PHP聯(lián)合編程的典范,需要的朋友可以參考下
2015-06-06