requirejs按需加载angularjs文件实例_网络技术_宿州市腾雀网络科技有限公司

requirejs按需加载angularjs文件实例

发布时间 - 2026-01-11 01:47:38 点击率：次

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

项目的主结构如下图:

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文件,我们得到如下效果:(右图是控制台输出)

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

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

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

# requirejs # angularjs # requirejs按需加载angularjs # 按需加载 # angularJS+requireJS实现controller及directive的按需加载示例 # 探索angularjs+requirejs全面实现按需加载的套路 # 小心！AngularJS结合RequireJS做文件合并压缩的那些坑 # angular.js + require.js构建模块化单页面应用的方法步骤 # 简单谈谈require模块化jquery和angular的问题 # requirejs AngularJS结合使用示例解析 # 加载 # 这是 # 首页 # 按需 # 类库 # 全局变量 # 在这里 # 会有 # 两次 # 如果没有 # 可以看到 # 找了 # 写了 # 再去 # 会去 # 这么简单 # 装在 # 大家多多 # 如下图 # 主要是

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：centos如何迁移sqladmin

下一篇：《百分网》下载游戏方法

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：centos如何迁移sqladmin

下一篇：《百分网》下载游戏方法