How to load REST resources in Angular-Seed bootstrap project from a JEE7 back-end

Question

I am trying to learn hot to invoke a RESTful service that I've implemented in JEE7. I am using the bootstrap template Angular-Seed and the file structure in the tutorial I am using looks a bit different. What I can't seam to figure out is how the $routeProvider and controller relate to each other.

The file structure I have look like this and is similar to the current Angular-Seed structure.

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

Include the service and the controller in the index.html.

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

Added reference to the mainCtrl in 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'
            })
}]);

In the services.js file I've declared the invocation of the RESTful service.

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}
    });
});

In the root file controller.js I've declared the mainCtrl.

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

The JSON that the service retrieves has the following structure.

[
  {
    "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 but not least, I tried to render result from the REST service in the view1/view1.html.

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

I've no alter the project thanks to submitted answer but I get an error related to the $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)

How do I correctly injection my mainCtrl, so I can use it in view1.html?

EDIT: Alter the question in response to the submitted. 2.

FINAL EDIT I finally got there with help from niklas. The last problem I stumbled upon is cross domain referencing, resulting in No 'Access-Control-Allow-Origin' header is present on the requested resource. If your backend is running on another server (still localhost), you have to allow cross domain calls to your back-end. Read this post how to solve this problem in JAX-RS 2.

score 1 · Accepted Answer · edited Feb 08 '16 at 16:02

The 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'
            })
}]);

The controllers.js

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

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

For the view you can then access your desired data like {{tweets.user.screenName}}and so on

To access the tweetFactory you have to declare the module tweetObsService. with the rest of the modules in myApp.

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

Make sure your services.js is included in your index.html (some starter projects do it automatically...)

Didn't have time during the weekend to try your solution. Updated the question according to you answer. But it seams that I am missing reference to my controller somehow? — Chris, Feb 08 '16 at 09:04

How to load REST resources in Angular-Seed bootstrap project from a JEE7 back-end

1 Answers1