`
subchen
  • 浏览: 15616 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

阅读更多

传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来。 通过使用 angular-async-loader 库,我们可以使用 requirejs 等加载器,在 module 初始化之后,在动态异步加载其他的 Controller, Services, Filters 等等......

 

See https://github.com/subchen/angular-async-loader

angular-async-loader

An async loader for angular 1.x application.

Support following components to dynamic register:

  • .controller
  • .services
  • .filter
  • .directive
  • .value
  • .constant
  • .provider
  • .decorator

Support following amd/cmd loaders:

  • Require.js
  • Sea.js
  • System.js

Support controllerUrl/denpendencies config in angular-ui-router and angular-route:

  • $stateProvider.state
  • $routeProvider.when

Installation

npm install angular-async-loader

Usage

See Sample: https://github.com/subchen/angular-async-loader/blob/master/sample/

index.html

<scriptsrc="assets/requirejs/require.js"></script>
<scriptsrc="bootstrap.js"></script>

bootstrap.js

require.config({
    baseUrl: '/',
    paths: {
        'angular': 'assets/angular/angular.min',
        'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',
        'angular-async-loader': 'assets/angular-async-loader/angular-async-loader'
    },
    shim: {
        'angular': {exports: 'angular'},
        'angular-ui-router': {deps: ['angular']}
    }
});

require(['angular', './app-routes'], function(angular){
    angular.element(document).ready(function(){
        angular.bootstrap(document, ['app']);
        angular.element(document).find('html').addClass('ng-app');
    });
});

app.js

define(function(require, exports, module){
    var angular = require('angular');
    var asyncLoader = require('angular-async-loader');

    require('angular-ui-router');

    var app = angular.module('app', ['ui.router']);

    // initialze app module for async loader
    asyncLoader.configure(app);

    module.exports = app;
});

app-routes.js

define(function(require){
    var app = require('./app');

    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home/home.html',
                // new attribute for ajax load controller
                controllerUrl: 'home/homeCtrl',
                controller: 'homeCtrl'
            })
            .state('users', app.route({
                url: '/users',
                templateUrl: 'users/users.html',
                // new attribute for ajax load controller
                controllerUrl: 'users/usersCtrl',
                controller: 'usersCtrl',
                // load more controllers, services, filters, ...
                dependencies: ['services/usersService']
            }));
    }]);
});

users/usersCtrl.js

define(function(require){
    var app = require('../app');

    // dynamic load services here or add into dependencies of state config
    // require('../services/usersService');

    app.controller('usersCtrl', ['$scope', function($scope){
        // shortcut to get angular injected service.
        var userServices = app.get('usersService');

        $scope.userList = usersService.list();
    }]);

});
分享到:
评论

相关推荐

    angular按需加载js

    本示例"angular+require+angular-ui-router+angular-async-loader"正是这样一个实现方案,它结合了AngularJS、RequireJS、Angular UI Router和Angular Async Loader来达到动态加载目的。 AngularJS本身不直接支持按...

    theinjection:这个简单而有用的依赖注入到 node.js 类似于 angular.js

    这种简单而有用的依赖注入到 node.js 类似于 angular.js。 文档 安装 $ npm install theinjection --save 首先,您需要注册依赖项。 var Injection = require ( 'theinjection' ) ; var injection = new Injector...

    Node.js:开启全栈开发的钥匙.pdf

    通过回调函数、Promises、async/await 等机制,开发者可以编写出清晰且易于维护的异步代码,提高了开发效率和应用的响应速度。 ##### 2.3 丰富的生态系统 Node.js 拥有一个庞大的生态系统——NPM(Node Package ...

    js-project-1-源码.rar

    4. **AJAX与异步编程**:如果项目涉及与服务器交互,可能会使用XMLHttpRequest或现代的Fetch API来发送异步请求,获取或提交数据,实现页面的动态加载。 5. **模块化**:源代码可能会使用CommonJS或ES6模块系统来...

    21天学通javascript源码

    - CommonJS:Node.js中的模块系统,使用`require`导入模块,`module.exports`导出模块。 - ES6模块:使用`import`和`export`关键字实现模块导入和导出。 - 工具库如Webpack或Rollup可以将模块打包,便于在浏览器...

    js脚本大集合(JavaScript)

    这个“js脚本大集合”显然是一份包含多种JavaScript特效和功能实现的资源包,适合初学者学习和开发者参考。 1. **基础概念**: - JavaScript主要由ECMAScript规范定义,是网景公司的Brendan Eich在1995年发明的。 ...

    angular-requirejs-seed

    原始种子项目提供了一种使用自定义加载器异步加载初始js文件集的方法。 Bootstraping文件( require-config.js )用于实际页面上的单元测试和引导。 如果您不打算使用r.js来构建源,则应在生产中使用此文件之前考虑...

    JSjavascript包

    JavaScript,简称JS,是Web开发中的重要脚本语言,用于实现客户端的动态效果和交互。在网页中,JavaScript可以操作DOM(文档对象模型),处理事件,进行AJAX(异步JavaScript和XML)通信,以及创建复杂的Web应用程序...

    精通JavaScript动态网页编程.rar

    - **AJAX**:异步JavaScript和XML技术,实现在不重新加载整个页面的情况下更新部分网页内容。 - **Promise与async/await**:解决异步回调地狱问题,使异步代码更易于理解和维护。 #### 3. 模块化开发 - **CommonJS*...

    JavaScript快速查询手册.zip

    - CommonJS:Node.js环境中的模块系统,通过require导入和module.exports导出模块。 - ES6模块:使用import和export进行模块导入和导出。 - AMD/CMD: RequireJS和Sea.js等库支持的异步模块定义。 8. **ES6及...

    javaScript使用详解.pdf

    1. CommonJS:Node.js环境下的模块系统,通过require导入模块,module.exports或exports导出模块。 2. ES6模块:使用import和export关键字进行模块导入和导出,静态化导入有助于编译时优化。 七、JavaScript框架与...

    仿京东js|京东js

    【标题】"仿京东js|京东js" 指的是一个项目或教程,其目标是模仿京东网站的部分JavaScript实现,可能是为了学习、实践或者构建类似的电商网页。在JavaScript编程中,这种模仿通常涉及到前端交互、动态加载、用户体验...

    JavaScript 全栈教程.chm

    - **CommonJS**:Node.js使用CommonJS模块系统,通过require导入模块,module.exports导出模块。 - **ES6模块**:使用import和export关键字进行导入和导出,更符合静态类型语言的模块化思想。 7. **JavaScript...

    JavaScript 参考教程.rar

    - CommonJS:Node.js环境下的模块系统,通过`require`导入模块,`module.exports`导出模块。 - ES6模块:使用`import`和`export`关键字进行模块导入和导出,适用于浏览器和Node.js。 8. **错误处理** - try......

    JavaScript

    - CommonJS:Node.js环境中使用,通过`require`导入模块,`module.exports`导出模块。 - ES6模块:使用`import`和`export`关键字进行导入和导出。 9. **错误处理** - try...catch:用于捕获和处理运行时错误,...

    javaScript从入门到精通

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的编程语言,主要负责实现客户端的动态效果和交互功能。它的语法与Java有相似之处,但两者并非同一语言。本指南将带你从零开始,逐步深入理解JavaScript的...

    《超实用的JavaScript代码段》PDF版本下载.txt

    - **CommonJS**:Node.js环境下的模块化标准,通过`require`和`module.exports`来实现模块的加载和导出。 #### 8. 前端框架/库 - **React**:使用React创建组件化的用户界面,通过虚拟DOM提高渲染效率。 - **Vue**...

    Javascript教程--从入门到精通【完整版】

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的编程语言,主要负责实现客户端的交互效果。本教程将全面引导你从零基础开始学习JavaScript,直至达到精通的水平。 一、JavaScript基础知识 JavaScript...

    JavaScript学习资料

    - CommonJS:Node.js中的模块系统,通过`require`导入,`module.exports`导出。 - ES6模块:`import`和`export`关键字,静态加载,有利于编译时优化。 9. **ES6及后续版本新特性** - 类与继承:`class`语法糖,`...

    javascript系列大全

    - CommonJS:Node.js环境下的模块规范,通过require导入模块,module.exports或exports导出模块。 - ES模块:ES6引入的模块系统,使用import和export关键字。 8. **AJAX与Fetch** - AJAX(异步JavaScript和XML)...

Global site tag (gtag.js) - Google Analytics