requirejs按需加载angularjs文件实例

前端之家收集整理的这篇文章主要介绍了requirejs按需加载angularjs文件实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

项目的主结构如下图:

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

<html lang="en">

<Meta charset="UTF-8">

require angularjs

module1

module2

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

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

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

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

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

domReady:'domReady',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

  • 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');//如果没有指定路由,会默认访问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代码如下:

    app.register

    .controller('ctr1',function($scope){
    
      $scope.str = 'home page';
    
      console.log('page1')
    
    })

    })

    5.module2.js代码如下:

    app.register

    .controller('ctr2',function($scope){
    
      $scope.str = 'local page';
    
      console.log('page2')
    
    })

    })

    6.module1.HTML代码如下:

    这是tp1

    7.module2.html2代码如下:

    这是tp2

    {{str}}

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

    点击module2可以尽心正常切换,而且也可以看到js文件确实动态加载了;

    注意:module1.js,module1.html,module2.js,module2.html折四个文件全部在module这个文件夹里面

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/js/38770.html

    猜你在找的JavaScript相关文章