requirejs按需加载angularjs文件实例


Posted in Javascript onJune 08, 2017

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

项目的主结构如下图:

requirejs按需加载angularjs文件实例

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

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

var 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文件里面的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',

        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 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>

  </div>

</div>

7.module2.html2代码如下:

<div ng-controller="ctr2">

  这是tp2

  {{str}}

</div>

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

requirejs按需加载angularjs文件实例

requirejs按需加载angularjs文件实例

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 #Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 #Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
原生JS发送异步数据请求
Jun 08 #Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 #Javascript
vue.js中过滤器的使用教程
Jun 08 #Javascript
了解VUE的render函数的使用
Jun 08 #Javascript
You might like
PHP中的类-什么叫类
2006/11/20 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
策划总监岗位职责
2014/02/16 职场文书
北京英文导游词
2015/02/12 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技