文档章节

使用 angular-async-loader 来实现异步加载 angular 模块

Sub
 Sub
发布于 2015/10/02 21:26
字数 480
阅读 7182
收藏 9

2016-05-22: 更新到 1.3.1, BUG 修复

2016-05-20: 更新到 1.3.0, 支持真正的动态模块注册

2015-11-06: 更新到 1.2.1, 增加 .min.js

2015-10-09: 更新到 1.2.0, 兼容旧代码,更好用了

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

angular-async-loader

Load modules and components asynchronously for angular 1.x application.

Support load angular modules:

  • app.useModule(name)

Support load angular components:

  • app.controller
  • app.services
  • app.filter
  • app.directive
  • app.value
  • app.constant
  • app.provider
  • app.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

Demo

http://subchen.github.io/angular-async-loader/demo/

Installation

npm

npm install angular-async-loader

bower

bower install https://github.com/subchen/angular-async-loader.git

Usage

index.html

<script src="assets/requirejs/require.js"></script>
<script src="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.min',
        'angular-ui-mask': 'assets/angular-ui-mask/dist/mask.min',
        'ng-tags-input': 'assets/ng-tags-input/build/ng-tags-input.min'
    },
    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 angular-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', {
                url: '/users',
                templateUrl: 'users/users.html',
                // new attribute for ajax load controller
                controllerUrl: 'users/usersCtrl',
                controller: 'usersCtrl',
                // support to load more controllers, services, filters, ...
                dependencies: ['services/usersService']
            })
            .state('components', {
                url: '/components',
                templateUrl: 'components/components.html',
                // new attribute for ajax load controller
                controllerUrl: 'components/componentsCtrl',
                controller: 'componentsCtrl'
            });
    }]);
});

users/usersCtrl.js

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

    // dynamic load services here or add into dependencies of ui-router 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();
    }]);

});

components/componentsCtrl.js

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

    // dynamic load angular-ui-mask plugins for UI
    require('angular-ui-mask');
    app.useModule('ui.mask');

    // dynamic load ng-tags-input plugins for UI
    require('ng-tags-input');
    app.useModule('ngTagsInput');

    app.controller('componentsCtrl', ['$scope', function ($scope) {
        ......
    }]);

});

Build from Source

git clone https://github.com/subchen/angular-async-loader.git

cd angular-async-loader

./make.sh install
./make.sh test

open browser http://localhost:3000/

© 著作权归作者所有

Sub

Sub

粉丝 127
博文 94
码字总数 22632
作品 5
浦东
架构师
私信 提问
加载中

评论(9)

Sub
Sub 博主

引用来自“CaryLuang”的评论

angular-async-loader可以异步加载第三方插件吗?比如angularText, ng-file-upload, ui-select等

引用来自“Sub”的评论

第三方的插件大部分使用了自定义的module,而 angular.js 1.x 不支持动态加载 module,所以加载不了。 angular-async-loader 只能动态加载用户开发的 service, controller, filters 等组件。

引用来自“CaryLuang”的评论

https://segmentfault.com/a/1190000004487211 这个文章提到了异步加载第三方模块的方案,目前看着比较复杂。

引用来自“Sub”的评论

看上去可行,我研究一下,看看能不能集成到 angular-async-loader 里面

引用来自“CaryLuang”的评论

期待更新
非常感谢你的帮助,真正的动态模板功能已经在 1.3.0 里提供支持: app.useModule(name) 可以看在线 demo http://subchen.github.io/angular-async-loader/
C
CaryLuang

引用来自“CaryLuang”的评论

angular-async-loader可以异步加载第三方插件吗?比如angularText, ng-file-upload, ui-select等

引用来自“Sub”的评论

第三方的插件大部分使用了自定义的module,而 angular.js 1.x 不支持动态加载 module,所以加载不了。 angular-async-loader 只能动态加载用户开发的 service, controller, filters 等组件。

引用来自“CaryLuang”的评论

