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>