ngResource is failing to load

Question

I'm using ngResource with http to call the rest webservice that I made for the crud and I get this error http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…0yc%20(http%3A%2F%2Flocalhost%3A8088%2Fangular%2Fangular.min.js%3A20%3A274)

I put the angular js script reference properly but it's not working this is my code:

var app = angular.module('myApp', ['ngResource']);

app.controller('StadeController', ['$scope', '$resource',function($scope,$resource) {
    
    function fetchAllStades(){
        $scope.stades = $resource('http://localhost:8088/stades'
        ).query(function(data){return data;});
    };
    fetchAllStades();
    
    $scope.refresh = function(){
     fetchAllStades();
    };
    
    $scope.create = function(){
     Stade = $resource(
          "http://localhost:8088/stades",
          {},
          {save: {method:'POST',isArray:false}}
     );
     
     var stade = {};
  
     stade.id = $scope.stadeForm.id;
     stade.name = $scope.stadeForm.description;
     stade.phoneNo = $scope.stadeForm.checked;
  
  $scope.Message = Stade.save(stade);
    
  $scope.stadeForm.id = "";
  $scope.stadeForm.description="";
  $scope.stadeForm.checked="";
    };
    
    $scope.deleteRec = function(){
     Stade = $resource(
          "http://localhost:8088/stades/:id",
          {},
          {save: {method:'DELETE', params: {id: '@id'}}}
     );
     
   
  Stade.delete({id: $scope.stadeForm.id}).then(function successCallback(response) {
   $scope.Message = response;
  }, function errorCallback(response) {
      
  });
    
  $scope.stadeForm.id = "";
  $scope.stadeForm.description="";
  $scope.stadeForm.checked="";
    };
    
    
    $scope.update = function(){
      
     Stade = $resource(
          "http://localhost:8088/stades/:id",
          {},
          {save: {method:'PUT', params: {id: '@id'}}}
     );
     
  var stade = {};
  
  stade.id = $scope.stadeForm.id;
  stade.description = $scope.stadeForm.description;
  stade.checked = $scope.stadeForm.checked;
  
  $scope.Message = Stade.save({id: $scope.stadeForm.id}, stade);
    
  $scope.stadeForm.id = "";
  $scope.stadeForm.description="";
  $scope.stadeForm.checked="";
    };
    
}]);

<!DOCTYPE html>
<html lang="en">  
 <body ng-app="myApp">
 <div ng-controller="StadeController">
 <form name="stadeForm" >
 
  <table class="table stripped">
       <thead><tr><th>ID </th> <th>checked</th> <th>description</th></tr></thead>
       <tbody><tr ng-repeat="row in stades">
          <td><span ng-bind="row.id"></span></td>
          <td><span ng-bind="row.description"></span></td>
          <td><span ng-bind="row.checked"></span></td>
          <td>
    </tr> </tbody>
 </table>
 <p class="bg-info info-msg" id="info1">{{Message}}</p>
 <div class="form-group" >
        <label class=blue_font>description</label>
        <input class=form-control type="text" id="description" ng-model="stadeForm.description" placeholder="description">
    </div>
    
    <div class="form-group" >
        <label class=blue_font>checked</label>
        <input class=form-control type="text" id="checked" ng-model="stadeForm.checked" placeholder="checked">
    </div>

 
 <div class="btn-wrapper">
  <div class="row-gutter-5">
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="create()" id="Create" >Create</button>
    </div>
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="refresh()" id="refresh">Refresh</button>
    </div>
  </div>
</div>
 
 <div class="form-group" >
        <label class=blue_font>ID</label>
        <input class=form-control type="text" id="ID" ng-model="stadeForm.id" placeholder="ID">
    </div>      
  <div class="btn-wrapper">
  <div class="row-gutter-5">
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="deleteRec()" id="Delete" >Delete</button>
    </div>
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="update()" id="Update">Update</button>
    </div>
    </div>
