Проблема с маршрутизацией в AngularJS

У меня проблема с маршрутизацией в моем приложении Angular SPA. Все было хорошо, пока у меня не было одного контроллера и одного вида (Регистрация.формат HTML.) После того, как я добавил второй контроллер/представление, приложение не показывает мое второе представление (Login.формат HTML.) Конечно, я создал LoginController и Login.html в url в браузере нет / #Login когда я нажимаю на Sign in.
Мое приложение.js:

var App = angular.module('App', ['ngRoute', 'ui.bootstrap']);

App.service('Api', ['$http', ApiService]);

App.controller('MainController', MainController);
App.controller('RegisterController', RegisterController);
App.controller('LoginController', LoginController);



var configFunction = function ($routeProvider, $httpProvider) {
    $routeProvider.
        when('/Register', {
            templateUrl: 'SPA/Views/Register.html',
            controller: 'RegisterController'
        })
        when('/Login', {
            templateUrl: 'SPA/Views/Login.html',
            controller: 'LoginController'
        })
        .otherwise({
            redirectTo: function () {
                return '/';
            }
        });
}

configFunction.$inject = ['$routeProvider', '$httpProvider'];

App.config(configFunction);

Мой Индекс.cshtml:

<html>
  <head>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <script src="~/Scripts/angular-animate.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>

    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

    <script src="~/SPA/Controller/RegisterController.js"></script>
    <script src="~/SPA/Controller/LoginController.js"></script>
    <script src="~/SPA/Controller/MainController.js"></script>
    <script src="~/SPA/ApiService.js"></script>
    <script src="~/SPA/App.js"></script>

    <base hhref="http://localhost:53544/#/" />

</head>
<body style="background-color:#34515E">

    <div ng-app="App" ng-controller="MainController">
        
        <nav role="navigation" class="navbar navbar-inverse"  style="height:50px">
            <div class="container-fluid">

                <div class="navbar-header">
                    @*<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-next"></span>
                        </button>*@
                    <a class="navbar-brand" href="#" style="color:white">Home</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav"></ul>
                    <form class="navbar-form navbar-nav navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Szukaj" style="width:250px" />
                        </div>
                        <button type="submit" class="btn btn-default">Search</button>
                        <button type="button" class="btn btn-primary">Search advanced</button>
                    </form>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#Login" style="color:white">Sign in</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#Register" style="color:white">Sign up</a></li>
                    </ul>
                </div>
            </div>
        </nav>


        <div id="sideBar" class="sidebar-offcanvas">
            <div class="col-md-2">
                <ul class="nav nav-pills nav-stacked">
                    <li class="nav-divider" style="background-color:white"></li>
                    <li><a href="#" style="color:white">Home<i class="fa fa-home fa-fw fa-pull-right"></i></a></li>
                    <li class="nav-divider" style="background-color:white"></li>
                    <li><a href="#Register" style="color:white">Sign up<i class="fa fa-user-plus fa-pull-right"></i></a></li>
                    <li class="nav-divider" style="background-color:white"></li>
                    <li><a href="#Login" style="color:white">Sign in<i class="fa fa-sign-in fa-pull-right"></i></a></li>
                    <li class="nav-divider" style="background-color:white"></li>
                </ul>
            </div>
        </div>

        <div ng-view></div>
    </div>

  

</body>
</html>

1 ответ

  1. Ваша база href имеет двойную h:

    <base hhref="http://localhost:53544/#/" /> должно быть
    <base href="http://localhost:53544/#/" />