如何动态实例化一个服务? [英] How to instantiate a service dynamically?

问题描述

我有一个非常繁重的 Utils 服务.我想在特定用户操作上使用其中定义的一些功能.由于这项服务很重，我想懒惰地实例化它(根据用户操作).

我如何实现这一目标?

服务

module.service('Utils', function (dep1, dep2) {this.method1 = 函数 () {//做点什么}//其他方法});

控制器

module.controller('AppCtrl', function ($scope) {//我不想将 Utils 作为依赖项注入.$scope.processUserAction = 函数 () {//如果服务没有被实例化//实例化它并触发其中定义的方法.}});

标记

<button data-ng-click="processUserAction()">点击我</button>

解决方案

你可以使用 $injector 服务在任何地方获取服务:https://docs.angularjs.org/api/auto/service/$injector.将 $injector 注入您的控制器，并在您需要服务时使用:

这对我来说效果很好，服务仅在 $injector 调用时实例化，没有抛出错误.

 angular.module('yp.admin').config(['$stateProvider', '$urlRouterProvider', 'accessLevels', '$translateWtiPartialLoaderProvider',函数($stateProvider，$urlRouterProvider，accessLevels，$translateWtiPartialLoaderProvider){$stateProvider.state('admin.home', {网址:/家"，访问:accessLevels.admin，意见:{内容: {templateUrl: 'admin/home/home.html',控制器:'AdminHomeController'}}});}]).service('UtilsService', function() {console.log('utilsSerivce 实例化');返回 {调用:函数(){console.log('Util.call 调用');}};}).controller('AdminHomeController', ['$scope', '$rootScope', 'UserService', '$injector',函数($scope，$rootScope，UserService，$injector){$injector.get('UtilsService').call();}]);

控制台给我这个:

stateChangeStart from: to: admin.homestateChangeSuccess 从:到:admin.homeutilsService 实例化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.

这篇关于如何动态实例化一个服务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！