</div>     
       
 </form>
 </div>
 <script src="angular/angular.min.js"></script>
 <script src="angular/angular-resource.min.js"></script>
 <script src=app/app.js"></script>
 <link rel="stylesheet" href="bootsrap/style.css"> 
 <link rel="stylesheet" href="bootsrap/theme-default.css">
 <link rel="stylesheet" href="bootsrap/theme-blue.css">
 <link rel="stylesheet" href="bootsrap/bootstrap.min.css">
 <link rel="stylesheet" href="bootsrap/custom.css">
 </body>
</html>

I don't know why it's not working and I saw the previous posts that have problems like mine but it didn't work

use non minified angular and find out the exact error using the html link in console — harishr, Apr 10 '17 at 10:07
I have added 2 script tag for reference.now check with your api. see also if there is any error in console.(by hitting F12) — Ajay Singh, Apr 10 '17 at 10:17
I already have two script tags at the bottom but I moved it to the top hoping it will work but it's not working — oui oui, Apr 10 '17 at 10:28
index.html:61 GET http://localhost:8088/app/app.js%22 404 () angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…0yc%20(http%3A%2F%2Flocalhost%3A8088%2Fangular%2Fangular.min.js%3A20%3A274) — oui oui, Apr 10 '17 at 10:42

score 0 · Answer 1 · answered Apr 10 '17 at 10:14

var app = angular.module('myApp', ['ngResource']);

app.controller('StadeController', ['$scope', '$resource',function($scope,$resource) {
    
    function fetchAllStades(){
        $scope.stades = $resource('http://localhost:8088/stades'
        ).query(function(data){return data;});
    };
    fetchAllStades();
    
    $scope.refresh = function(){
     fetchAllStades();
    };
    
    $scope.create = function(){
     Stade = $resource(
          "http://localhost:8088/stades",
          {},
          {save: {method:'POST',isArray:false}}
     );
     
     var stade = {};
  
     stade.id = $scope.stadeForm.id;
     stade.name = $scope.stadeForm.description;
     stade.phoneNo = $scope.stadeForm.checked;
  
  $scope.Message = Stade.save(stade);
    
  $scope.stadeForm.id = "";
  $scope.stadeForm.description="";
  $scope.stadeForm.checked="";
    };
    
    $scope.deleteRec = function(){
     Stade = $resource(
          "http://localhost:8088/stades/:id",
          {},
          {save: {method:'DELETE', params: {id: '@id'}}}
     );
     
   
  Stade.delete({id: $scope.stadeForm.id}).then(function successCallback(response) {
   $scope.Message = response;
  }, function errorCallback(response) {
      
  });
    
  $scope.stadeForm.id = "";
  $scope.stadeForm.description="";
  $scope.stadeForm.checked="";
    };
    
    
    $scope.update = function(){
      
     Stade = $resource(
          "http://localhost:8088/stades/:id",
          {},
          {save: {method:'PUT', params: {id: '@id'}}}
     );
     
  var stade = {};
  
  stade.id = $scope.stadeForm.id;
  stade.description = $scope.stadeForm.description;
  stade.checked = $scope.stadeForm.checked;
  
  $scope.Message = Stade.save({id: $scope.stadeForm.id}, stade);
    
  $scope.stadeForm.id = "";
  $scope.stadeForm.description="";
  $scope.stadeForm.checked="";
    };
    
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>

<!DOCTYPE html>
<html lang="en">  
 <body ng-app="myApp">
 <div ng-controller="StadeController">
 <form name="stadeForm" >
 
  <table class="table stripped">
       <thead><tr><th>ID </th> <th>checked</th> <th>description</th></tr></thead>
       <tbody><tr ng-repeat="row in stades">
          <td><span ng-bind="row.id"></span></td>
          <td><span ng-bind="row.description"></span></td>
          <td><span ng-bind="row.checked"></span></td>
          <td>
    </tr> </tbody>
 </table>
 <p class="bg-info info-msg" id="info1">{{Message}}</p>
 <div class="form-group" >
        <label class=blue_font>description</label>
        <input class=form-control type="text" id="description" ng-model="stadeForm.description" placeholder="description">
    </div>
    
    <div class="form-group" >
        <label class=blue_font>checked</label>
        <input class=form-control type="text" id="checked" ng-model="stadeForm.checked" placeholder="checked">
    </div>

 
 <div class="btn-wrapper">
  <div class="row-gutter-5">
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="create()" id="Create" >Create</button>
    </div>
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="refresh()" id="refresh">Refresh</button>
    </div>
  </div>
</div>
 
 <div class="form-group" >
        <label class=blue_font>ID</label>
        <input class=form-control type="text" id="ID" ng-model="stadeForm.id" placeholder="ID">
    </div>      
  <div class="btn-wrapper">
  <div class="row-gutter-5">
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="deleteRec()" id="Delete" >Delete</button>
    </div>
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="update()" id="Update">Update</button>
    </div>
    </div>
</div>     
       
 </form>
 </div>
 <script src="angular/angular.min.js"></script>
 <script src="angular/angular-resource.min.js"></script>
 <script src=app/app.js"></script>
 <link rel="stylesheet" href="bootsrap/style.css"> 
 <link rel="stylesheet" href="bootsrap/theme-default.css">
 <link rel="stylesheet" href="bootsrap/theme-blue.css">
 <link rel="stylesheet" href="bootsrap/bootstrap.min.css">
 <link rel="stylesheet" href="bootsrap/custom.css">
 </body>
</html>

I'm already referencing the angular.min.js and angular-resource.min.js at the bottom — oui oui, Apr 10 '17 at 10:20

score 0 · Accepted Answer · answered Apr 10 '17 at 11:00

Error on the line <script src=app/app.js"></script>. Open " is missing.

It should be <script src="app/app.js"></script>

<!DOCTYPE html>
<html lang="en">  
 <body ng-app="myApp">
 <div ng-controller="StadeController">
    <form name="stadeForm" >

     <table class="table stripped">
          <thead><tr><th>ID </th> <th>checked</th> <th>description</th></tr></thead>
          <tbody><tr ng-repeat="row in stades">
             <td><span ng-bind="row.id"></span></td>
             <td><span ng-bind="row.description"></span></td>
             <td><span ng-bind="row.checked"></span></td>
             <td>
          </tr> </tbody>
    </table>
    <p class="bg-info info-msg" id="info1">{{Message}}</p>
    <div class="form-group" >
        <label class=blue_font>description</label>
        <input class=form-control type="text" id="description" ng-model="stadeForm.description" placeholder="description">
    </div>

    <div class="form-group" >
        <label class=blue_font>checked</label>
        <input class=form-control type="text" id="checked" ng-model="stadeForm.checked" placeholder="checked">
    </div>


 <div class="btn-wrapper">
  <div class="row-gutter-5">
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="create()" id="Create" >Create</button>
    </div>
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="refresh()" id="refresh">Refresh</button>
    </div>
  </div>
</div>

    <div class="form-group" >
        <label class=blue_font>ID</label>
        <input class=form-control type="text" id="ID" ng-model="stadeForm.id" placeholder="ID">
    </div>      
     <div class="btn-wrapper">
  <div class="row-gutter-5">
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="deleteRec()" id="Delete" >Delete</button>
    </div>
    <div class="col-md-4 col-xs-6 col-sm-6">
      <button class="btn btn_blue" type="button" data-ng-click="update()" id="Update">Update</button>
    </div>
    </div>
</div>     

    </form>
    </div>
    <script src="angular/angular.min.js"></script>
    <script src="angular/angular-resource.min.js"></script>
    <script src="app/app.js"></script>
    <link rel="stylesheet" href="bootsrap/style.css">   
    <link rel="stylesheet" href="bootsrap/theme-default.css">
    <link rel="stylesheet" href="bootsrap/theme-blue.css">
    <link rel="stylesheet" href="bootsrap/bootstrap.min.css">
    <link rel="stylesheet" href="bootsrap/custom.css">
 </body>
</html>

ngResource is failing to load

2 Answers2