Skip to content

Commit

Permalink
再次重构, 并修改项目名称为 angular-lazyload
Browse files Browse the repository at this point in the history
Signed-off-by: TZ <atian25@qq.com>
  • Loading branch information
atian25 committed Oct 21, 2013
1 parent 037472d commit f01e104
Show file tree
Hide file tree
Showing 13 changed files with 284 additions and 287 deletions.
6 changes: 3 additions & 3 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = function (grunt) {

//define tasks
//启动Web服务器,监控变更,自动加载
grunt.registerTask('server', ['connect', 'open', 'watch']);
grunt.registerTask('server', ['connect', 'open', 'watch:server']);
grunt.registerTask('dev', ['connect', 'open', 'watch:dev']);
grunt.registerTask('build', ['clean', 'concat', 'uglify']);

Expand Down Expand Up @@ -91,7 +91,7 @@ module.exports = function (grunt) {
},
build: {
files: [
{expand: true, cwd:'src/', src: ['angular-seajs.js'], dest: 'dist/'}
{expand: true, cwd:'src/', src: ['angular-lazyload.js'], dest: 'dist/'}
]
}
},
Expand All @@ -106,7 +106,7 @@ module.exports = function (grunt) {
},
build: {
files: {
'dist/angular-seajs.min.js' : ['dist/angular-seajs.js']
'dist/angular-lazyload.min.js' : ['dist/angular-lazyload.js']
}
}
}
Expand Down
46 changes: 27 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
# angular-seajs
# angular-lazy-load

#### 通过[Sea.js](http://seajs.org/)动态按需加载[AngularJS](http://angularjs.org) 模块。
#### A lazyload service for angular projects, only load-on-demand, support seajs/requirejs/custom.
### 按需加载[AngularJS](http://angularjs.org)模块, 支持[Sea.js](http://seajs.org/)[RequireJS](http://requirejs.org/‎)

