如何从 JEE7 后端加载 Angular-Seed 引导项目中的 REST 资源

Question

我正在尝试学习如何调用我在 JEE7 中实现的 RESTful 服务。我使用的是引导模板Angular-Seed，我使用的教程中的文件结构看起来有点不同。我无法弄清楚的是$routeProvider 和控制器是如何相互关联的。

我的文件结构是这样的，与当前的 Angular-Seed 结构相似。

app/                    
    bower_components/  
    components/           
    view1/                
            view1.html          
            view1.js            
            view1_test.js       
    view2/                
            view2.html          
            view2.js            
            view2_test.js
    app.css 
    app.js
    controller.js
    service.js
    index.html            
    index-async.html      

在index.html 中包含服务和控制器。

<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="services.js"></script>
<script src="controller.js"></script>

在app.js 中添加了对mainCtrl 的引用

    'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',  
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
]).
config(['$routeProvider',
function ($routeProvider) {
    $routeProvider.
            when('/view1', {
                templateUrl: 'view1/view1.html',
                controller: 'mainCtrl'
            })
}]);

在 services.js 文件中，我声明了 RESTful 服务的调用。

var tweetObsService = angular.module('tweetObsService', ['ngResource']);

tweetObsService.factory('tweetFactory', function($resource){
    return $resource('http://localhost:8080/bongo-obs/rest/tweets/findAll', {}, {
        query: {
            method:'GET',
            params: {},
            isArray:true}
    });
});

在根文件controller.js我已经声明了mainCtrl。

angular.module('myApp')
.controller('mainCtrl', function($scope, tweetFactory) {
  $scope.tweets = {};  
  tweetFactory.query().$promise.then(function(tweets) {
    $scope.tweets = tweets;
  });
});

服务检索的 JSON 具有以下结构。

[
  {
    "id": {
      "timestamp": 1454579718,
      "machineIdentifier": 12550416,
      "processIdentifier": 6912,
      "counter": 6510561,
      "time": 1454579718000,
      "date": 1454579718000,
      "timeSecond": 1454579718
    },
    "userId": 0,
    "status": null,
    "user": {
      "id": 291655833,
      "name": "Anders Anderson",
      "screenName": "Superuser",
      "location": "Sweden",
       ...

Lats 但同样重要的是，我尝试在 view1/view1.html 中呈现来自 REST 服务的结果。

<table>
    <tr ng-repeat="tweet in tweets">
        <td>{{tweet.user.screenName}}</td>
    </tr>
</table>

由于提交的答案，我没有更改项目，但我收到与 $injector 相关的错误

Error: [$injector:unpr] Unknown provider: tweetFactoryProvider <- tweetFactory <- mainCtrl
http://errors.angularjs.org/1.4.9/$injector/unpr?p0=tweetFactoryProvider%20%3C-%20tweetFactory%20%3C-%20mainCtrl
    at http://localhost:8383/mobile-clear-obs/bower_components/angular/angular.js:68:12
    at http://localhost:8383/mobile-clear-obs/bower_components/angular/angular.js:4346:19
    at Object.getService [as get] (app/bower_components/angular/angular.js:4494:39)
    at http://localhost:8383/mobile-clear-obs/bower_components/angular/angular.js:4351:45
    at getService (app/bower_components/angular/angular.js:4494:39)
    at invoke (app/bower_components/angular/angular.js:4526:13)
    at Object.instantiate (app/bower_components/angular/angular.js:4543:27)
    at http://localhost:8383/mobile-clear-obs/bower_components/angular/angular.js:9395:28
    at link (app/bower_components/angular-route/angular-route.js:977:26)
    at invokeLinkFn (app/bower_components/angular/angular.js:9039:9) (09:47:06:656 | error)

如何正确注入我的 mainCtrl，以便在view1.html 中使用它？

编辑：根据提交的内容更改问题。 2.

最终编辑我终于在niklas 的帮助下到达了那里。我偶然发现的最后一个问题是跨域引用，导致No 'Access-Control-Allow-Origin' header is present on the requested resource. 如果您的后端在另一台服务器上运行（仍然是本地主机），则必须允许对后端进行跨域调用。阅读此post how to solve this problem in JAX-RS 2。

Answer 1

app.js

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',  
  'myApp.view1',
  'myApp.view2',
  'myApp.version',
  'tweetObsService'
]).
config(['$routeProvider',
function ($routeProvider) {
    $routeProvider.
            when('/view1', {
                templateUrl: 'view1/view1.html',
                controller: 'mainCtrl'
            })
}]);

controllers.js

angular.module('myApp')
.controller('YourView1Controller', function($scope, tweetFactory) {
  $scope.tweets = {};

  tweetFactory.query().$promise.then(function(tweets) {
    $scope.tweets = tweets;
  }
}

对于视图，您可以访问所需的数据，例如 {{tweets.user.screenName}}等等

要访问 tweetFactory，您必须声明模块 tweetObsService。 myApp 中的其余模块。

angular.module('myApp', [
  'ngRoute',  
  'myApp.view1',
  'myApp.view2',
  'myApp.version',
  'tweetObsService' //add this line
]). ...

确保您的 services.js 包含在您的 index.html 中（一些启动项目会自动执行...）