AngularJS 服务进入控制器答案

【问题标题】：AngularJS Service into ControllerAngularJS 服务进入控制器
【发布时间】：2015-11-11 01:35:56
【问题描述】：

我有以下代码抛出错误：我的控制器代码：

App.controller('SelectCustomerController',
    function SelectCustomerController($scope, $location, $resource, customerService) 
    { //DO STUFF}
});

我注入了一个服务，它看起来像：

App.factory('customerService', ['$resource', function ($resource) {
    return $resource('api/customerAPI')
}]);

Service 对我的 MVC webapi Get 方法进行了安静的调用。我的应用模块如下：

var tmPromise, App = angular.module('App', ['ngRoute', 'ui.bootstrap', 'angularUtils.directives.dirPagination', 'ngAnimate', 'ngResource'], function () {

});

还有我调用 Bundle 文件的布局：

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/m")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body style="background-color:x#383838;">
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>

        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/services")
    @Scripts.Render("~/bundles/controllers")  
    @Scripts.Render("~/bundles/pagination")
    @RenderSection("scripts", required: false)
</body>
</html>

服务被添加到服务包的布局中。

我从重新安排脚本调用 etgc 的位置所做的一切尝试都会产生一个新错误。这个产生：

错误：[ng:areq] 参数 'SelectCustomerController' 不是函数，得到字符串

我想将我的服务注入到我的控制器中，所以我可以调用我的 webapi 来获取 JSON 并将其绑定到我的 $scope.list 以显示。更多页面也将使用我的 webAPI 做类似的事情，但由于某种原因，我似乎无法在我当前的实现中掌握 AngularJS 依赖注入。

那么这里的问题是什么？我忽略了一些简单的事情？如果您需要更多信息，请告诉我并更新问题。

更新：1)

Praveen Singh 给出了消除错误的答案，但是由于我声明控制器及其依赖项的新方式，我的控制器逻辑中现在发生了一个新错误：

$scope.$watch("currentPage + numPerPage", function () {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
});

这个功能是我列表中分页的一部分，错误是：

$scope.$watch 不是函数

【问题讨论】：

当你打包时，你也会缩小吗？因为控制器不是缩小安全的。
不点头缩小。但是感谢您提供的信息，请记住这一点
请尽量将您的问题限制在每个帖子一个。如果有人现在发布一个新答案来解决您的更新问题，哪个答案更正确？解决第一个问题的那个，还是解决第二个问题的那个？此外，针对一个问题的不同部分的多个答案会令其他可能在未来遇到类似问题的人感到困惑。
另外，您的更新具有误导性。 code 是 $scope.$watch，但 error 是 $scope.watch，这不是一回事。
好吧，提供的答案消除了一个错误，但是创建了一个新错误（常见情况），由于我的代码或新更改的天气是对我的问题的更新，它仍然适合关于我的 Service into Controller 的问题，现在我们更接近解决方案，因为它似乎围绕着控制器的实际实现方式，这是问题的根源。

标签： c# angularjs asp.net-web-api ngresource

【解决方案1】：

尝试像这样声明你的控制器：

App.controller('SelectCustomerController',
    ['$scope', '$location', '$resource', 'customerService',
    function($scope, $location, $resource, customerService) {
}]);

【讨论】：

似乎已经解决了这个问题，尽管我不得不对控制器中的逻辑进行一些更改以进行补偿。我原来的声明有什么问题？到目前为止工作正常
我更新了我的问题，新的声明方式破坏了我的控制器逻辑
你能在这里嵌入代码sn-p吗？或者也许添加一个 jsfiddle/plunkr？调试起来会更容易。

【解决方案2】：

下面是控制器（myController）的代码，我们在其中将服务依赖项添加为 myService。要在某些参数上添加监视，请记住将 $scope 添加为依赖项。在下面的控制器中，我们在 watchString 上添加了监视。就我而言，我正在关注下拉值。在我的情况下，该服务正在调用另一个服务以进行 api 调用，这在我的应用程序中很常见。

(function () {
    var module = angular.module('myModule', [
        'dependant-module-1',
        'dependant-module-2'
    ]);

    module.controller('myController', [
    '$scope', 'myService',
    function ($scope, myService) {

        myService.getData($scope);

        $scope.$watch('watchString', function (newValue, oldValue) {
            //Logic on watch
        });
    }
    ]);

    module.service('myService', [
    'serverDataHelper'
    function (serverDataHelper) {
        this.getData = function ($scope) {
            var params = {
                param1: 1,
                param2: 2
            };
            var myDataPromise = serverDataHelper.getData('api end point', params);

            myDataPromise.then(function (serverResponse) {
                if (serverResponse.data != null) {
                    $scope.myData = serverResponse.data;
                } else {
                    $scope.myData = null;
                }
            });

            //OR
            return myDataPromise;
        };
    }]);

})();

您可以从服务返回承诺，也可以将范围对象作为参数传递并将响应数据分配给范围。

如果您需要进一步的帮助，请告诉我。

【讨论】：