Я новичок в AngularJS, и сейчас я создаю небольшое приложение. Я хочу, чтобы мой URL как этот /index (без.html). Я попытался использовать NgRoute для этого, но, похоже, он не работает хорошо. Когда я иду в/учреждения, он говорит, что маршрут не существует. Вот мой код:
app.js
var app = angular.module('khApp', ['ngRoute','establishmentModule', 'queryModule', 'buildingBlockModule', 'categoryModule']);
app.config(['$routeProvider', function($routeProvider)
{
$routeProvider
.when('establishments', {controller:'testController', templateUrl: '../html/establishments.html'})
}]);
app.controller('testController', ['$http', function($http)
{
}]);
index.html
<div ng-controller="testController as test" class="container">
hi
<a href="establishments">
<button class="btn btn-default">Start</button>
</a>
</div>
<ng-view></ng-view>
<script type="text/javascript" src="../../bower_components/angular/angular.js"></script>
<script type="text/javascript" src="../../bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/buildingblock.js"></script>
<script type="text/javascript" src="../js/category.js"></script>
<script type="text/javascript" src="../js/establishment.js"></script>
<script type="text/javascript" src="../js/query.js"></script>
</body>
</html>
Что я делаю не так? Заранее спасибо!
В зависимости от того, как настроен ваш маршрутизатор, обычно вам необходимо настроить маршруты, начинающиеся с косой черты:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('establishments', {
controller:'testController',
templateUrl: '../html/establishments.html'
});
}]);
Кроме того, в вашем HTML, я думаю, что ваши HTML-привязки должны начинаться с хеш-навигации так:
<a href="#/establishments">
<button class="btn btn-default">Start</button>
</a>
Ссылка: Учебное пособие по AngularJS 7 - Маршрутизация и множественные представления
establishments.html
в вашем якорный тег , как ваш href
. Маршрутизатор предназначен для использования в стиле разработки одностраничных приложений (spa). В этом случае при переходе по странице вся предыдущая обработка JS будет потеряна. Вам необходимо включить в соответствующие части кода на establishments.html
странице , а также. Использование роутера для навигации между двумя совершенно разными страницами будет бессмысленным.
Маршрутизация AngularJS использует идентификатор фрагмента (#
в URL-адресе) для получения маршрутов. Это потому, что он не может манипулировать полным URL-адресом, не заставляя браузер запрашивать новую страницу, что делает его не SPA.
Таким образом, URL-адрес, который вам нужно запросить, должен быть формой <path to root>#/establishments
. Предполагая, что index.html
находится в /application/app/html
, URL-адрес для запроса:
/application/app/html/index.html#/establishments
Если вы также хотите поддерживать URL-адрес localhost:port/application/app/html/establishments
вам необходимо настроить маршрутизацию на стороне сервера, чтобы выполнить перенаправление на /application/app/html/index.html#/establishments
.
#/установки - это то, что вам нужно в тэге привязки
<a href="#/establishments">
<button class="btn btn-default">Start</button>
</a>
ваш маршрут будет примерно таким:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('establishments', {
controller:'testController',
templateUrl: '../html/establishments.html'
});
}]);