---
**[下载](dist/angular-seajs.js)** (or **[压缩版](dist/angular-seajs.min.js)**) **|**
**[下载](dist/angular-lazyload.js)** (or **[压缩版](dist/angular-lazyload.min.js)**) **|**
**[使用指南](#使用指南) |**
**[基本原理](#基本原理) |**
**[TODO/贡献代码](#TODO) |**
Expand All @@ -15,38 +16,46 @@
### 使用指南

**(1)** 安装
- 通过[Bower](http://bower.io/)安装: `bower install angular-seajs`
- 直接下载: [Download](dist/angular-seajs.js) (or [Minified](dist/angular-seajs.min.js))
- 通过[Bower](http://bower.io/)安装: `bower install angular-lazyload`
- 直接下载: [Download](dist/angular-lazyload.js) (or [Minified](dist/angular-lazyload.min.js))

**(2)** 在你的`index.html`中先引入`angular.js``sea.js`
**(2)** 在你的`index.html`中引入`angular-lazyload`
```
<!-- 实际项目中用bower安装到本地 -->
<script src="components/seajs/sea.js" id="seajsnode"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<!-- Step1: include js -->
<script src="../../src/angular-lazyload.js"></script>
```

**(3)** 通过`seajs`加载`angular-seajs`, 并手动启动bootstrap
**(3)** 在你的启动文件里面, 手动启动bootstrap
```
//修改`../../dist/angular-seajs`为`angular-seajs`的实际存放路径, app为你的主模块文件`app.js`
seajs.use(['../../dist/angular-seajs', 'app'], function(ngSea, app){
//Step2: bootstrap youself
seajs.use(['app'], function(app){
angular.bootstrap(document, ['app']);
});
```

**(3)** 添加`angular-seajs`为你的主模块的依赖中。
```
//app.js
var app = angular.module('app', ['angular-seajs', 'ngRoute']);
//Step3: add 'angular-lazyload' to your main module's list of dependencies
var app = angular.module('app', ['angular-lazyload', 'ngRoute']);
```

**(4)**`app.run`里进行初始化。
```
//app.js
app.run(['$sea', function($sea){
$sea.init(app);
//两个参数均为可选, 支持ui-route, 修改事件名为`$stateChangeStart`即可
//$sea.init(app, '$routeChangeStart');
app.run(['$lazyload', function($lazyload){
//Step5: init lazyload & hold refs
$lazyload.init(app);
app.register = $lazyload.register;
}]);
```

**(5)** 路由映射, 添加`controllerUrl`
```
//app.js
//Step4: add `controllerUrl` to your route item config
$routeProvider
.when('/test/a', {
controller: 'testACtrl',
Expand All @@ -58,8 +67,7 @@

**(6)** 在你的模块里进行注册controller。
```
//testACtrl.js
//通过`app.register`来注册
//Step6: use `app.register` to register controller/service/directive/filter
app.register.controller('testACtrl', ['$scope', function($scope){
...
}]);
Expand Down
8 changes: 4 additions & 4 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "angular-seajs",
"version": "0.3.0",
"name": "angular-lazyload",
"version": "0.4.0",
"author": "TZ <atian25@qq.com>",
"description": "using seajs to dynamic/lazy load angular module.",
"description": "A lazyload service for angular projects, only load-on-demand, support seajs/requirejs/custom.",
"repository": {
"type": "git",
"url": "https://github.com/atian25/angular-seajs"
"url": "https://github.com/atian25/angular-lazyload"
}
}
113 changes: 113 additions & 0 deletions dist/angular-lazyload.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/*! angular-lazyload - v0.4.0 - https://github.com/atian25/angular-lazyload - 2013-10-21 */
/**
* A lazyload service for angular projects, only load-on-demand, support seajs/requirejs/custom.
* support [Sea.js](http://seajs.org/) & [RequireJS](http://requirejs.org/‎)
*
* @author TZ <atian25@qq.com>
* @home https://github.com/atian25/angular-lazyload
*/
(function(global, undefined) {
'use strict';

/**
* register `angular-lazyload` module & `$lazyload` service
*/
angular.module('angular-lazyload', [], ['$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
function ($controllerProvider, $compileProvider, $filterProvider, $provide) {
//register `$lazyload` service
$provide.factory('$lazyload', ['$rootScope', '$q', function($rootScope, $q){
//hold provide's refs, because after ng bootstrap, you can't use `app.controller` to dynamic register controller.
var register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service,
decorator: $provide.decorator
};
return new LazyLoadProvider($rootScope, $q, register);
}]);
}
]);

/**
* $lazyload Service
*/
function LazyLoadProvider($rootScope, $q, register){
//patch the $rootScope, add `safeApply` function.
patchScope($rootScope);

/**
* hold provide's refs, because after ng bootstrap, you can't use `app.controller` to dynamic register controller.
*/
this.register = register;

/**
* @param {Object} params This will pass to the lazy load module
* @param {String} eventName Default to `$routeChangeStart`, //TODO: support `ui-route`
* @param {Function/String} loaderType The loader function: //FIXME: only support `seajs` current.
* - 'seajs' : default value, use [Sea.js](http://seajs.org/) to async load modules
* - 'requirejs': use [RequireJS](http://requirejs.org/‎) to async load modules
* - {Function} : custom loader function:
* - route : current route item
* - callback : callback function when async load success
*/
this.init = function(params, eventName, loaderType){
//get loaderFn: if loaderType is function, then just use it, else use build in loader by loaderType, default to seajs
var loaderFn = angular.isFunction(loaderType) ? loaderType : this.loaders[loaderType] || this.loaders['seajs'];

//listen to route change event to hook
$rootScope.$on(eventName || '$routeChangeStart', function(e, target){
//console.debug(e, '|', target);
var route = target && target.$$route;
if(route){
route.resolve = route.resolve || {};
//keypoint: use `route.resolve`
route.resolve.loadedModule = function(){
var defer = $q.defer();
loaderFn(route, function(m){
$rootScope.safeApply(function(){
defer.resolve(angular.isFunction(m) ? m(params) : m);
});
});
return defer.promise;
}
}
});
}
}

/**
* build-in loaders
*/
LazyLoadProvider.prototype.loaders = {};
LazyLoadProvider.prototype.loaders['seajs'] = function(route, callback){
//if exsit `controllerUrl` then trigger seajs async load.
if(typeof route.controllerUrl == 'string'){
seajs.use(route.controllerUrl, callback);
}
}

LazyLoadProvider.prototype.loaders['requirejs'] = function(route, callback){
//if exsit `controllerUrl` then trigger requirejs async load.
if(typeof route.controllerUrl == 'string'){
require(route.controllerUrl, callback);
}
}

/**
* 为$rootScope增加safeApply方法, 安全的apply
*/
function patchScope($rootScope){
$rootScope.safeApply = function(fn){
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest') {
if(fn && (typeof(fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
}
})(this);
2 changes: 2 additions & 0 deletions dist/angular-lazyload.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

121 changes: 0 additions & 121 deletions dist/angular-seajs.js

This file was deleted.

2 changes: 0 additions & 2 deletions dist/angular-seajs.min.js

This file was deleted.

Loading

0 comments on commit f01e104

Please sign in to comment.