CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsnode.js
Abhishek Parikh
Abhishek Parikh

Reputation: 989

Angular JS error angular.js:38Uncaught Error: [$injector:modulerr]

While loading my index.html i am facing this error

index.html

<html>
<head>Testing
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js" ></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
   $scope.submit= function(){
var data = {
  book: {            
    author: $scope.author,
    title : $scope.title,
    body : $scope.body
  }
}

$http.post("/", data).success(function(data, status) {
    console.log('Data posted successfully');
})
   }
});
</script>
</head>

<body ng-app="myApp">    
  <div ng-controller="myCtrl">
    <form>
      Author:
      <input type="text" ng-model="author">
      <br>
      <br> Title:
      <input type="text" ng-model="title">
      <br>
      <br> Body:
      <input type="author" ng-model="body">
      <br>
      <br>
      <input type="submit" value="Submit" ng-click="submit()">
    </form>
  </div>  
</body>
</html>

I am running it on my node.js code which is

server.js

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var path = require('path');


app.use(express.static(__dirname + './public'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(bodyParser.json());


app.get('/', function(req, res){
  res.sendFile(__dirname +'/index.html');
});

app.post('/', function(req,res){
    console.log(req.body)
    res.sendFile(__dirname +'/index1.html');
});

console.log('server running at 3000!')
app.listen(3000);

I am getting index.html correctly but in google chrome inspection it is showing me error

angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A332)

Upvotes: 2

Views: 1041

Answers (3)

Sravan
Sravan

Reputation: 18647

Your code is working fine in our machines.

As you said in one comment that you are getting the old files always, it should be cache problem

If it is the cache problem, steps to clear cache in chrome.

1) Open Chrome.
2) On your browser toolbar, tap More .
3) Tap History, and then tap Clear browsing data.
4) Under "Clear browsing data," select the checkboxes for Cookies and site data and Cached images and files.
5) Use the menu at the top to select the amount of data that you want to delete. ...
6) Tap Clear browsing data.

If you want to remove cached views from the code.

app.run(function($rootScope, $templateCache) {
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        if (typeof(current) !== 'undefined'){
            $templateCache.remove(current.templateUrl);
        }
    });
});

Here is a link where you get these sort of answers.

Also you can,

1) Open your browser console
2) Go to network tab
3) Refresh the page
4) While refreshing, right click on network tab and click on, clear browser cookies, then press alt+f5

Upvotes: 1

Ashish Patel
Ashish Patel

Reputation: 1031

Simply add this line after your angular.js script line:

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

it will work..

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

Same code works here

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $scope.submit = function() {
    var data = {
      book: {
        author: $scope.author,
        title: $scope.title,
        body: $scope.body
      }
    }

    $http.post("/", data).success(function(data, status) {
      console.log('Data posted successfully');
    })
  }
});
<!DOCTYPE html>
<html>

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


  <script src="script.js"></script>
</head>


<body ng-app="myApp">    
  <div ng-controller="myCtrl">
    <form>
      Author:
      <input type="text" ng-model="author">
      <br>
      <br> Title:
      <input type="text" ng-model="title">
      <br>
      <br> Body:
      <input type="author" ng-model="body">
      <br>
      <br>
      <input type="submit" value="Submit" ng-click="submit()">
    </form>
  </div>  
</body>
 

</html>

Upvotes: 1

Related Questions