requirejs按需加載angularjs文件實(shí)例

更新時(shí)間：2017年06月08日 10:34:25 作者：Ricky_Huang

本篇文章主要介紹了requirejs按需加載angularjs文件實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

之前分享了一篇用ocLazyLoad實(shí)現(xiàn)按需加載angular js文件的博客.本來(lái)當(dāng)時(shí)想會(huì)使用一種方法就行了.可最近剛好有時(shí)間,在網(wǎng)上查找了一下requirejs實(shí)現(xiàn)angular js文件按需加載的資料.方案如下:

項(xiàng)目的主結(jié)構(gòu)如下圖:

1.index.html是最外層的頁(yè)面,頁(yè)面代碼如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>require angularjs</title>

</head>

<body>

<a href="#module1" rel="external nofollow" >module1</a><br/>

<a href="#module2" rel="external nofollow" >module2</a>

<div style="height: 30px;width: 100px">{{str}}</div>

<div id="container" ui-view></div>

<script data-main="main.js" src="require.js" id="main"></script>

</body>

</html>

2.頁(yè)面中的script標(biāo)簽中,會(huì)首先引用require.js這個(gè)文件,然后再去引用main.js這個(gè)文件,main.js主要是一些關(guān)于require的config信息,代碼如下:

var config = {

  baseUrl: './',      //依賴相對(duì)路徑

  paths: {          //如果某個(gè)前綴的依賴不是按照baseUrl拼接這么簡(jiǎn)單，就需要在這里指出

    domReady:'domReady',

    angular: '../node_modules/angular/angular',

    app:'app',

    router:'../node_modules/angular-ui-router/release/angular-ui-router'

  },

  shim: {           //引入沒(méi)有使用requirejs模塊寫法的類庫(kù)。例如underscore這個(gè)類庫(kù)，本來(lái)會(huì)有一個(gè)全局變量'_'。這里shim等于快速定義一個(gè)模塊，把原來(lái)的全局變量'_'封裝在局部，并導(dǎo)出為一個(gè)exports，變成跟普通requirejs模塊一樣

    'router': {

      deps: ['angular'],  //依賴什么模塊

       

    },

    'angular': {

      exports: 'angular'

    }

  }

};

require.config(config);

// deps:['webapp']

require(['domReady','app','angular'],function(){

  angular.bootstrap(document, ['webapp'])//這里會(huì)去執(zhí)行app.js這個(gè)文件

})

3.接下來(lái)進(jìn)入app.js

/**

 * Created by Administrator on 2016/7/28.

 */

define(['router'], function () {

  var app = angular.module('webapp', ['ui.router']);

  app.config(

    function($stateProvider, $urlRouterProvider) {

      $urlRouterProvider.otherwise('module1');//如果沒(méi)有指定路由,會(huì)默認(rèn)訪問(wèn)module1

      $stateProvider.

      state('module1', {

        url:"/module1",

        // controller: 'ctr1',      //這里如果寫了controller,那么在加載module1.js時(shí),js文件里面的console.log()會(huì)運(yùn)行兩次

        templateUrl: 'module1/module1.html',

        resolve: {

          loadCtrl: ["$q", function($q) {

            var deferred = $q.defer();

            //異步加載controller／directive/filter/service

            require([

              'module1/module1'

            ], function() { deferred.resolve(); });

            return deferred.promise;

          }]

        }

      })

      .state("module2",{

        url:"/module2",

        // controller: 'ctr2',

        templateUrl: 'module1/module2.html',

        resolve: {

          loadCtrl: ["$q", function($q) {

            var deferred = $q.defer();

            //異步加載controller／directive/filter/service

            require([

              'module1/module2'

            ], function() { deferred.resolve(); });

            return deferred.promise;

          }]

        }

      })

    });

  app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){

    app.register = {

      //得到$controllerProvider的引用

      controller : $controllerProvider.register,

      //同樣的，這里也可以保存directive／filter／service的引用

      directive: $compileProvider.directive,

      filter: $compileProvider.register,

      service: $provide.service

    };

  })

  return app;

});

4.module1.js代碼如下:

define(['app'],function(app){

  app.register

    .controller('ctr1', function($scope){

      $scope.str = 'home page';

      console.log('page1')

    })

})

5.module2.js代碼如下:

define(['app'],function(app){

  app.register

    .controller('ctr2',function($scope){

      $scope.str = 'local page';

      console.log('page2')

    })

})

6.module1.html代碼如下:

<div ng-controller="ctr1">

這是tp1

  <div id="navigator" style="width: 100%;height: 40px;line-height: 40px">

    <a  rel="external nofollow" >博客園首頁(yè)</a>

    <a  rel="external nofollow" >Ricky的首頁(yè)</a>

    <a  rel="external nofollow" >新隨筆</a>

    <a  rel="external nofollow" >聯(lián)系我</a>

    <a  rel="external nofollow" >訂閱他</a>

    <a  rel="external nofollow" >管理</a>

  </div>

</div>

7.module2.html2代碼如下:

<div ng-controller="ctr2">

  這是tp2

  {{str}}

</div>

到了這一步,我們運(yùn)行index.html文件,我們得到如下效果:(右圖是控制臺(tái)輸出)

點(diǎn)擊module2可以盡心正常切換,而且也可以看到j(luò)s文件確實(shí)動(dòng)態(tài)加載了;

注意:module1.js,module1.html,module2.js,module2.html折四個(gè)文件全部在module這個(gè)文件夾里面

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解用Webpack與Babel配置ES6開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開(kāi)發(fā)環(huán)境，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
前端實(shí)現(xiàn)圖片或視頻預(yù)覽的三種方法總結(jié)
在JavaScript中實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能是一項(xiàng)常見(jiàn)的需求,特別是在網(wǎng)頁(yè)交互設(shè)計(jì)中,這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)圖片或視頻預(yù)覽的三種方法,需要的朋友可以參考下
2024-06-06
微信小程序?qū)崿F(xiàn)彈幕墻（祝福墻）
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈幕墻、祝福墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
javaScript把其它類型轉(zhuǎn)換為Number類型
在本篇文章里小編給大家整理的是關(guān)于javaScript把其它類型轉(zhuǎn)換為Number類型的相關(guān)文章，有需要的朋友們學(xué)習(xí)下。
2019-10-10
javascript+jQuery實(shí)現(xiàn)360開(kāi)機(jī)時(shí)間顯示效果
這篇文章主要介紹了javascript+jQuery實(shí)現(xiàn)360開(kāi)機(jī)時(shí)間顯示效果，在文中給大家提到了js實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-11-11
JS中6個(gè)對(duì)象數(shù)組去重的方法
這篇文章主要給大家介紹了關(guān)于JS中6個(gè)對(duì)象數(shù)組去重的方法,javascript數(shù)組去重是一個(gè)比較常見(jiàn)的需求,解決方法也有很多種,文中每種解決方法都給出了示例代碼,需要的朋友可以參考下
2023-07-07
JS 實(shí)現(xiàn)雙色表格實(shí)現(xiàn)代碼
通過(guò)為<tr>元素添加屬性或類型選擇器，再通過(guò)CSS設(shè)置可以實(shí)現(xiàn)雙色表格，但如果表格很長(zhǎng)，逐個(gè)元素添加可真麻煩。而且這樣的代碼維護(hù)起來(lái)不容易。所以比較好的方式是用JS實(shí)現(xiàn)。
2009-11-11
js定義類或?qū)ο蟮慕榻B，需要的朋友可以參考下
2012-08-08