Problem z routingiem - Angular

0

Mam kłopot z routingiem w Angularze w aplikacji SPA. Na pierwszy rzut oka wszystko wygląda okej i ciężko zauważyć mi błąd. Fajnie jakby ktoś z boku na to spojrzał. Mianowicie wszystko działało dobrze, dopóki miałem jeden widok i jeden controller odpowiedzialny za rejestracje. Po dodaniu drugiego widoku przestało działać wszystko. Nie pojawia się ani pierwszy widok ani drugi. Zmienia się jedynie prawidłowo adres w przeglądarce na '#/Login' i '#/Register.

Kod z mojego App.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);

I mój Index.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>

</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>
0

brakuje kropki na początku linii

when('/Login', {
0

Widzę jeszcze, że załączyłeś skrypty angularowe podwójnie. Tzn, dodałeś skrypty z końcówką "min" i bez niej. Wybierz jeden z nich, zamiast obydwu. Generalnie te pliki nie różnią się funkcjonalnością, w "min" usunięte są znaki nowej linii, a cały skrypt jest maksymalnie skompresowany, aby ważył jak najmniej. Takich skryptów najlepiej używać na produkcji. Skrypty bez "min" ważą więcej, ale pozwalają w ludzki sposób na debugging i przegląd, podczas gdy "min" się do tego nie nadają.
I nie wiem czy jest sens korzystania z jQuery razem z Angularem. Angular zawiera w sobie okrojonego jQuery, tzw. "jQuery lite" i zwykle, przy odrobinie kombinowania, pozwala na swobodne manipulowanie DOMem. Poczytaj o "angular.element".

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0