1
我想要做的是：我的服務只返回一個json對象數組。我的控制器接收並顯示在一個表格中。無法將服務注入控制器
我用這GitHub的代碼爲出發點：https://github.com/IgorMinar/foodme
我不能在下面的代碼注入服務到控制器，並且得到錯誤：
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">
文件結構（大部分文件夾的是空）：
的index.html（主要引導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'
})
});
控制器/ newWeekCtrl：
'user strict';
totoApp.controller('NewWeekCtrl', ['$scope', 'NewWeekService', function($scope, NewWeekService) {
console.log(NewWeekService);
$scope.newWeekList = NewWeekService;
}]);
服務/ 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;
}]);
的意見/新周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"
}
}
編輯：修正了錯誤的名稱navBarController index.html中
' '用戶嚴格';'應該是''使用嚴格';'你在'resource'上也缺少'$'，它應該是'$ resource'。但是，請確保您不會像在視圖模板和路由器中那樣分配兩次'newWeekCtrl' .. – choz