传统的 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 + require.js构建模块化单页面应用的方法,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍吧。 AngularJS描述: angularjs是可以用来构建WEB应用的,WEB...
ngFormio, 用于 angular.js + Form.io的JSON动力表单渲染库 用于 Form.io的angular.js JSON表单渲染器这个库将与 Form.io 一起使用,以提供动态JSON表单呈现功能。 这样可以使用 Form.io 提供的模式以下列格式呈现...
异步加载 angular 模块及其依赖项。 如果应用程序离线,加载器将等待在线以开始下载。 参见 ngCordova:$cordovaNetwork。 如果 $cordovaNetwork 可用,它将使用它来检查在线状态。 否则,它使用 navigator.onLine ...
angular.js-master.zip
本文主要介绍的是angular.js+node.js实现下载图片处理,下载有两种方式,下面话不多说,来看看详细的介绍吧。 第一种: 不指定完整路径,然后发送get给server让server自己去拼接路径,然后用express的res.download来...
本demo使用bootstrap为前端页面框架,angular.js 为页面逻辑框架,制作了带数据加载,分页,并且支持快速搜索数据的表格分页插件,可以自定义显示多少条数据,动态管理各项设置。
为了下载angular.min.js花费了很长时间,希望对你有用。
Node.js+Angular实现简易聊天室.pdf
angular.js-master详细demo
angular.js文件包angular.js文件包
angular.min.js
angular.js下载
Node.js+Angular实现简易聊天室
angular+require+angular-ui-router+angular-async-loader 根据需求加载js的一个demo
angular.js-1.6.4
Angular-angular-async-local-storage.zip,高效的角应用程序和pwa本地存储模块:简单的api 性能 可观察性 验证同步角应用程序的本地存储,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块...