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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
基于vue.js实现购物车
Jan 15 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与php MySQL 之间的关系
2009/07/17 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
高中生期末评语大全
2014/01/28 职场文书
论文指导教师评语
2014/04/28 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
团支部推优材料
2014/05/21 职场文书
六查六看六改心得体会
2014/10/14 职场文书
史上最牛辞职信
2015/05/13 职场文书
大学生见习总结报告
2015/06/24 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
PyTorch device与cuda.device用法
2022/04/03 Python