2016-04-21 19 views
0

Я пытаюсь использовать $ resource 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>

У меня есть файл в формате 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)... 

что означает, что ошибочные результаты от $ инжектора будучи не в состоянии решить требуемую зависимость. Чтобы исправить это, убедитесь, что зависимость определена и написана правильно.

Я проверил, что зависимости для javascript должны быть в порядке, поэтому я не знаю почему.

+0

Вы включаете в себя angular-resource.js где-нибудь? См. Https://docs.angularjs.org/api/ngResource –

+0

Да, вы правильно благодарите! –

ответ

0

Вы не указали файл с угловым ресурсом. т.е.

Установите его дачей в соответствии со следующей командой

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

Спасибо, ваш ответ действительно ясен. –

0

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> 

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

Надеется, что решить вашу проблему.

Смежные вопросы