Maven Maven - 5 months ago 13
AngularJS Question

Unable to instantiate Angular controller

I am trying to setup a very basic login functiniolity with

AngularJS

This is what I have:

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/angular.js"></script>

</head>
<body ng-app ="MyApp">
<script src="/Scripts/ng/ngLogin.js"></script>


<div id="loginBox" ng-controller="loginCtrl">
<form action="/" id="userLogin">
<label>User id</label>
<input type="text" ng-model="userId" />
<label>Password</label>
<input type="text" ng-model="password" />

<input type="button" name="loginSubmit" ng-click="submit()" value="Login" />
</form>
</div>

</body>
</html>


ngLogin.js


angular.module("MyApp").controller('loginCtrl', ['$scope', '$log', function($scope, $log) {
alert($scope.userId);
$scope.submit = function () {
var usrName = $scope.userId;
var password = $scope.password;
alert(usrName);
$log.log(usrName);
}
}]);


But when I click the login button nothing happens neither the alert nor anything in the console log, what am I doing wrong?

Answer

Pass a dependencies array when you register your module:

angular.module("MyApp", [])

Error: [$injector:nomod] Module 'MyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Comments