Problem Definition
I am using AngularJS's ngRoute module for the first time and I am running into some trouble with it. I have a index.cshtml page in which I reference my routingModule by setting the ng-app. I also have a ng-view so that when I click on "New Account" it loads register.cshtml in the ng-view or if I click on "Sign In" it will load authenticate.cshtml in the ng-view.
The routing is working as expected since I can see the register and authenticate pages load in the ng-view when I click the links in on my index page. But the controllers I have set for the register and authenticate pages in the routingModule.js seem to not be there.
I get this error when clicking on "New Account" on the index page. I get the same error when I click on "Sign In" on the index page
I have added all the javascript and html files below needed to solve the problem. Any help would be much appreciated.
Webroot Structure
routingModule.js
var routingModule = angular.module("routingModule", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/account/register', { templateUrl: '/account/register/', controller: 'RegisterController' });
$routeProvider.when('/account/authenticate', { templateUrl: '/account/authenticate/', controller: 'AuthenticateController' });
})index.cshtml
<!DOCTYPE html>
<html ng-app="routingModule">
<head>
<base href="/" />
<script src="~/Scripts/JQuery/jquery-2.1.3.js"></script>
<script src="~/Scripts/Angular/angular.min.js"></script>
<script src="~/Scripts/Angular/angular-route.min.js"></script>
<script src="~/Scripts/Angular/angular-resource.min.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/boostrap-hero.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/bootstrap.min.js"></script>
<script src="/Scripts/app/Registration/registerModule.js"></script>
<script src="/Scripts/App/Registration/registerService.js"></script>
<script src="/Scripts/App/Registration/registerController.js"></script>
<script src="/Scripts/App/Registration/validatePasswordDirective.js"></script>
<script src="~/Scripts/App/Authentication/authenticateModule.js"></script>
<script src="~/Scripts/App/Authentication/authenticateController.js"></script>
<script src="~/Scripts/App/Authentication/authenticateService.js"></script>
<script src="~/Scripts/App/Routing/routingModule.js"></script>
<meta name="viewport" content="width=device-width" />
<title>AngularJS + ASP.NET MVC</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><span class="navbar-brand">AngularJS + ASP.NET Playground</span></li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> <a href="/#/home/index">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="/#/account/authenticate">Sign In</a></li>
<li> <a href="/#/account/register">New Account</a></li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
</div>
</body>
</html>register.cshtml
<form name="registerForm" novalidate>
<div class="row">
<div class="col-md-10">
<h2>Create Account</h2>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Username</label>
<input type="text" name="userName" ng-model="user.userName" class="form-control" required />
<div class="text-danger" ng-show="registerForm.userName.$error.required && registerForm.userName.$dirty">Please enter your first name</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<div class="text-danger" ng-show="registerForm.email.$error.required && registerForm.email.$dirty">Please enter a your email address</div>
<div class="text-danger" ng-show="registerForm.email.$error.pattern && registerForm.email.$dirty">Invalid email address</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" ng-model="user.password" class="form-control" required />
<div class="text-danger" ng-show="registerForm.password.$error.required && registerForm.password.$dirty">Please enter a password</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="passwordConfirm" ng-model="user.passwordConfirm" class="form-control" required compare-to="user.password" />
<div class="text-danger" ng-show="registerForm.passwordConfirm.$error.required && registerForm.passwordConfirm.$dirty">Please repeat your password</div>
</div>
<div class="form-group">
<button class="btn btn-default" ng-disabled="registerForm.$invalid" ng-click="register(user)">Create Account</button>
<div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
</div>
</div>
</div>
</form>authenticate.cshtml
<form name="loginForm" novalidate>
<div class="row">
<div class="col-md-10">
<h2>Sign In</h2>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Email</label>
<input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<div class="text-danger" ng-show="loginForm.email.$error.required && loginForm.email.$dirty">Please enter a your email address</div>
<div class="text-danger" ng-show="loginForm.email.$error.pattern && loginForm.email.$dirty">Invalid email address</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" ng-model="user.password" class="form-control" required />
<div class="text-danger" ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Please enter a password</div>
</div>
<div class="form-group">
<button class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="authenticate(user)">Sign In</button>
<div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
</div>
</div>
</div>
</form>registerModule.js
var registerModule = angular.module("registerModule", ["ngResource"]);registerController.js
registerModule.controller("RegisterController", function ($scope, $location, registerService) {
$scope.register = function (user) {
$scope.errors = [];
registerService.register(user).$promise.then(
function () { $location.url('/home/index');},
function (response){$scope.errors = response.data});
};
});registerService.js
registerModule.factory('registerService', function ($resource) {
return {
register: function(user) {
return $resource('/api/account/register/').save(user);
}
}
});
From what i can see here, the
authenticationModuleandregisterModuleare missing as dependencies of yourroutingModule: