requirejs按需加载angularjs文件实例

JavaScript 2019-01-07

之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载的资料.方案如下:

项目的主结构如下图:

1.index.html是最外层的页面,页面代码如下:

rush:xhtml;">

require angularjs

module1

module2

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

2.页面中的script标签中,会首先引用require.js这个文件,然后再去引用main.js这个文件,main.js主要是一些关于require的config信息,代码如下:

rush:js;"> var config = {

baseUrl: './',//依赖相对路径

paths: { //如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出

d<a href="https://www.jb51.cc/tag/omr/" target="_blank" class="keywords">omr</a>eady:'d<a href="https://www.jb51.cc/tag/omr/" target="_blank" class="keywords">omr</a>eady',angular: '../node_modules/angular/angular',app:'app',router:'../node_modules/angular-ui-router/release/angular-ui-router'

},shim: { //引入没有使用requirejs模块写法的类库。例如underscore这个类库，本来会有一个全局变量'_'。这里shim等于快速定义一个模块，把原来的全局变量'_'封装在局部，并导出为一个exports，变成跟普通requirejs模块一样

'router': {

  deps: ['angular'],//依赖什么模块



},'angular': {

  exports: 'angular'

}

}

};

require.config(config);

// deps:['webapp']

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

angular.bootstrap(document,['webapp'])//这里会去执行app.js这个文件

})

3.接下来进入app.js

rush: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');//如果没有指定路由,会<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认访问module1

  $stateProvider.

  state('module1',{

    url:"/module1",// controller: 'ctr1',//这里如果写了controller,那么在加载module1.js时,js<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>里面的console.log()会运行两次

    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',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代码如下:

rush:js;"> define(['app'],function(app){

app.register

.controller('ctr1',function($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e){

  $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.str = 'home page';

  console.log('page1')

})

})

5.module2.js代码如下:

rush:js;"> define(['app'],function(app){

app.register

.controller('ctr2',function($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e){

  $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.str = 'local page';

  console.log('page2')

})

})

6.module1.HTML代码如下:

rush:xhtml;">

这是tp1

rush:xhtml;">

<a href="http://www.cnblogs.com/" rel="external nofollow" >博客园首页</a>

<a href="http://www.cnblogs.com/Ricky-Huang/" rel="external nofollow" >Ricky的首页</a>

<a href="http://i.cnblogs.com/EditPosts.aspx?opt=1" rel="external nofollow" >新随笔</a>

<a href="http://msg.cnblogs.com/send/Ricky_Huang" rel="external nofollow" >联系我</a>

<a href="http://www.cnblogs.com/Ricky-Huang/rss" rel="external nofollow" >订阅他</a>

<a href="http://i.cnblogs.com/" rel="external nofollow" >管理</a>

7.module2.html2代码如下:

rush:xhtml;">

这是tp2

到了这一步,我们运行index.html文件,我们得到如下效果:(右图是控制台输出)