https://segmentfault.com/a/1190000004487211 这个文章提到了异步加载第三方模块的方案,目前看着比较复杂。

引用来自“Sub”的评论

看上去可行,我研究一下,看看能不能集成到 angular-async-loader 里面
期待更新
Sub
Sub 博主

引用来自“CaryLuang”的评论

angular-async-loader可以异步加载第三方插件吗?比如angularText, ng-file-upload, ui-select等

引用来自“Sub”的评论

第三方的插件大部分使用了自定义的module,而 angular.js 1.x 不支持动态加载 module,所以加载不了。 angular-async-loader 只能动态加载用户开发的 service, controller, filters 等组件。

引用来自“CaryLuang”的评论

https://segmentfault.com/a/1190000004487211 这个文章提到了异步加载第三方模块的方案,目前看着比较复杂。
看上去可行,我研究一下,看看能不能集成到 angular-async-loader 里面
C
CaryLuang

引用来自“CaryLuang”的评论

angular-async-loader可以异步加载第三方插件吗?比如angularText, ng-file-upload, ui-select等

引用来自“Sub”的评论

第三方的插件大部分使用了自定义的module,而 angular.js 1.x 不支持动态加载 module,所以加载不了。 angular-async-loader 只能动态加载用户开发的 service, controller, filters 等组件。
https://segmentfault.com/a/1190000004487211 这个文章提到了异步加载第三方模块的方案,目前看着比较复杂。
Sub
Sub 博主

引用来自“CaryLuang”的评论

angular-async-loader可以异步加载第三方插件吗?比如angularText, ng-file-upload, ui-select等
第三方的插件大部分使用了自定义的module,而 angular.js 1.x 不支持动态加载 module,所以加载不了。 angular-async-loader 只能动态加载用户开发的 service, controller, filters 等组件。
C
CaryLuang
angular-async-loader可以异步加载第三方插件吗?比如angularText, ng-file-upload, ui-select等
Sub
Sub 博主

引用来自“shumin”的评论

你好,最近试用了你的angular-async-loader,感觉很小巧已用,发现 代码地45行的『$rootScope.$apply();』这儿好像有点问题,老是报错,我去掉就好了,不知道怎么回事,我的qq:654181121,希望有机会和你请教一下,谢谢
1.2.1 released, 已经移除了$rootScope.$apply(); 同时发布了 .min.js 文件
Sub
Sub 博主

引用来自“shumin”的评论

你好,最近试用了你的angular-async-loader,感觉很小巧已用,发现 代码地45行的『$rootScope.$apply();』这儿好像有点问题,老是报错,我去掉就好了,不知道怎么回事,我的qq:654181121,希望有机会和你请教一下,谢谢
能告诉一下什么具体错误吗? $rootScope.$apply(); 的作用是可以在异步加载完成后启动一次 digist 循环,大部分情况下应该是不需要的。
shumin
shumin
你好,最近试用了你的angular-async-loader,感觉很小巧已用,发现 代码地45行的『$rootScope.$apply();』这儿好像有点问题,老是报错,我去掉就好了,不知道怎么回事,我的qq:654181121,希望有机会和你请教一下,谢谢
angular-async-loader 1.3.0 发布

angular-async-loader 是一个为 angular.js 1.x 应用添加异步加载module/controller/services/filters/directive等模块功能组件。 2016-05-20 angular-async-loader 1.3.0 发布 增加 app.us......

Sub
2016/05/20
870
0
angular-async-loader 1.3.1 发布

angular-async-loader 是一个为 angular.js 1.x 应用添加异步加载modules/controllers/services/filters/directives等模块功能组件。 2016-05-22 angular-async-loader 1.3.1 发布 修复 app.......

Sub
2016/05/23
1K
1
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Angular 2 当前仍处于 Alpha/开发预览阶段,但是主要功能和...

oschina
2015/10/14
41.9K
36
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
189
0

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
49分钟前
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
6
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
4
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
5
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部