Question

我要做的是：我的服务只返回一个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（主要是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'
    })
});

控制器/ 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"
  }
}

编辑：修复了index.html

中错误的名称navBarController

Answer 1

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

应该是

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

您在投影机参数数组中缺少$上的resource。

同时添加

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

行后

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

Answer 2

您需要从工厂中删除$资源

'use strict'; var mockData = [{"fieldA": "a1", "fieldB": "b1", "fieldC" : "c1", "fieldD" : "d1"}, {"fieldA": "a2", "fieldB": "b2", "fieldC" : "c2", "fieldD" : "d2"}]; totoApp.factory('NewWeekService',

 function() { //return $resource('/api/restaurant/:id', {id: '@id'}); return mockData; }]);

无法将服务注入控制器

2 个答案: