Question

我正在使用$ 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：

    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>

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

Answer 1

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）。

Answer 2

$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);
 })

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

2 个答案: