Based on the requirejs angular lazyload module (controller、template、directive 、filter etc.)
基于requirejs angular 模块式开发,按需加载模块, 根据模块延迟加载
使用ui-module自动加载模块(模块有controller、template、directive等)
配合ng-router或ui-router, 只需要把模板改成<div ui-module="xxx/XXX" ui-loading></div>
ui-module 是requirejs define的模块,返回必须是函数
ui-loading 显示loading动画(模块加载完成前)
1.引入ui-module.js文件
2.页面或模板
<h2>登录模块</h2>
<div ui-module="user/Login"></div>
<h2>用户列表模块</h2>
<div ui-module="user/UserList" ui-loading></div>
3.js调用
var app = angular.module('app', ['ui-module']);
angular.bootstrap(document.body, ['app']);
4.扩展模块内外数据交互
同定义指令时独立scope类似如: 模板
<div ui-module="user/UserLogin"
user-name="data.userName"
user-pass="data.userPass"
user-Age="data.userAge"
show-Addr="showAddr(userAddr)" ui-loading></div>
在模块内controller(UserLoginCtrl)添加
$scope.moduleScope = {
'userName': '@userName',
'userPass': '=userPass',
'showAddr': '&showAddr',
'userAge': '>userAge', //>扩展单向传输数据---向"子"级传输
'userAge': '<userAge', //<扩展单向传输数据---向"父"级传输
}
- 基本使用和模块内外数据通信sdemo/index.html
- 配合ui-router使用sdemo/ui-router.html