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

问题描述

我有一个 utils的服务，这是非常沉重的。我想用一些在它定义在一个特定的用户动作的功能。作为此服务是沉重我想懒洋洋地初始化它（用户操作）。

我如何做到这一点？

服务

  module.service（'utils的'功能（DEP1，dep2）{
   this.method1 =功能（）{
      // 做一点事
   }
   //其他方法
}）;
 

控制器

  module.controller（'AppCtrl'，函数（$范围）{
    //我不想注入utils的作为一个依赖。    $ scope.processUserAction =功能（）{
       //如果服务不是实例
       //实例并触发其定义的方法。
    }
}）;
 

标记

 ＆LT; D​​IV数据-NG-控制器=AppCtrl＆GT;
    ＆LT;按键数据-NG-点击=processUserAction（）＆GT;点击ME＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

解决方案

您可以用$喷油器的服务随时随地获得服务：的 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.home
stateChangeSuccess由：admin.home
utilsSerivce实例
Util.call叫
 

如果你想延迟加载JS，你应该有一个看 ocLazyLoad 模块：<一HREF =htt​​ps://github.com/ocombe/ocLazyLoad相对=nofollow> 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屋！