Angular 资源不适用于我的代码

Question

我正在尝试Angularjs的$resource，但是我的程序有错误，我无法弄明白。

<!DOCTYPE html>
<html>
<!--Login form validate, send to server, get from server-->
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <script src="bower_components/angular/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
 <div class="container" ng-controller="myController">
  <div class="row">
   <div>
    <p style="margin: 30px"></p>
   </div>
   <form ng-submit="sendform()">
    <div class="form-group row">
     <label class="col-sm-2 col-sm-offset-2 col-sm-push-6 form-control-label" for="email">Email</label>
     <div class="col-sm-6 col-sm-pull-2">
      <input type="email" class="form-control" id="email" ng-model="newInfo.email">
     </div>
    </div>
    <div class="form-group row">
     <label class="col-sm-2 col-sm-offset-2 col-sm-push-6 form-control-label" for="password">Password</label>
     <div class="col-sm-6 col-sm-pull-2">
      <input type="password" class="form-control" id="password" ng-model="newInfo.password">
     </div>
    </div>
              <div class="form-group row">
                <label class="col-sm-2 col-sm-offset-2 col-sm-push-6 form-control-label">How do you know us</label>
                <div class="col-sm-6 col-sm-pull-2">
                  <div class="radio" ng-repeat="source in knowSources">
                    <label>
                      <input type="radio" name="{{source}}" ng-model="newInfo.method" ng-value="source" id="{{source}}">
                      {{source}}
                    </label>
                  </div>
                </div>
              </div>
                <div class="form-group row">
                    <div class="col-sm-6 col-sm-push-2">
                        <button type="submit" class="btn btn-primary">Send information</button>
                    </div>
                </div>
   </form>

  </div>
 </div>

 <script type="text/javascript">
  angular.module("myApp",[])
  .factory('resourceEntry',["$resource",function ($resource) {
   return $resource('http://localhost:3000/contactInfo/:id');
  }])

  .controller("myController",["$scope","$log","resourceEntry",function ($scope,$log,resourceEntry) {
            //the update object
            $scope.newInfo = {email:"",password:"",method:""};
   $scope.knowSources = ["Internet","Friends","Television","Others"];
            //the form array
   $scope.contactInfo = [];

   $scope.sendform = function(){
                $scope.newInfo.email = this.newInfo.email;
                $log.info("newInfo.email: " + $scope.newInfo.email + "; tpye: " + typeof $scope.newInfo.email);
                $scope.newInfo.password = this.newInfo.password;
                $log.info("newInfo.password: " + $scope.newInfo.password + "; tpye: " + typeof $scope.newInfo.password);
                $scope.newInfo.method = this.newInfo.method;
                $scope.contactInfo.push($scope.newInfo);
                $log.info("$scope.contactInfo(array): " + $scope.contactInfo[0]);
                resourceEntry.save($scope.newInfo);
                $scope.newInfo = {email:"",password:"",method:""};
   }
  }]);

 </script>
  </body>
</html>

我有一个 JSON 文件，其中包含一个空的 contactInfo 数组。错误显示

angular.js:13424Error: [$injector:unpr]
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20resourceEntry
at Error (native)...

这意味着错误是由于 $injector 无法解析所需的依赖项而导致的。要解决此问题，请确保依赖项的定义和拼写正确。

我已经检查过 javascript 的依赖项应该没问题，所以我不知道为什么。

Answer 1

您没有包含 angular-资源文件。即

根据以下命令通过bower安装

bower install angular-resource --save

然后包括

<script src="assets/bower_components/angular-resource/angular-resource.js"></script>

并且不要忘记在您的应用中注入 ngResource

angular.module("myApp",['ngResource'])
        .factory('resourceEntry',["$resource",function ($resource) {
            return $resource('http://localhost:3000/contactInfo/:id');
        }])

Answer 2

Working Demo

添加angular-resource.min.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.7/angular-resource.min.js"></script>

注入ngResource

angular.module("myApp",['ngResource'])
        .factory('resourceEntry',["$resource",function ($resource) {
            return $resource('http://localhost:3000/contactInfo/:id');
        }])

        .controller("myController",["$scope","$log","resourceEntry",function ($scope,$log,resourceEntry) {
            //the update object
            $scope.newInfo = {email:"",password:"",method:""};
            $scope.knowSources = ["Internet","Friends","Television","Others"];
            //the form array
            $scope.contactInfo = [];

            $scope.sendform = function(){
                $scope.newInfo.email = this.newInfo.email;
                $log.info("newInfo.email: " + $scope.newInfo.email + "; tpye: " + typeof $scope.newInfo.email);
                $scope.newInfo.password = this.newInfo.password;
                $log.info("newInfo.password: " + $scope.newInfo.password + "; tpye: " + typeof $scope.newInfo.password);
                $scope.newInfo.method = this.newInfo.method;
                $scope.contactInfo.push($scope.newInfo);
                $log.info("$scope.contactInfo(array): " + $scope.contactInfo[0]);
                resourceEntry.save($scope.newInfo);
                $scope.newInfo = {email:"",password:"",method:""};
            }
        }]);

希望能解决您的问题。

Angular 资源不适用于我的代码

Angular resource does not work on my code

javascript

angularjs

angular-resource