2015-06-12 6 views
4

Определение проблемыУгловая контроллер не найден

Я использую ngRoute модуль AngularJS за первый раз, и я бегу в некоторые проблемы с ним. У меня есть страница index.cshtml, в которой я ссылаюсь на свой routingModule, установив ng-app. У меня также есть ng-view, поэтому, когда я нажимаю «Новая учетная запись», он загружает register.cshtml в ng-view или, если я нажимаю «Вход», он загружает authenticate.cshtml в ng-view.

Маршрутизация работает должным образом, так как я могу видеть регистр и аутентифицировать загрузку страниц в ng-view, когда я нажимаю ссылки на моей индексной странице. Но контроллеры, которые я установил для регистрации и аутентифицировать страницы в routingModule.js, похоже, не существуют.

Я получаю это error при нажатии «Новая учетная запись» на индексной странице. Я получаю то же самое error, когда я нажимаю «Войти» на индексной странице

Я добавил все javascript и html-файлы ниже, необходимые для решения проблемы. Любая помощь приветствуется.

Webroot Структура

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]+)*&#64[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]+)*&#64[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); 
 
     } 
 
} 
 
    
 
});

ответ

3

Из того, что я могу видеть здесь, то authenticationModule и registerModule отсутствуют в качестве зависимостей вашего routingModule:

var routingModule = angular.module("routingModule", ['ngRoute', 'authenticationModule', 'registerModule']) 
+0

Это исправляло обе ошибки! Благодаря ! – user1022425

Смежные вопросы