Question

我是web dev和AngularJS的新手。我试图弄清楚如何使用服务，并且我遵循了本教程：http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application

服务如何与控制器连接？这是隐含的吗？我知道您可以将服务注入控制器，但是如何在教程中完成？

Answer 1

您将服务注入控制器。像这样。服务背后的原因是你想让你的控制器尽可能“瘦”。所有重要的逻辑/请求都应该外包给服务。

app.service('myService', function(){
  this.name = 'Tyler';
}

app.controller('myCtrl', function($scope, myService){
  $scope.name = myService.name;
}

使用服务的另一个好处是您可以将该服务注入多个控制器。一个很好的例子是你有一个提出HTTP请求的服务。您可以简单地创建一个执行请求的服务，并将该服务注入您需要该功能的每个控制器，而不是在每个控制器中重新创建相同的代码来发出请求。

编辑：回答你的问题。您需要确保将服务放在控制器上的同一个“模块”上。含义。在你的HTML中，你有这样的东西。

<body ng-app="myApp">

这告诉整个身体，嵌入其中的任何东西都属于'myAPP'应用程序。那么你通常有一个类似这样的app.js文件。

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

请注意，angular.module有两个参数。你正在告诉angular创建一个名为'myApp'的新应用程序（与你的HTML一致）。

然后在您的控制器，服务，指令文件中，您将在顶部看到类似的内容。

var app = angular.module('myApp');

请注意，这只是一个参数，即应用程序的名称。你告诉角色，你不是要创建一个新的应用程序，而是“获得”你已经构建的应用程序。然后，您将在此应用程序上粘贴您的控制器，指令和服务，只要事情在同一个应用程序上，您就可以注入它们。

您评论的另一个编辑。

在教程中，他们做的有点奇怪。他们正在为每个控制器，服务等创建新的模块。这不是坏事，只是不同。这样做会让我感到困惑所以我只想把所有东西都放在一个模块下面。在本教程中，这是将所有内容粘合在一起的行。

// public/js/app.js
angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService', 'GeekCtrl', 'GeekService']);

他们有一个sampleApp，然后他们构建的所有其他模块都被注入主样本应用程序。

Answer 2

服务意味着可以从所有控制器访问，服务是构造函数，每个控制器都可以读取或写入服务，为了使用服务，您必须以这种方式调用服务：

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

app.service('sharedProperties', function() {
    var stringValue = 'test string value';
    var objectValue = {
        data: 'test object value'
    };

    return {
        getString: function() {
            return stringValue;
        },
        setString: function(value) {
            stringValue = value;
        },
        getObject: function() {
            return objectValue;
        }
    }
});

app.controller('myController1', function($scope, sharedProperties) {
    $scope.setOnController1 = function(sharedPoperties){
    $scope.stringValue = sharedProperties.getString();
    $scope.objectValue = sharedProperties.getObject().data;
    }
});

app.controller('myController2', function($scope, sharedProperties) {
    $scope.stringValue = sharedProperties.getString;
    $scope.objectValue = sharedProperties.getObject();
    $scope.setString = function(newValue) {
        $scope.objectValue.data = newValue;
        sharedProperties.setString(newValue);
    //some code to set values on screen at controller1
    };

});

这是JS FIDDLE

http://jsfiddle.net/b2fCE/228/

角度控制器和服务

2 个答案: