在从json服务器获取数据时获取$ resourse服务的错误

我正在使用$ resource服务从json服务器获取数据。它与$ http一起工作正常。下面是我的代码： app.js


          
   
    
    app.js 
 

 
    'use strict'; 
 
    angular.module('myApp', [ 
 
     'ui.router', 
 
     'ngResource', 
 
     'myApp.version' 
 
    ]) 
 
    .config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider, $stateProvider) { 
 
     $urlRouterProvider.otherwise('/viewDashboard'); 
 
     $stateProvider.state('viewDashboard', { 
 
      url: '/viewDashboard', 
 
      templateUrl: '../viewDashboard/viewDashboard.html', 
 
      controllerAs: '', 
 
      controller: '' 
 
     }); 
 
     $stateProvider.state('viewAboutus', { 
 
      url: '/viewAboutus', 
 
      templateUrl: '../viewAboutus/viewAboutus.html', 
 
      controllerAs: '', 
 
      controller: '' 
 
     }); 
 
     $stateProvider.state('viewForm', { 
 
      url: '/viewForm', 
 
      templateUrl: '../viewForm/viewForm.html', 
 
      controllerAs: 'form', 
 
      controller: 'formController' 
 
     }); 
 
     $stateProvider.state('viewReport', { 
 
      url: '/viewReport', 
 
      templateUrl: '../viewReport/viewReport.html', 
 
      controllerAs: 'report', 
 
      controller: 'reportController' 
 
     }); 
 
    }]); 
 

 

 

 
    Controller: 
 
    Report.js 
 

 
     angular.module('myApp') 
 
    .controller('reportController', function ($scope, reportCandidate) { 
 
     getRecord(); 
 
     function getRecord() { 
 
      reportCandidate.getRecord() 
 
       .success(function (response) { 
 
        $scope.candidateInfo = response; 
 
        //this.candidateInfo = response; 
 
       }) 
 
       .error(function (error) { 
 
        $scope.status = 'Unable to load candidate data: ' + error.message; 
 
       }); 
 
     } 
 
    }) 
 

 
    .factory('reportCandidate', ['$resource', function ($resource) { 
 
     var urlBase = 'http://localhost:3000/records'; 
 
     var reportCandidate = {}; 
 
     reportCandidate.getRecord = function() { 
 
      return $resource('http://localhost:3000/records', {});; 
 
     }; 
 
     return reportCandidate; 
 
    }]); 
    index.html: 
 

 

 

 
<!DOCTYPE html> 
 
    <html lang="en" ng-app="myApp" class="no-js"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <title>Merchant Demo App</title> 
 
     <meta name="description" content=""> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> 
 
     <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> 
 
     <link rel="stylesheet" type="text/css" href="lib/bootstrap.css"> 
 
     <link rel="stylesheet" href="app.css"> 
 
     <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script> 
 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 
 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 
 
     <script type="text/javascript" src="lib/jquery-3.2.0.js"></script> 
 
     <script src="lib/bootstrap.js"></script> 
 
    </head> 
 
    <body> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <a class="navbar-brand" href="/"><img src="img/logo.png"/></a> 
 
      </div> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a ui-sref="viewDashboard"><i class="fa fa-tachometer"></i>Dashboard</a></li> 
 
      <li><a ui-sref="viewAboutus"><i class="fa fa-shield"></i>AboutUs</a></li> 
 
      <li><a ui-sref="viewForm"><i class="fa fa-comment"></i>Form</a></li> 
 
      <li><a ui-sref="viewReport"><i class="fa fa-shield"></i>Report</a></li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
     <div ui-view></div> 
 
     <footer class="footer navbar-fixed-bottom text-center"> 
 
     <h5>© 1994-2017 Mastercard. Mastercard is an Equal Opportunity Employer.</h5> 
 
     </footer> 
 
    </body> 
 
     <script src="bower_components/angular/angular.js"></script> 
 
     <script src="bower_components/angular-route/angular-route.js"></script> 
 
     <script src="bower_components/angular/angular-resource.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> 
 
     <script src="app.js"></script> 
 
     <script src="viewDashboard/viewDashboard.js"></script> 
 
     <script src="viewAboutus/viewAboutus.js"></script> 
 
     <script src="viewForm/viewForm.js"></script> 
 
     <script src="viewReport/viewReport.js"></script> 
 
     <script src="components/version/version.js"></script> 
 
     <script src="components/version/version-directive.js"></script> 
 
     <script src="components/version/interpolate-filter.js"></script> 
 
    </html>

的index.html：

<!DOCTYPE html> 
<html lang="en" ng-app="myApp" class="no-js"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Merchant Demo App</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> 
    <link rel="stylesheet" type="text/css" href="lib/bootstrap.css"> 
    <link rel="stylesheet" href="app.css"> 
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 
    <script type="text/javascript" src="lib/jquery-3.2.0.js"></script> 
    <script src="lib/bootstrap.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="/"><img src="img/logo.png"/></a> 
     </div> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a ui-sref="viewDashboard"><i class="fa fa-tachometer"></i>Dashboard</a></li> 
     <li><a ui-sref="viewAboutus"><i class="fa fa-shield"></i>AboutUs</a></li> 
     <li><a ui-sref="viewForm"><i class="fa fa-comment"></i>Form</a></li> 
     <li><a ui-sref="viewReport"><i class="fa fa-shield"></i>Report</a></li> 
     </ul> 
    </div> 
    </nav> 
    <div ui-view></div> 
    <footer class="footer navbar-fixed-bottom text-center"> 
    <h5>© 1994-2017 Mastercard. Mastercard is an Equal Opportunity Employer.</h5> 
    </footer> 
</body> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="bower_components/angular/angular-resource.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> 
    <script src="app.js"></script> 
    <script src="viewDashboard/viewDashboard.js"></script> 
    <script src="viewAboutus/viewAboutus.js"></script> 
    <script src="viewForm/viewForm.js"></script> 
    <script src="viewReport/viewReport.js"></script> 
    <script src="components/version/version.js"></script> 
    <script src="components/version/version-directive.js"></script> 
    <script src="components/version/interpolate-filter.js"></script> 
</html> 


Controller: 
Report.js 

    angular.module('myApp') 
.controller('reportController', function ($scope, reportCandidate) { 
    getRecord(); 
    function getRecord() { 
     reportCandidate.getRecord() 
      .success(function (response) { 
       $scope.candidateInfo = response; 
       //this.candidateInfo = response; 
      }) 
      .error(function (error) { 
       $scope.status = 'Unable to load candidate data: ' + error.message; 
      }); 
    } 
}) 

.factory('reportCandidate', ['$resource', function ($resource) { 
    var urlBase = 'http://localhost:3000/records'; 
    var reportCandidate = {}; 
    reportCandidate.getRecord = function() { 
     return $resource('http://localhost:3000/records', {});; 
    }; 
    return reportCandidate; 
}]);

但我得到下面的错误：

Uncaught TypeError: angular.module(...).info is not a function 
    at angular-resource.js:445 
    at angular-resource.js:858 
(anonymous) @ angular-resource.js:445 
(anonymous) @ angular-resource.js:858 
angular.js:14199 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- reportCandidate 
http://errors.angularjs.org/1.5.11/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20reportCandidate 
    at http://localhost:8000/bower_components/angular/angular.js:68:12 
    at http://localhost:8000/bower_components/angular/angular.js:4563:19 
    at Object.getService [as get] (http://localhost:8000/bower_components/angular/angular.js:4716:32) 
    at http://localhost:8000/bower_components/angular/angular.js:4568:45 
    at getService (http://localhost:8000/bower_components/angular/angular.js:4716:32) 
    at injectionArgs (http://localhost:8000/bower_components/angular/angular.js:4741:58) 
    at Object.invoke (http://localhost:8000/bower_components/angular/angular.js:4763:18) 
    at Object.enforcedReturnValue [as $get] (http://localhost:8000/bower_components/angular/angular.js:4609:37) 
    at Object.invoke (http://localhost:8000/bower_components/angular/angular.js:4771:19) 
    at http://localhost:8000/bower_components/angular/angular.js:4569:37 <div ui-view="" class="ng-scope">

DNT知道是什么问题。任何人都可以帮我解决这个问题。

来源

2017-04-06 Raj

$resource服务都有自己的从服务器查询数据的方法，你需要使用query方法

reportCandidate.getRecord().query(function(results){ 
console.log(results); 
})

其实如果你的工厂改为

.factory('reportCandidate', ['$resource', function ($resource) { 

     return $resource('http://localhost:3000/records', {});; 

    }]);

并在控制器，你可以做

reportCandidate.query(function(results){ 
    console.log(results); 
})

来源

2017-04-06 07:49:26

非常感谢！它为我工作:) – Raj

Uncaught TypeError: angular.module(...).info is not a function 
    at angular-resource.js:445 
    at angular-resource.js:858

如果模块文件不匹配，通常会发生此错误，请检查angular-resource.js和angular.js是否是相同的版本（例如，两者均为1.6.1）。

来源

2017-04-06 07:49:26 Karim

它适用于我...谢谢！欢迎使用 – Raj

;） – Karim

在从json服务器获取数据时获取$ resourse服务的错误

回答

相关问题