Javascript 将服务注入控制器

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

我的代码包括模块、服务和控制器，其声明/定义如下：

var myApp=angular.moduleListLogsModule，[]； myApp.factory'ListLogsFactory'，函数$http{ var thisPageNumber=1； var thisPageSize=10； var baseUrl='../Api/LogApi/GetLogsByPage'； 变量项={}； $http{ 方法：“GET”， url:baseUrl， 数据：$.param{pageNumber:thisPageNumber，pageSize:thisPageSize} } .successfunction数据、状态、标题、配置{ 项目=数据； console.logitems； } .errorfunction数据、状态、标题、配置{ 警报“错误：”+状态； }; 函数getData{ 退货项目； } }; //该错误出现在FireFox中，发生在控制器代码中： myApp.controllers.ListLogsController=函数$scope，ListLogsFactory{ $scope.logs=ListLogsFactory.getData；//注意：这一行在使用类似ListLogsFactory的内容运行时抛出错误。ListLogsFactory未定义 } 应该是

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

应该是

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

当你使用工厂时，你必须归还一些东西。您只是在那里定义了一系列方法，但它们对任何人都不可用

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

A简化：

var ListLogsModule=angular.modulemyApp，[]； 工厂'ListLogsSrv'，函数$http{ //首先定义您正在使用的工厂服务 var getData=函数{ return hey；//项； }; //然后把它还给我。 //提供一个使用内部getData的公共方法getData 返回{ getData:getData } }; ListLogsModule.controllerListLogsCtrl，函数$scope，ListLogsRV{ $scope.w=世界； $scope.logs=ListLogsSrv.getData； }; 工厂中还有一个$http请求。这意味着您将在第一次使用服务时实例化该服务时触发异步请求，因此没有人会等待它完成，您将无法定义。 如果您在控制器中使用此服务，则可能需要解析承诺

使用承诺的示例：

风险值承诺=$q.defer； var thisPageNumber=1； ... var baseUrl='../Api/LogApi/GetLogsByPage'； ... promise=$http.get。。。 现在，您可以在控制器或服务的方法中使用此承诺

两天前我回答了一个相关的问题，当你使用工厂时，你必须归还一些东西。您只是在那里定义了一系列方法，但它们对任何人都不可用

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

A简化：

var ListLogsModule=angular.modulemyApp，[]； 工厂'ListLogsSrv'，函数$http{ //首先定义您正在使用的工厂服务 var getData=函数{ return hey；//项； }; //然后把它还给我。 //提供一个使用内部getData的公共方法getData 返回{ getData:getData } }; ListLogsModule.controllerListLogsCtrl，函数$scope，ListLogsRV{ $scope.w=世界； $scope.logs=ListLogsSrv.getData； }; 工厂中还有一个$http请求。这意味着您将在第一次使用服务时实例化该服务时触发异步请求，因此没有人会等待它完成，您将无法定义。 如果您在控制器中使用此服务，则可能需要解析承诺

使用承诺的示例：

风险值承诺=$q.defer； var thisPageNumber=1； ... var baseUrl='../Api/LogApi/GetLogsByPage'； ... promise=$http.get。。。 现在，您可以在控制器或服务的方法中使用此承诺

---

两天前我回答了一个相关的问题，以下是@Eduard Gamonal提出的关于角度服务或工厂的变量/方法的建议，因此记住角度服务或工厂的语法被认为是一个技巧

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

服务与服务关键词挂钩；此关键字用于公开函数实例成员；and=对函数实例成员进行赋值

工厂和工厂是联系在一起的 关键词；return关键字生成/返回公共对象；和：所有键/值对分配

细节

服务处理变量或实例成员，为了使它们公开，我使用this关键字，因为服务处理要公开的变量或实例成员，所以在变量名后面使用=

getLogs可以像一个公共变量或实例成员一样对待，并以赋值的方式编写，就像这样。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>

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

工厂处理返回的对象并将其公开，我使用return关键字，因为工厂处理的对象看起来像JSON对象，所以我使用：在return语句{}内的每个属性名称之后

getLogs可以像返回的JSON对象的属性或键一样处理，并像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>

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

总而言之：记住服务或工厂的语法

服务与服务关键词挂钩；此关键字用于公开函数实例成员；and=对函数实例成员进行赋值

---

工厂与工厂关键字绑定；return关键字生成/返回公共对象；和：所有键/值对赋值。

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

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

服务与服务关键词挂钩；此关键字用于公开函数实例成员；and=对函数实例成员进行赋值

工厂与工厂关键字绑定；return关键字生成/返回公共对象；和：所有键/值对分配

细节

服务处理变量或实例成员，为了使它们公开，我使用this关键字，因为服务处理要公开的变量或实例成员，所以在变量名后面使用=

getLogs可以像一个公共变量或实例成员一样对待，并以赋值的方式编写，就像这样。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>

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

工厂处理返回的对象并将其公开，我使用return关键字，因为工厂处理的对象看起来像JSON对象，所以我使用：在return语句{}内的每个属性名称之后

getLogs可以像返回的JSON对象的属性或键一样处理，并像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>

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

总而言之：记住服务或工厂的语法

服务与服务关键词挂钩；此关键字用于公开函数实例成员；and=对函数实例成员进行赋值

---

工厂与工厂关键字绑定；return关键字生成/返回公共对象；和：所有键/值对作业。

感谢您的回复。我尝试使用你的替代方法，但在FireFox中仍然会遇到同样的错误。错误显示错误：ListLogsFactory未定义。有什么想法吗？@Thomas.Benz会在那里添加一个console.log以确保更新的代码已被读取ctrl+F5我相信会强制刷新您的回复。我尝试使用你的替代方法，但在FireFox中仍然会遇到同样的错误。错误显示错误：ListLogsFactory未定义。有什么想法吗？@Thomas.Benz会在那里添加一个console.log，以确保更新后的代码已被读取ctrl+F5我相信会强制刷新以获得您的答案。我应用您在服务中定义公共方法的方法，ListLogsFactory的错误“未定义”已经消失。但是，我看不到视图页面中的数据绑定。我如何在控制器中使用承诺，以便将数据绑定延迟到从远程服务器返回的数据准备就绪为止？在服务器端日志中，我确实看到调用了API RESTful方法并返回了数据。可能像这样，简单的方法是将控制器放在$routeProvider中并使用Resolve谢谢您的回答。我应用您在服务中定义公共方法的方法，ListLogsFactory的错误“未定义”已经消失。但是，我看不到视图页面中的数据绑定。我如何在控制器中使用承诺，以便将数据绑定延迟到从远程服务器返回的数据准备就绪为止？在服务器端日志中，我确实看到调用了API RESTful方法并返回了数据