brainmassage brainmassage - 29 days ago 11
AngularJS Question

Cannot inject service into controller

What I am trying to do is: My service only returns a json object array. My controller takes it and displays in a table.

I am using this github code as a starting point: https://github.com/IgorMinar/foodme

I cannot inject service into the controller at below code, and get the error:

angular.js:13920 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=resourceProvider%20%3C-%20resource%20%3C-%20NewWeekService
at http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:6:412
at http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:43:174
at Object.d [as get] (http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:40:432)
at http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:43:236
at d (http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:40:432)
at e (http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:41:158)
at Object.invoke (http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:41:243)
at Object.$get (http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:39:142)
at Object.invoke (http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:41:456)
at http://localhost:63342/TotoApp/node_modules/angular/angular.min.js:43:265 <ng-view class="ng-scope">


File structure (Most of folders are empty):

enter image description here

index.html (Mostly bootstrap nav html)

<!DOCTYPE html>
<html lang="en" ng-app="TotoApp">
<head>
<meta charset="UTF-8">
<title>Toto App</title>

<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-route/angular-route.min.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../node_modules/angular-smart-table/dist/smart-table.min.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers/navBarCtrl.js"></script>
<script src="js/controllers/newWeekCtrl.js"></script>
<script src="js/services/NewWeekService.js"></script>

<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"></head>
<body>
<nav class="navbar navbar-default" ng-controller="NavBarCtrl">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Toto App</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="{active: routeIs('/')}"><a href="#/">New Week <span class="sr-only">(current)</span></a></li>
<li ng-class="{active: routeIs('/last-week')}"><a href="#/last-week">Last Week</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<ng-view></ng-view>
</body>
</html>


app.js:

'user strict';

var totoApp = angular.module('TotoApp', ['ngRoute']);

totoApp.config(function ($routeProvider) {
$routeProvider.
when('/', {
controller: 'NewWeekCtrl',
templateUrl: 'views/new-week.html'
})
});


controllers/newWeekCtrl:

'user strict';

totoApp.controller('NewWeekCtrl', ['$scope', 'NewWeekService', function($scope, NewWeekService) {
console.log(NewWeekService);
$scope.newWeekList = NewWeekService;
}]);


services/NewWeekService:

'use strict';

var mockData = [{"fieldA": "a1", "fieldB": "b1", "fieldC" : "c1", "fieldD" : "d1"}, {"fieldA": "a2", "fieldB": "b2", "fieldC" : "c2", "fieldD" : "d2"}];

totoApp.factory('NewWeekService', ['resource', function($resource) {
//return $resource('/api/restaurant/:id', {id: '@id'});
return mockData;
}]);


views/new-week-html:

<div>
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in newWeekList">
<td>{{row.fieldA}}</td>
<td>{{row.fieldB}}</td>
<td>{{row.fieldC}}</td>
<td>{{row.fieldD}}</td>
</tr>
</tbody>
</table>
</div>


package.json:

{
"name": "toto-app",
"version": "0.0.1",
"devDependencies": {
"angular": "^1.5.8",
"angular-resource": "^1.5.8",
"angular-route": "^1.5.8",
"angular-smart-table": "^2.1.8",
"bootstrap": "^3.3.7",
"jquery": "^3.1.1"
}
}


Edit: Fixed wrong name navBarController in index.html

Answer
totoApp.factory('NewWeekService', ['resource', function($resource) {

should be

totoApp.factory('NewWeekService', ['$resource', function($resource) {

You are missing the $ on resource in the injector arguments array.

Also add

<script src="../node_modules/angular-resource/angular-resource.min.js"></script>

After line

<script src="../node_modules/angular-route/angular-route.min.js"></script>
Comments