Code Monkey home page Code Monkey logo

ui-module's Introduction

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)

ui-module's People

Contributors

daycool avatar

Stargazers

 avatar

Watchers

James Cloos avatar robyn avatar

Forkers

mw666666

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.