传统的 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+require+angular-ui-router+angular-async-loader"正是这样一个实现方案,它结合了AngularJS、RequireJS、Angular UI Router和Angular Async Loader来达到动态加载目的。 AngularJS本身不直接支持按...
这种简单而有用的依赖注入到 node.js 类似于 angular.js。 文档 安装 $ npm install theinjection --save 首先,您需要注册依赖项。 var Injection = require ( 'theinjection' ) ; var injection = new Injector...
通过回调函数、Promises、async/await 等机制,开发者可以编写出清晰且易于维护的异步代码,提高了开发效率和应用的响应速度。 ##### 2.3 丰富的生态系统 Node.js 拥有一个庞大的生态系统——NPM(Node Package ...
4. **AJAX与异步编程**:如果项目涉及与服务器交互,可能会使用XMLHttpRequest或现代的Fetch API来发送异步请求,获取或提交数据,实现页面的动态加载。 5. **模块化**:源代码可能会使用CommonJS或ES6模块系统来...
- CommonJS:Node.js中的模块系统,使用`require`导入模块,`module.exports`导出模块。 - ES6模块:使用`import`和`export`关键字实现模块导入和导出。 - 工具库如Webpack或Rollup可以将模块打包,便于在浏览器...
这个“js脚本大集合”显然是一份包含多种JavaScript特效和功能实现的资源包,适合初学者学习和开发者参考。 1. **基础概念**: - JavaScript主要由ECMAScript规范定义,是网景公司的Brendan Eich在1995年发明的。 ...
原始种子项目提供了一种使用自定义加载器异步加载初始js文件集的方法。 Bootstraping文件( require-config.js )用于实际页面上的单元测试和引导。 如果您不打算使用r.js来构建源,则应在生产中使用此文件之前考虑...
JavaScript,简称JS,是Web开发中的重要脚本语言,用于实现客户端的动态效果和交互。在网页中,JavaScript可以操作DOM(文档对象模型),处理事件,进行AJAX(异步JavaScript和XML)通信,以及创建复杂的Web应用程序...
- **AJAX**:异步JavaScript和XML技术,实现在不重新加载整个页面的情况下更新部分网页内容。 - **Promise与async/await**:解决异步回调地狱问题,使异步代码更易于理解和维护。 #### 3. 模块化开发 - **CommonJS*...
- CommonJS:Node.js环境中的模块系统,通过require导入和module.exports导出模块。 - ES6模块:使用import和export进行模块导入和导出。 - AMD/CMD: RequireJS和Sea.js等库支持的异步模块定义。 8. **ES6及...
1. CommonJS:Node.js环境下的模块系统,通过require导入模块,module.exports或exports导出模块。 2. ES6模块:使用import和export关键字进行模块导入和导出,静态化导入有助于编译时优化。 七、JavaScript框架与...
【标题】"仿京东js|京东js" 指的是一个项目或教程,其目标是模仿京东网站的部分JavaScript实现,可能是为了学习、实践或者构建类似的电商网页。在JavaScript编程中,这种模仿通常涉及到前端交互、动态加载、用户体验...
- **CommonJS**:Node.js使用CommonJS模块系统,通过require导入模块,module.exports导出模块。 - **ES6模块**:使用import和export关键字进行导入和导出,更符合静态类型语言的模块化思想。 7. **JavaScript...
- CommonJS:Node.js环境下的模块系统,通过`require`导入模块,`module.exports`导出模块。 - ES6模块:使用`import`和`export`关键字进行模块导入和导出,适用于浏览器和Node.js。 8. **错误处理** - try......
- CommonJS:Node.js环境中使用,通过`require`导入模块,`module.exports`导出模块。 - ES6模块:使用`import`和`export`关键字进行导入和导出。 9. **错误处理** - try...catch:用于捕获和处理运行时错误,...
JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的编程语言,主要负责实现客户端的动态效果和交互功能。它的语法与Java有相似之处,但两者并非同一语言。本指南将带你从零开始,逐步深入理解JavaScript的...
- **CommonJS**:Node.js环境下的模块化标准,通过`require`和`module.exports`来实现模块的加载和导出。 #### 8. 前端框架/库 - **React**:使用React创建组件化的用户界面,通过虚拟DOM提高渲染效率。 - **Vue**...
JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的编程语言,主要负责实现客户端的交互效果。本教程将全面引导你从零基础开始学习JavaScript,直至达到精通的水平。 一、JavaScript基础知识 JavaScript...
- CommonJS:Node.js中的模块系统,通过`require`导入,`module.exports`导出。 - ES6模块:`import`和`export`关键字,静态加载,有利于编译时优化。 9. **ES6及后续版本新特性** - 类与继承:`class`语法糖,`...
- CommonJS:Node.js环境下的模块规范,通过require导入模块,module.exports或exports导出模块。 - ES模块:ES6引入的模块系统,使用import和export关键字。 8. **AJAX与Fetch** - AJAX(异步JavaScript和XML)...