В настоящее время я работаю над учебником angular.js по stackskills, но столкнулся с проблемой.
Кажется, что мое использование routeprovider неверно.
Предполагается, что каждый маршрут должен соответствовать ссылке на панели навигации. Однако вместо переключения представлений всегда выполняется оператор else и отображается основное представление, а не любое другое представление.
Когда оператор else удален, ни одно из представлений не отображается.
var app = angular.module("computer", ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/main', {
templateUrl: 'main.html',
controller:'MainCtrl'
}).
when('/about', {
templateUrl: 'about.html',
controller:'MainCtrl'
}).
when('/services', {
templateUrl: 'services.html',
controller:'ServicesCtrl'
}).
when('/contact', {
templateUrl: 'contact.html',
controller:'ContactCtrl'
}).
otherwise({redirectTo: "/main"})
}])
.controller('MainCtrl', ['$scope', function($scope){
}])
.controller('ServicesCtrl', ['$scope', function($scope){
}])
.controller('ContactCtrl', ['$scope', function($scope){
}]);Это div, в котором находится панель навигации и ссылки для представлений.
<div class="container">
<header class="masthead">
<h3 class="text-muted">Computer Solutions</h3>
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav text-md-center nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="#/main">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
</div>
<div ng-controller='MainCtrl'>
<div ng-view></div>
</div>Любой совет будет принят с благодарностью!
