1

我是 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
   }
4

3 回答 3

3

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

使用不同的命名约定也很好。例如，使用 LogsCtrl 代替 LogsController。AngularJS 在内部附加了“Controller”，在特殊情况下，您最终可能会处理“LogsControllerController”之类的名称。

使用工厂和返回服务的简化方法：

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承诺。

使用 Promise 的示例：

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

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

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

于 2013-07-10T07:03:33.763 回答
1

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

在 Angular 中记住“服务”或“工厂”语法的技巧

服务与“服务”关键词绑定；“ this ”关键字使函数实例成员公开；和“ = ”对“函数实例成员”进行赋值。

工厂系上“工厂”关键词；“ return ”关键字制作/返回一个公共对象；和“ : ”到所有键/值对分配。

细节。

服务处理“变量”（或“实例成员”），为了使它们“公开”，我使用“ this ”关键字，因为服务处理“变量”（或“实例成员”）成为- public 我们在“变量”名称之后使用“ = ”。

“getLogs”可以被视为一个“公共变量”或“实例成员”，并且写成（在“赋值”的意思中）像这样.getLogs = function() {...}。

而整个服务是用“服务”关键字定义的：

<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>

工厂处理返回的“对象”并使它们“公开”，我使用“ return ”关键字，因为工厂处理“对象”以看起来像 JSON 对象，所以我在每个“之后”使用“ : ” “return”语句的 {} 中的属性”名称。

“getLogs”可以被视为返回的 JSON 对象的属性（或键），并且可以像 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 中“服务”或“工厂”的语法

服务与“服务”关键词绑定；“ this ”关键字使函数实例成员公开；和“ = ”对“函数实例成员”进行赋值。

工厂系上“工厂”关键词；“ return ”关键字制作/返回一个公共对象；和“ : ”到所有键/值对分配。

于 2013-07-10T19:14:20.793 回答
1 
myApp.controllers.ListLogsController = function ($scope, ListLogsFactory) {
       $scope.logs = ListLogsFactory.getData();
}

应该

myApp.controller("ListLogsController", function ($scope, ListLogsFactory) {
       $scope.logs = ListLogsFactory.getData();
});
于 2013-07-09T21:14:14.707 回答