Question

我是Angular的新手。我有一个简单的网页，但控制器的代码不起作用。好像我没有在控制器中正确调用或注入服务“ListLogsFactory”。请帮忙。谢谢。

我的代码包括所有声明/定义的模块，服务和控制器：

    var myApp = angular.module("ListLogsModule", []);


    myApp.factory('ListLogsFactory', function ($http) {
            var thisPageNumber = 1;
            var thisPageSize = 10;
            var baseUrl = '../Api/LogApi/GetLogsByPage';

            var items = {};

            $http({
                method: 'GET',
                url: baseUrl,
                data: $.param({ pageNumber: thisPageNumber, pageSize: thisPageSize })
            })
            .success(function (data, status, headers, config) {
                items = data;
                console.log(items);
            })
            .error(function (data, status, headers, config) {
                alert('error: ' + status);
            });

            function getData() {
                return items;
            }
    });

    // The error is seen in FireFox and happens in the controller code:
    myApp.controllers.ListLogsController = function ($scope, ListLogsFactory) {
       $scope.logs = ListLogsFactory.getData(); // NOTE: this line throws error on running with something like "ListLogsFactory" is undefined
   }

Answer 1

当您使用factory时，您必须返回一些内容。你只是在那里定义了一堆方法，但任何人都无法使用它们。

使用不同的命名约定也很好。例如，使用LogsCtrl而不是LogsController。 AngularJS在内部附加“Controller”，在异国情况下，你最终可能会处理像“LogsControllerController”这样的名字。

简化approach of using factory and returning the service：

var ListLogsModule = angular.module("myApp", []);

ListLogsModule.factory('ListLogsSrv', function ($http) {
    // first define the service (you're using a factory)
    var getData = function() {
        return "hey";//items;
    };

    // then return it.
    // offer a public method "getData" that uses your internal getData()
    return {
        getData : getData
    }
});

ListLogsModule.controller("ListLogsCtrl", function ($scope, ListLogsSrv) {
    $scope.w = "world";
    $scope.logs = ListLogsSrv.getData(); 
});

您在工厂中也有$http个请求。这意味着当您实例化服务时（第一次使用它时）您将触发异步请求，因此没有人会等待它完成，您将获得undefined。如果您在控制器中使用此服务，则可能需要resolve一个承诺。

使用承诺的一个例子：

var promise = $q.defer();
var thisPageNumber = 1;
...
var baseUrl = '../Api/LogApi/GetLogsByPage';
...
promise = $http.get(...

现在，您可以在控制器中使用此承诺，例如，或在您的服务方法中使用此承诺。

两天前我回答了一个相关问题Angular Service Definition: service or factory

Answer 2

myApp.controllers.ListLogsController = function ($scope, ListLogsFactory) {
       $scope.logs = ListLogsFactory.getData();
}

应该是

myApp.controller("ListLogsController", function ($scope, ListLogsFactory) {
       $scope.logs = ListLogsFactory.getData();
});

Answer 3

以下是@Eduard Gamonal的建议扩展到角度服务或工厂的变量/方法，因此它被认为是记住角度服务或工厂语法的技巧。

在Angular

中记住“服务”或“工厂”的语法

服务与“服务”关键字相关联; “此”关键字，使函数实例成员公开;和“ = ”来分配“函数实例成员”。

工厂与“工厂”关键字捆绑在一起; “返回”关键字以生成/返回公共对象;所有键/值对分配的“：”。

详情。

服务处理“变量”（或“实例成员”），并使其“公开”，我使用“ this “关键字，并且因为服务处理”变量“（或”实例成员“）即将公开，我们在”变量“名称后使用” = “ 。

“getLogs”可以被视为“公共变量”或“实例成员”，并写入（以“赋值”含义），如 this .getLogs = 函数（）{...}。

整个服务定义为“服务”关键字：

<script type="text/javascript">
    var myApp = angular.module("ListLogsModule", []);

    myApp.service('ListLogsService', function () {


            this.getLogs = function () {
                var logs = [
                            {"LogId":5405,"RecordedDate" : "2012-11-19T14:22:02.247", "Event" : "Log On"},
                             {"LogId":5416,"RecordedDate" : "2012-11-19T14:55:02.247", "Event" : "Log Out"}
                ];
                return logs;
            }
    });


    myApp.controller('ListLogsCtrl', function ($scope, ListLogsService) {
        $scope.logs = ListLogsService.getLogs();               
    });  

</script>

工厂处理已退回的“对象”并将其设为“公开”，我使用“返回”关键字，因为工厂处理“ object ”to-look-like-JSON-object我在“return”语句的{}内的每个“property”名称后面使用“：”

“getLogs”可以被视为返回的JSON对象的属性（或键），并且被写为（以“key / value”对形式），如getLogs ： function（）{.. }。

整个工厂的定义是“工厂”关键字：

<script type="text/javascript">
    var myApp = angular.module("ListLogsModule", []);

    myApp.factory('ListLogsFactory', function () {


            return {
                getLogs: function () {
                    return[
                                {"LogId":5405,"RecordedDate" : "2012-11-19T14:22:02.247", "Event" : "Log On"},
                                 {"LogId":5416,"RecordedDate" : "2012-11-19T14:55:02.247", "Event" : "Log Out"}
                    ];
                }
            }
    });


    myApp.controller('ListLogsCtrl', function ($scope, ListLogsFactory) {
        $scope.logs = ListLogsFactory.getLogs();
    });  

</script>

总结：在Angular中记住“服务”或“工厂”的语法

服务与“服务”关键字相关联; “此”关键字，使函数实例成员公开;和“ = ”来分配“函数实例成员”。

工厂与“工厂”关键字捆绑在一起; “返回”关键字以生成/返回公共对象;所有键/值对分配的“：”。

向控制器注入服务

3 个答案: