角度資源無法在我的代碼上工作

我正在嘗試Angularjs的$資源，但是我的程序出現錯誤，我無法弄清楚。角度資源無法在我的代碼上工作

<!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"> 
 
\t <div class="container" ng-controller="myController"> 
 
\t \t <div class="row"> 
 
\t \t \t <div> 
 
\t \t \t \t <p style="margin: 30px"></p> 
 
\t \t \t </div> 
 
\t \t \t <form ng-submit="sendform()"> 
 
\t \t \t \t <div class="form-group row"> 
 
\t \t \t \t \t <label class="col-sm-2 col-sm-offset-2 col-sm-push-6 form-control-label" for="email">Email</label> 
 
\t \t \t \t \t <div class="col-sm-6 col-sm-pull-2"> 
 
\t \t \t \t \t \t <input type="email" class="form-control" id="email" ng-model="newInfo.email"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group row"> 
 
\t \t \t \t \t <label class="col-sm-2 col-sm-offset-2 col-sm-push-6 form-control-label" for="password">Password</label> 
 
\t \t \t \t \t <div class="col-sm-6 col-sm-pull-2"> 
 
\t \t \t \t \t \t <input type="password" class="form-control" id="password" ng-model="newInfo.password"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </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> 
 
\t \t \t </form> 
 

 
\t \t </div> 
 
\t </div> 
 

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

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

 
\t \t \t $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:""}; 
 
\t \t \t } 
 
\t \t }]); 
 

 
\t </script> 
 
    </body> 
 
</html>

我有一個包含CONTACTINFO的空數組一個JSON文件。錯誤顯示

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)...

這意味着從$噴油器無法解決所需的相關錯誤的結果。要解決此問題，請確保依賴性已定義並拼寫正確。

我檢查了JavaScript的依賴關係應該沒問題，所以我不知道爲什麼。

來源

2016-04-21 Wayne Li

你是否在某處包含了angular-resource.js？見https://docs.angularjs.org/api/ngResource –

是的，你是對的，謝謝！ –

您沒有包含角度資源文件。按下面的命令

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'); 
     }])

來源

2016-04-21 02:58:21

謝謝，你的回答非常清楚。 –

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:""}; 
      } 
     }]);

。希望解決您的問題。

來源

2016-04-21 03:26:56

角度資源無法在我的代碼上工作

回答

相關問題