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

i trying learn hot invoke restful service i've implemented in jee7. using bootstrap template angular-seed , file structure in tutorial using looks bit different. can't seam figure out how $routeprovider , controller relate each other.

the file structure have , similar 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 service , controller in index.html.

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

added reference mainctrl in app.js

    'use strict';  // declare app level module depends on views, , 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 services.js file i've declared invocation of 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 root file controller.js i've declared mainctrl.

angular.module('myapp') .controller('mainctrl', function($scope, tweetfactory) {   $scope.tweets = {};     tweetfactory.query().$promise.then(function(tweets) {     $scope.tweets = tweets;   }); }); 

the json service retrieves has 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 not least, tried render result rest service in view1/view1.html.

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

i've no alter project submitted answer error related $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     @ http://localhost:8383/mobile-clear-obs/bower_components/angular/angular.js:68:12     @ http://localhost:8383/mobile-clear-obs/bower_components/angular/angular.js:4346:19     @ object.getservice [as get] (app/bower_components/angular/angular.js:4494:39)     @ http://localhost:8383/mobile-clear-obs/bower_components/angular/angular.js:4351:45     @ getservice (app/bower_components/angular/angular.js:4494:39)     @ invoke (app/bower_components/angular/angular.js:4526:13)     @ object.instantiate (app/bower_components/angular/angular.js:4543:27)     @ http://localhost:8383/mobile-clear-obs/bower_components/angular/angular.js:9395:28     @ link (app/bower_components/angular-route/angular-route.js:977:26)     @ invokelinkfn (app/bower_components/angular/angular.js:9039:9) (09:47:06:656 | error) 

how correctly injection mainctrl, can use in view1.html?

edit: alter question in response submitted. 2.

final edit got there niklas. last problem stumbled upon cross domain referencing, resulting in no 'access-control-allow-origin' header present on requested resource. if backend running on server (still localhost), have allow cross domain calls back-end. read post how solve problem in jax-rs 2.

the app.js

// declare app level module depends on views, , 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 view can access desired data {{tweets.user.screenname}}and on

to access tweetfactory have declare module tweetobsservice. rest of modules in myapp.

angular.module('myapp', [   'ngroute',     'myapp.view1',   'myapp.view2',   'myapp.version',   'tweetobsservice' //add line ]). ... 

make sure services.js included in index.html (some starter projects automatically...)