├── .gitignore ├── Gulpfile.js ├── README.md ├── angular-require.js ├── angular-require.min.js ├── bower.json ├── package.json └── src └── angular-require.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | -------------------------------------------------------------------------------- /Gulpfile.js: -------------------------------------------------------------------------------- 1 | var pkg = require('./package.json') 2 | 3 | , gulp = require('gulp') 4 | , uglify = require('gulp-uglify') 5 | , header = require('gulp-header') 6 | , rename = require('gulp-rename') 7 | 8 | , bannerTemplate = [ 9 | '/*!', 10 | ' * <%= pkg.name %> <%= pkg.version %>', 11 | ' * <%= pkg.description %>', 12 | ' * License: <%= pkg.license %>', 13 | ' * Author: <%= pkg.author %>', 14 | ' * Build: <%= date %>', 15 | ' **/\n' 16 | ].join('\n') 17 | , bannerData = { 18 | pkg: pkg, 19 | date: new Date() 20 | } 21 | 22 | gulp.task('default', function(){ 23 | return gulp.src('src/angular-require.js') 24 | .pipe(header(bannerTemplate, bannerData)) 25 | .pipe(gulp.dest('.')) 26 | .pipe(uglify({ 27 | mangle: { 28 | except: ['angular'] 29 | }, 30 | preserveComments: 'license' 31 | })) 32 | .pipe(rename('angular-require.min.js')) 33 | .pipe(gulp.dest('.')); 34 | }); 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## angular-require 2 | use require in angular painless 3 | 4 | ### Requirements 5 | - require.js 6 | - require-css.js (optional, if you will load css files, you should include it) 7 | 8 | ### Usage 9 | 1. load `angular-require.js` before your app's init function. You can load it 10 | using require.js or just write in html. 11 | 2. include `ngRequire` in your angular app's dependence. 12 | 3. Done. 13 | 14 | Ater doing above, you can use require to load your modules and dependencies asynchronous. 15 | ```js 16 | angular.module('app', ['ngRequire', 'ui.router']) 17 | .config(...) 18 | ``` 19 | 20 | ### What's provided by ngRequire 21 | You can use `$requireProvider` in configBlocks. `$requireProvider` have four methods. 22 | 23 | - require 24 | - requireJS 25 | - requireCSS 26 | - requireResolve 27 | 28 | The first three methods are the same actually. You can use them to require JS, CSS 29 | or any files. 30 | ```js 31 | $stateProvider.state('demo', { 32 | url: '/demo', 33 | templateUrl: '/path/to/demo.html', 34 | controller: 'demoCtrl', 35 | resolve: { 36 | deps: $requireProvider.requireJS([ 37 | 'controllers/demoCtrl', 38 | 'services/demoService' 39 | ]), 40 | css: $requireProvider.requireCSS([ 41 | 'css!css/main.css', 42 | 'css!css/demo.css' 43 | ]) 44 | } 45 | }); 46 | ``` 47 | 48 | You can also just list modules's dependencies when define the module like below. Then `require.js` 49 | will handle them. Compose you have `controllers/demoCtrl.js` file. 50 | ```js 51 | define(['app', 'services/demoService'], function(app){ 52 | app.controller('demoCtrl', ['$scope', 'demoService', function($scope, demoService){ 53 | // demoService is available here! 54 | }]); 55 | }); 56 | ``` 57 | 58 | `requireResolve` is the method you can use to take full use of `$stateProvider`'s 59 | resolve option. If you want to prepare necessary data before the controller 60 | injected in order to prevent page from flicking, you can use this method. 61 | ```js 62 | $stateProvider.state('demo', { 63 | url: '/demo', 64 | templateUrl: '/path/to/demo.html', 65 | controller: 'demoCtrl', 66 | resolve: { 67 | // ... your controllers, services, css and something else can be required here 68 | data: $requireProvider.requireResolve([ 69 | 'resolves/data1', 70 | 'resolves/data2' 71 | ]) 72 | } 73 | }); 74 | ``` 75 | 76 | In your `resolves/data1`, you can define the function like this. 77 | ```js 78 | define(['app'], function(){ 79 | return ['$q', '$timeout', function($q, $timeout){ 80 | var deferred = $q.defer(); 81 | $timeout(function(){ 82 | deferred.resolve('data1'); 83 | }, 1000); 84 | return deferred.promise; 85 | }] 86 | }); 87 | ``` 88 | 89 | ### Events provided by ngRequire 90 | If require load files error, it will fire event `timeout`, `nodefine` or `scripterror`. So you can listener these event in angular `$rootScope`. 91 | 92 | All events 93 | 94 | - requireError, in the callback, require.js' error object will be passed in. You can get `error.requireType` and `error.requireModules` 95 | - requireTimeout, in the callback, require.js' `error.requireModules` will be passed in 96 | - requireNodefine, in the callback, require.js' `error.requireModules` will be passed in 97 | - requireScripterror, in the callback, require.js' `error.requireModules` will be passed in 98 | 99 | ### License 100 | MIT 101 | -------------------------------------------------------------------------------- /angular-require.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * angular-require 1.3.0 3 | * use require in angular painless 4 | * License: MIT 5 | * Author: Treri 6 | * Build: Fri Sep 04 2015 10:13:41 GMT+0800 (CST) 7 | **/ 8 | (function() { 9 | angular.module('ngRequire', []) 10 | .provider('$require', function() { 11 | var toArray = function(deps){ 12 | if(angular.isString(deps)){ 13 | deps = [deps]; 14 | } 15 | return deps; 16 | }; 17 | var capitalize = function(str) { 18 | return str.substr(0, 1).toUpperCase() + str.substr(1); 19 | } 20 | var requireFile = function(deps) { 21 | deps = toArray(deps); 22 | return ['$q', '$rootScope', function($q, $rootScope) { 23 | var deferred = $q.defer(); 24 | require(deps, function() { 25 | $rootScope.$apply(deferred.resolve); 26 | }, function(error){ 27 | error.requireModules.forEach(function(id){ 28 | requirejs.undef(id); 29 | }); 30 | $rootScope.$broadcast('requireError', error); 31 | $rootScope.$broadcast('require' + capitalize(error.requireType), error.requireModules); 32 | }); 33 | return deferred.promise; 34 | }]; 35 | }; 36 | var requireResolve = function(deps) { 37 | deps = toArray(deps); 38 | return ['$q', '$rootScope', '$injector', function($q, $rootScope, $injector) { 39 | var deferred = $q.defer(); 40 | require(deps, function() { 41 | $q.all([].slice.call(arguments).map($injector.invoke)) 42 | .then(deferred.resolve, deferred.reject); 43 | }, function(error){ 44 | error.requireModules.forEach(function(id){ 45 | requirejs.undef(id); 46 | }); 47 | $rootScope.$broadcast('requireError', error); 48 | $rootScope.$broadcast('require' + capitalize(error.requireType), error.requireModules); 49 | }); 50 | return deferred.promise; 51 | }]; 52 | }; 53 | this.require = requireFile; 54 | this.requireJS = requireFile; 55 | this.requireCSS = requireFile; 56 | this.requireResolve = requireResolve; 57 | this.$get = angular.noop; 58 | }); 59 | 60 | var module = angular.module; 61 | angular.module = function() { 62 | var args = [].slice.call(arguments); 63 | var app = module.apply(angular, args); 64 | if(args.length < 2 || args[1].indexOf('ngRequire') < 0){ 65 | return app; 66 | } 67 | return app.config([ 68 | '$controllerProvider', 69 | '$compileProvider', 70 | '$filterProvider', 71 | '$provide', 72 | function($controllerProvider, $compileProvider, $filterProvider, $provide) { 73 | app.controller = $controllerProvider.register; 74 | app.directive = $compileProvider.directive; 75 | app.filter = $filterProvider.register; 76 | app.factory = $provide.factory; 77 | app.service = $provide.service; 78 | app.provider = $provide.provider; 79 | app.value = $provide.value; 80 | app.constant = $provide.constant; 81 | app.decorator = $provide.decorator; 82 | } 83 | ]); 84 | }; 85 | })(); 86 | -------------------------------------------------------------------------------- /angular-require.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * angular-require 1.3.0 3 | * use require in angular painless 4 | * License: MIT 5 | * Author: Treri 6 | * Build: Fri Sep 04 2015 10:13:41 GMT+0800 (CST) 7 | **/ 8 | !function(){angular.module("ngRequire",[]).provider("$require",function(){var r=function(r){return angular.isString(r)&&(r=[r]),r},e=function(r){return r.substr(0,1).toUpperCase()+r.substr(1)},i=function(i){return i=r(i),["$q","$rootScope",function(r,o){var n=r.defer();return require(i,function(){o.$apply(n.resolve)},function(r){r.requireModules.forEach(function(r){requirejs.undef(r)}),o.$broadcast("requireError",r),o.$broadcast("require"+e(r.requireType),r.requireModules)}),n.promise}]},o=function(i){return i=r(i),["$q","$rootScope","$injector",function(r,o,n){var u=r.defer();return require(i,function(){r.all([].slice.call(arguments).map(n.invoke)).then(u.resolve,u.reject)},function(r){r.requireModules.forEach(function(r){requirejs.undef(r)}),o.$broadcast("requireError",r),o.$broadcast("require"+e(r.requireType),r.requireModules)}),u.promise}]};this.require=i,this.requireJS=i,this.requireCSS=i,this.requireResolve=o,this.$get=angular.noop});var r=angular.module;angular.module=function(){var e=[].slice.call(arguments),i=r.apply(angular,e);return e.length<2||e[1].indexOf("ngRequire")<0?i:i.config(["$controllerProvider","$compileProvider","$filterProvider","$provide",function(r,e,o,n){i.controller=r.register,i.directive=e.directive,i.filter=o.register,i.factory=n.factory,i.service=n.service,i.provider=n.provider,i.value=n.value,i.constant=n.constant,i.decorator=n.decorator}])}}(); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-require", 3 | "main": "angular-require.js", 4 | "version": "1.3.0", 5 | "homepage": "https://github.com/Treri/angular-require", 6 | "authors": [ 7 | "Treri " 8 | ], 9 | "description": "use require in angular painless", 10 | "keywords": [ 11 | "angular", 12 | "require" 13 | ], 14 | "license": "MIT", 15 | "ignore": [ 16 | "**/.*", 17 | "node_modules", 18 | "bower_components", 19 | "test", 20 | "tests" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-require", 3 | "version": "1.3.0", 4 | "description": "use require in angular painless", 5 | "main": "angular-require.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/Treri/angular-require.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "require" 16 | ], 17 | "author": "Treri", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/Treri/angular-require/issues" 21 | }, 22 | "homepage": "https://github.com/Treri/angular-require", 23 | "devDependencies": { 24 | "gulp": "^3.9.0", 25 | "gulp-header": "^1.7.1", 26 | "gulp-rename": "^1.2.2", 27 | "gulp-uglify": "^1.4.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/angular-require.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | angular.module('ngRequire', []) 3 | .provider('$require', function() { 4 | var toArray = function(deps){ 5 | if(angular.isString(deps)){ 6 | deps = [deps]; 7 | } 8 | return deps; 9 | }; 10 | var capitalize = function(str) { 11 | return str.substr(0, 1).toUpperCase() + str.substr(1); 12 | } 13 | var requireFile = function(deps) { 14 | deps = toArray(deps); 15 | return ['$q', '$rootScope', function($q, $rootScope) { 16 | var deferred = $q.defer(); 17 | require(deps, function() { 18 | $rootScope.$apply(deferred.resolve); 19 | }, function(error){ 20 | error.requireModules.forEach(function(id){ 21 | requirejs.undef(id); 22 | }); 23 | $rootScope.$broadcast('requireError', error); 24 | $rootScope.$broadcast('require' + capitalize(error.requireType), error.requireModules); 25 | }); 26 | return deferred.promise; 27 | }]; 28 | }; 29 | var requireResolve = function(deps) { 30 | deps = toArray(deps); 31 | return ['$q', '$rootScope', '$injector', function($q, $rootScope, $injector) { 32 | var deferred = $q.defer(); 33 | require(deps, function() { 34 | $q.all([].slice.call(arguments).map($injector.invoke)) 35 | .then(deferred.resolve, deferred.reject); 36 | }, function(error){ 37 | error.requireModules.forEach(function(id){ 38 | requirejs.undef(id); 39 | }); 40 | $rootScope.$broadcast('requireError', error); 41 | $rootScope.$broadcast('require' + capitalize(error.requireType), error.requireModules); 42 | }); 43 | return deferred.promise; 44 | }]; 45 | }; 46 | this.require = requireFile; 47 | this.requireJS = requireFile; 48 | this.requireCSS = requireFile; 49 | this.requireResolve = requireResolve; 50 | this.$get = angular.noop; 51 | }); 52 | 53 | var module = angular.module; 54 | angular.module = function() { 55 | var args = [].slice.call(arguments); 56 | var app = module.apply(angular, args); 57 | if(args.length < 2 || args[1].indexOf('ngRequire') < 0){ 58 | return app; 59 | } 60 | return app.config([ 61 | '$controllerProvider', 62 | '$compileProvider', 63 | '$filterProvider', 64 | '$provide', 65 | function($controllerProvider, $compileProvider, $filterProvider, $provide) { 66 | app.controller = $controllerProvider.register; 67 | app.directive = $compileProvider.directive; 68 | app.filter = $filterProvider.register; 69 | app.factory = $provide.factory; 70 | app.service = $provide.service; 71 | app.provider = $provide.provider; 72 | app.value = $provide.value; 73 | app.constant = $provide.constant; 74 | app.decorator = $provide.decorator; 75 | } 76 | ]); 77 | }; 78 | })(); 79 | --------------------------------------------------------------------------------