[英]Loading external modules while lazy loading in angular
我可以在requirejs的帮助下延迟加载angularjs。 但是,如何加载需要与控制器关联的模块?
我在app.js中的示例配置如下所示,加载了所有提供程序并保留了引用。
var app = angular.module('myApp', ['ui.router'])
var cacheProviders = {};
app.getProvider = function () {
return cacheProviders.$provide;
}
app.getCompileProvider = function () {
return cacheProviders.$compileProvider;
}
app.getControllerProvider = function () {
return cacheProviders.$controllerProvider;
}
app.getFilterProvider = function () {
return cacheProviders.$filterProvider;
}
app.config(['$stateProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
(function () {
cacheProviders.$controllerProvider = $controllerProvider;
cacheProviders.$compileProvider = $compileProvider;
cacheProviders.$filterProvider = $filterProvider;
cacheProviders.$provide = $provide;
})();
var lazyCtrlLoad = function (controllerName) {
return ["$q", function ($q) {
var deferred = $q.defer();
require([controllerName], function () {
deferred.resolve();
});
return deferred.promise;
}];
}
$stateProvider.state('main.view2b', {
url: '/view2b',
templateUrl: 'forms/empl/searchEmplForm.html',
controllerAs: 'srchC',
controller: 'searchEmplCtrl',
resolve: {
loadOtherCtrl: lazyCtrlLoad('searchEmplCtrl')
}
})
在我的另一个模块中,我试图注册控制器,加载服务。
define([
'angular', 'angularResource'
], function (angular) {
angular.module('myApp')
.getControllerProvider()
.register(ctrl, ...)
但是,在下面加载服务时,我需要访问$ resource,它是angularResource中ngResource模块的一部分。
angular.module('myApp')
.getProvider().service('deptService', ['$resource', function ($resource) {
return $resource('/dept/:dept', {dept: '@_dept'});
}])
懒惰地初始化javascript控制器/服务时,如何加载ngResource?
在这里看看AngularAMD
。 它允许您在不使用lazyload的情况下在ui路由器中加载控制器。 该AngularAMD用于集成requireJs和Angular。
$stateProvider
.state('home', {
url: '',
views: {
'@': angularAmd.route({
templateUrl: 'ngApplication/application/shared/layouts/basic/basicTplView.html',
controllerUrl: 'ngApplication/application/shared/layouts/basic/basicTplCtrl.js',
controller: 'basicTplCtrl'
}),
'header@home': angularAmd.route({
templateUrl: 'ngApplication/application/shared/layouts/header/headerView.html',
controllerUrl: 'ngApplication/application/shared/layouts/header/headerCtrl.js',
controller: 'headerCtrl'
})
},
});
另外,您使用的是requirejs,您可以使用requireJs的define
语法加载特定控制器的所有依赖项。 假设您要在一个单独的文件中创建一个loginCtroller,并且此控制器依赖于另一个角度服务:
define(['app', 'transformRequestAsFormPostService'], function (app) {
app.controller('loginCtrl', ['$scope', '$rootScope', '$sce', '$http', '$state', 'transformRequestAsFormPostService', function ($scope, $rootScope, $sce, $http, $state, transformRequestAsFormPost) {
$scope.login = function () {
/*do something here using the service*/
};
}]);
});
在这里,称为transformRequestAsFormPostService
的依赖关系是另一个文件,我在main.js(requireJs配置文件)中定义了它,并且使用与loginCtrol相同的方法来定义它。 现在,我正在项目中使用它,到目前为止效果很好。
问候,
埃内斯托
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.