Question

我正在尝试使用Angularjs开发一个Web应用程序，我可以成功实现ui-router框架，并且模板和控制器正确加载，但是，然后，控制器调用服务并且当我和＃时39;我得到一个我无法摆脱的错误（https: //docs.angularjs.org/error/$injector/unpr?p0=HomeServiceProvider%20%3C-%20HomeService%20%3C-%20HomeController）。我按以下顺序导入js文件：

1服务 2控制器 3主要应用

此处你还有一个image（代码在点击状态后），带有html代码。 js文件如下：

家庭app.js

'use strict';

angular.module("home", ['ui.router', 'home.controllers'])

    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){

        $stateProvider
                .state('introduccion', {
                    url : "/",
                    templateUrl : "resources/js/home/views/introduccion.html",
                    controller : "HomeController"
                })
}]);

家庭service.js

'use strict';

angular.module('home.services',['ngResource'])

    .factory('HomeService', ['$http', '$q', function($http, $q){

        return {

            prueba: function() {
                return $http.get('http://localhost:8081/home/prueba').then(

                    function(response){
                        return response.data;
                    }, 

                    function(errResponse){
                        console.error('Error while prueba');
                        return $q.reject(errResponse);
                    }
                );
            }
        };
    }]);

家庭controller.js

'use strict';

angular.module("home.controllers", [])

    .controller('HomeController', ['$scope', 'HomeService', function($scope, HomeService) {
              var self = this;
              self.text = null;

              self.prueba = function(){
                  HomeService.prueba().then(



                   function(data) {
                        self.text = data;
                   },

                   function(errResponse){
                        console.error('Error while Prueba');
                   }
              );
          };
}]);

欢迎所有帮助！感谢

编辑我按照建议更改了通过home.service的家庭应用程序，并且我也尝试将它放在家庭控制器上，但在这两种情况下我都得到了相同的错误：由于以下原因无法实例化模块主页：

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=h...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:134
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:391
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222)
at bb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:246)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:21:19

Error message

我还创建了一个jsfiddle：https://jsfiddle.net/txominsirera/0s2d2zyr/

编辑我发现了一些有趣的东西，我用虚拟服务替换了服务js，没有ngResource依赖，我没有错误！

Answer 1

在home-app.js中添加模块home.services，如：

angular.module("home", ['ui.router', 'home.controllers'])

而不是：

<div class="card_grid widget uib_w_33 wrapping-col d-margins flex-basis-33" data-uib="layout/card_grid" data-ver="0">
      <div class="widget widget-container content-area vertical-col uib-card uib_w_34 section-dimension-34 cpad-0" data-uib="layout/card" data-ver="0">
        <h4 class="card-tittle">{{testing(Room)}}</h4>  
            <div class="list-group widget uib_w_38 d-margins" data-uib="twitter%20bootstrap/list_group" data-ver="1">
              <a class="list-group-item allow-badge widget uib_w_39" data-uib="twitter%20bootstrap/list_item" data-ver="1">
                <p class="list-group-item-text">bed</p>
              </a>
              <a class="list-group-item allow-badge widget uib_w_40" data-uib="twitter%20bootstrap/list_item" data-ver="1">
                <p class="list-group-item-text">Stove</p>
              </a>
              <a class="list-group-item allow-badge widget uib_w_41" data-uib="twitter%20bootstrap/list_item" data-ver="1">
                <p class="list-group-item-text">Tap</p>
              </a>
            </div>

      </div>

Answer 2

您需要在应用中下载angular-resource文件，以便在ngResource模块中注入home.services作为依赖项。需要在角度工厂/服务中使用$resource作为依赖项。由于我发现您未在$resource模块中使用home.services，因此可以删除ngResource作为模块依赖项。

然后，将控制器写为angular.module("home.controllers", ['home.services'])。您需要在控制器模块中注入服务模块。

查看此工作Plunker

尝试将服务链接到控制器

2 个答案: