ui-module

0.1.4 • Public • Published

ui-module

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', //<扩展单向传输数据---向"父"级传输
        }

Demo

  1. 基本使用和模块内外数据通信sdemo/index.html
  2. 配合ui-router使用sdemo/ui-router.html

更多demo 请访问SDemo (www.sdemo.cn)

Package Sidebar

Install

npm i ui-module

Weekly Downloads

1

Version

0.1.4

License

MIT

Last publish

Collaborators

  • daycool