Question

我是棱角分明的新手，所以请耐心等待。

首先，我要做的是将我的角度应用程序分成两个常用服务的模块，一个用于保存配置，另一个用于与后端服务器通信的api服务。此外，大多数配置，如主题，用户权限，e.t.c，我希望从服务器获取，而不是在应用程序内编码。

我使用https://github.com/keshavos/generator-angularjs-cordova作为我的应用的基础。

为了测试，我写了（生成）两个服务，

/app/modules/core/services/api-service.js
'use strict';

angular
    .module('core')
    .service('ApiService', [

        function() {

            //alert(SessionConfig.getConst("SERVER_URL"));
            this.config = {
                'site':'http://localhost:1337'
            }

            this.getConfig = function() {
                return this.config;
            };

        }
    ]);

会话配置应包含实际配置

/app/modules/core/services/session-config.js
'use strict';

angular
    .module('core')
    .service('SessionConfig', [

        function() {
            this.config_const = {
                "SERVER_URL" : "http://localhost:1337",
            };

            this.config_vars = {
                "user" : {},
                "theme": "default"
            };

            this.getConst = function() {
                return true;
            };

        }
    ]);

然后我尝试将它们包含在家庭控制器中，如

/app/modules/core/controllers/home.js
'use strict';

angular
    .module('core')
    .config(['$sailsProvider', function ($sailsProvider) {
        $sailsProvider.url = 'http://localhost:1337';
    }])
    .controller('HomeController', ['$scope','$sails', 'SessionConfig',
        function($scope,$sails,SessionConfig) {

以上引发错误Error: [$injector:unpr] Unknown provider: SessionConfigProvider <- SessionConfig

但是，当我尝试以类似的方式包含ApiService时，它可以正常运行

])
    .controller('HomeController', ['$scope','$sails', 'ApiService',
        function($scope,$sails,ApiService) {

我做错了什么？

Answer 1

尝试将您的服务抽象为单独的模块，然后将其注入您的应用程序。你可以拥有

var apiService = angular.module('apiService', []);

apiService.factory('$apiService', function() {
   return
      {
       someFunction: function() {
          //do some stuff
         }  
      }  
});

为SessionConfig做同样的事情

var sessionConfig = angular.module('sessionConfig', []);

sessionConfig.factory('$sessionConfig', function() {
   return
      {
       someFunction: function() {
          //do some stuff
         }  
      }  
});

然后当你初始化你的应用程序时，你可以去

var coreApp = angular.module('coreApp', ['apiService', 'sessionConfig']);

然后你的控制器

coreApp.controller('myCtrl', function($apiService, $sessionConfig) {
    $apiService.someFunction();
    $sessionConfig.someFunction();
});

服务实质上返回一个对象，您可以使用点表示法在其上调用您在其中定义的方法。它本质上就是你所拥有的，这就是我如何组织它，因为我个人觉得它更清楚一点！

希望有所帮助！

编辑以显示将两个服务保留在同一模块中

var app = angular.module('app', []);

app.factory('$serviceOne', function(){
  return {
      serviceOneFunction: function() {
         //do something
         }
     }
});

app.factory('$serviceTwo', function(){
  return {
     serviceTwoFunction: function() {
         //do something 
         }
     }
});

app.controller('myCtrl', function($serviceOne, $serviceTwo) {
    $serviceOne.serviceOneFunction();
    $serviceTwo.serviceTwoFunction();
});

这是您尝试实施的工作的小提琴

http://jsfiddle.net/HB7LU/19285/

在angularjs中，我该如何连接服务？

1 个答案: