D555 D555 - 3 months ago 29
Javascript Question

Angular js simple login form error

I am new to the angular js. I have created a simple login form and while loading page gives error. I am unable to understand the error and don't know how to resolve this error. My code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- The above 2 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Digital World</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body ng-app="digitalWorld">
<div class="container" ng-controller="loginController">
<form ng-submit="login()">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<p>{{myTxt}}</p>

</div>

<script>
//var app = angular.module("myLogin", []);
/*app.controller("loginController", function($scope) {
$scope.myTxt = "You have not yet clicked submit";
$scope.myFunc = function () {
$scope.myTxt = "You clicked submit!";
}
});*/
</script>
</body>
</html>


It gives some error like this::

Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=digitalWorld&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fnomod%3Fp0%3DdigitalWorld%0AG%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A6%3A416%0Ade%2F%3C%2F%3C%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A24%3A186%0Ab%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A23%3A251%0Ade%2F%3C%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A23%3A494%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A38%3A117%0An%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A7%3A331%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A37%3A488%0Aeb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A41%3A249%0Ayc%2Fc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463%0Ayc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A294%3A192%0Ab%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A175%3A62%0AIf%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A35%3A365%0AHf%2Fd%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A35%3A314%0A
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
Line 6


a) How can I resolve this?

b) I am unable to understand the console error. How to debug issues like this, is there any tool or something for debugging?
Can somebody please help as I am new to Angular Js

Answer

What happens:

Basically angular can't find module definition (digitalWorld).

Here: nomod (no module) %3Fp0%3D digitalWorld (module's name)%0AG and after that you have link to angularjs documentation which lead you to your problem explanation (click).

How to fix:

you should define app's name in html:

ng-app="digitalWorld"

And app (module) with same name in js:

angular.module("digitalWorld", []); //instead of "myLogin"

P.S.: you can define module with same name multiple times, but at first time it's should be , angular.module("digitalWorld", []); and all other times angular.module("digitalWorld"); - without [].

How to prevent in future:

In case of such or similar errors, just check with this list: http://stackoverflow.com/a/26797874/930170

There're list of most common mistakes with angular's modules definitions.