Ошибка синтаксического анализа XML: нежелательная после элемента документа в AngularJS

Question

Я работаю с Angular JS и создал простую форму входа в систему, а также реализовал маршрутизацию для перехода на следующую страницу после успешного входа в систему.

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

Ниже показана структура моего приложения.

Я создал файл controller.js, файлы login.html и dashboard.html

controller.js:

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider

    .when('/', {
        templateUrl : "login.html"
    })

    .when('/dashboard', {
        resolve: {
            "check" : function($location, $rootScope) {
                if(!$rootScope.loggedIn) {
                    $location.path('/');
                } else{
                   templateUrl : "dashboard.html" 
                }
            }
        } 
    })

    .otherwise({
        redirectTo : '/'
    });
});

app.controller('loginCtrl', function($scope ,$location , $rootScope) {
    $scope.submit = function(){

        if($scope.username == 'asd' && $scope.password == 'asd' ){
            $rootScope.loggedIn = true;
            $location.path('/dashboard');
        }
        else
        {
            alert("Invalid username and password")
        }
    };
});

login.html

<div class="col-sm-8 col-sm-push-4">
</div>

<div class="col-sm-4 col-sm-pull-4">
<div ng-controller="loginCtrl">

<br><br><br><br><br><br>
<h3>Login </h3><hr>
  <form action="/"  id="myLogin">

    <div class="form-group">
      <label for="username">UserName:</label>
      <input type="text" class="form-control" id="username" placeholder="Enter UserName" ng-model="username">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Enter password" ng-model="password">
    </div>

    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>

    <button type="button" class="btn btn-default" ng-click="submit()">Login</button>
  </form>
</div>
</div>

dashboard.html:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">MY APP</a>
    </div>

  </div>
</nav>
<br/>
<nav class="navbar navbar-inverse" style="margin: auto;">
  <div class="container-fluid">
    <div class="navbar-header">

    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#page1.html">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Это мое окно вывода

Кто-нибудь может мне помочь в устранении этой ошибки ...!

Answer 1

Попробуйте:

.when('/dashboard', {
    templateUrl: 'dashboard.html',
    resolve: {
        "check" : function($location, $rootScope) {
            if(!$rootScope.loggedIn) {
                $location.path('/');
            }
        }
    } 
})

Вот рабочий планкр

Несколько других моментов для рассмотрения в вашем коде:

1. использовать имя контроллера в самой фазе config вместо записи в html как ng-controller

Ex:

 .when('/', {
    templateUrl : "login.html",
    controller : 'loginCtrl'
 })

2. Удалите action из тега <form>, потому что вы обрабатываете через angularJS и используете ng-submit.

например:

<form id="myLogin" ng-submit="submit()">

3. Удалить $rootScope.loggedIn, так как rootScope переменные не рекомендуется, лучше использовать factories