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>

添加了对mainCtrl

中app.js的引用

    '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",
       ...

但是并非最不重要，我试图在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.如果您的后端在另一台服务器（仍然是localhost）上运行，则必须允许对您的后端进行跨域调用。阅读此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中（某些启动项目会自动执行...）

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

1 个答案: