Question

我继承了一个每页使用一个应用程序的AngularJS项目。目的是主要获得实时数据绑定。我可以创建应用程序之间共享的服务吗？现有代码如下。

目前为了让modalService工作，我需要为每个应用程序复制一个版本......在这种情况下，AccountSettings的东西使用modalService2。否则我在angular.module语句中出错。

有没有一种方法可以通过PortfolioBuilder的东西和AccountSettings的东西共享modalService？

在PortfolioBuilderController.js中

(function () {
    'use strict';
    var app = angular.module('portfolioBuilder', ['filters', 'ngAnimate', 'ui.bootstrap']);
    app.controller('PortfolioBuilderController', [
        '$window', '$scope', '$log', '$timeout', 'PortfolioBuilder', 'modalService',
        function ($window, $scope, $log, $timeout, PortfolioBuilder, modalService) {
            $scope.portfolioBuilder = PortfolioBuilder;
        ... all the portfolioBuilder controller functions ...
        }]);
})();

在AccountSettingsController.js中

(function () {
    'use strict';
    var app = angular.module('accountSettings', ['filters', 'ngAnimate', 'ui.bootstrap']);
    app.controller('AccountSettingsController', [
        '$window', '$scope', '$log', '$timeout', 'AccountSettings', 'modalService2',
        function ($window, $scope, $log, $timeout, AccountSettings, modalService2) {
            $scope.accountSettings = AccountSettings;
        ... all the accountSettings controller functions ...
        }]);
})();

在PortfolioBuilderService.js中

(function () {
    var app = angular.module('portfolioBuilder') || app;
    app.factory('PortfolioBuilder', ['$rootScope', '$window', '$timeout', '$log', '$http', 'modalService',
        function ($rootScope, $window, $timeout, $log, $http, modalService) {
        ... all the portfolioBuilder service functions ...
        }]);
})();

在AccountSettingsService.js

中

(function () {
    var app = angular.module('accountSettings') || app;
    app.factory('AccountSettings', ['$rootScope', '$window', '$timeout', '$log', '$http', 'modalService2',
        function ($rootScope, $window, $timeout, $log, $http, modalService2) {
        ... all the portfolioBuilder service functions ...
        }]);
})();

modalService.js中的

(function () {
    var app = angular.module('portfolioBuilder') || app; 
    app.service('modalService', ['$modal', '$log',
        function ($modal, $log) {
        ... all the modalService functions ...
        }]);
})();

modalService2.js中的

(function () {
    var app = angular.module('accountSettings') || app; 
    app.service('modalService2', ['$modal', '$log',
        function ($modal, $log) {
        ... all the modalService functions ...
        }]);
})();

Answer 1

将新模块modal.mod创建为modal.module.js：

(function () {
    var app = angular.module('modal.mod',[]) ; 
    app.service('modalService', ['$modal', '$log',
        function ($modal, $log) {
        ... all the modalService functions ...
        }]);
})();

注入portfolioBuilder

的模块PortfolioBuilderController.js

(function () {
    'use strict'; 
    // injecting "modal.mod" in the "portfolioBuilder"
    var app = angular.module('portfolioBuilder', ['modal.mod','filters', 'ngAnimate', 'ui.bootstrap']);
    app.controller('PortfolioBuilderController', [
        '$window', '$scope', '$log', '$timeout', 'PortfolioBuilder', 'modalService',
        function ($window, $scope, $log, $timeout, PortfolioBuilder, modalService) {
            $scope.portfolioBuilder = PortfolioBuilder;
        ... all the portfolioBuilder controller functions ...
        }]);
})();

同样在AccountSettingsController.js：

(function () {
    'use strict';
    // injecting "modal.mod" in the "accountSettings"
    var app = angular.module('accountSettings', ['modal.mod','filters', 'ngAnimate', 'ui.bootstrap']);
    app.controller('AccountSettingsController', [
        '$window', '$scope', '$log', '$timeout', 'AccountSettings', 'modalService',
        function ($window, $scope, $log, $timeout, AccountSettings, modalService) {
            $scope.accountSettings = AccountSettings;
        ... all the accountSettings controller functions ...
        }]);
})();

同样，在需要modal.mod的任何模块中注入modalService。

AngularJS。如何在两个应用之间共享单个服务

1 个答案: