我有一个 utils的
服务,这是非常沉重的。我想用一些在它定义在一个特定的用户动作的功能。作为此服务是沉重我想懒洋洋地初始化它(用户操作)。
我如何做到这一点?
服务
module.service('utils的'功能(DEP1,dep2){ this.method1 =功能(){ // 做一点事 } //其他方法});
控制器
module.controller('AppCtrl',函数($范围){ //我不想注入utils的作为一个依赖。 $ scope.processUserAction =功能(){ //如果服务不是实例 //实例并触发其定义的方法。 }});
标记
< DIV数据-NG-控制器=AppCtrl> <按键数据-NG-点击=processUserAction()>点击ME< /按钮>< / DIV>
解决方案
您可以用$喷油器的服务随时随地获得服务:的 https://docs.angularjs.org/api/auto/service/$injector 。注入$喷射到控制器中,每当你需要服务的使用:
这罚款为我工作,该服务在$注射器只调用实例化,没有错误抛出。
angular.module('yp.admin') 的.config(['$ stateProvider','$ urlRouterProvider','accessLevels','$ translateWtiPartialLoaderProvider', 功能($ stateProvider,$ urlRouterProvider,accessLevels,$ translateWtiPartialLoaderProvider){ $ stateProvider .STATE('admin.home',{ 网址:/家, 访问:accessLevels.admin, 观点:{ 内容:{ templateUrl:管理的/ home / home.html做为', 控制器:'AdminHomeController } } }); }]) 。服务('UtilsService',函数(){ 的console.log('utilsSerivce实例'); 返回{ 调用:function(){ 的console.log('Util.call称为'); } }; }) .controller('AdminHomeController',['$范围,$ rootScope,UserService,$喷油器', 功能($范围,$ rootScope,UserService,$喷油器){ $ injector.get('UtilsService')()调用。 }]);
控制台给我这样的:
stateChangeStart由:admin.homestateChangeSuccess由:admin.homeutilsSerivce实例Util.call叫
如果你想延迟加载JS,你应该有一个看 ocLazyLoad 模块: https://github.com/ocombe/ocLazyLoad 。它涉及各种延迟加载使用情况和你听起来像一个不错的选择吧。
I have a Utils
Service which is very heavy. I Want to use some of the functions defined in it on a particular user action. As this service is heavy I want to instantiate it lazily(on user action).
How do I achieve this?
Service
module.service('Utils', function (dep1, dep2) {
this.method1 = function () {
// do something
}
// other methods
});
Controller
module.controller('AppCtrl', function ($scope) {
// I don't want to inject Utils as a dependency.
$scope.processUserAction = function () {
// If the service is not instantiated
// instantiate it and trigger the methods defined in it.
}
});
Markup
<div data-ng-controller="AppCtrl">
<button data-ng-click="processUserAction()"> Click Me </button>
</div>
解决方案
You can use $injector service to get services anywhere: https://docs.angularjs.org/api/auto/service/$injector. Inject the $injector into your controller, and whenever you need a service use:
This worked fine for me, the service is instantiated only on the $injector call, no error thrown.
angular.module('yp.admin')
.config(['$stateProvider', '$urlRouterProvider', 'accessLevels', '$translateWtiPartialLoaderProvider',
function ($stateProvider, $urlRouterProvider, accessLevels, $translateWtiPartialLoaderProvider) {
$stateProvider
.state('admin.home', {
url: "/home",
access: accessLevels.admin,
views: {
content: {
templateUrl: 'admin/home/home.html',
controller: 'AdminHomeController'
}
}
});
}])
.service('UtilsService', function() {
console.log('utilsSerivce instantiated');
return {
call: function() {
console.log('Util.call called');
}
};
})
.controller('AdminHomeController', ['$scope', '$rootScope', 'UserService', '$injector',
function($scope, $rootScope, UserService, $injector) {
$injector.get('UtilsService').call();
}]);
console gives me this:
stateChangeStart from: to: admin.home
stateChangeSuccess from: to: admin.home
utilsSerivce instantiated
Util.call called
If you want to delay loading the JS you should have a look at the ocLazyLoad Module: https://github.com/ocombe/ocLazyLoad. It addresses all sorts of lazy loading use cases and yours sounds like a good fit for it.