Отказ от ответственности: Да, я прочитал много других сообщений, но не смог найти решение.Угловая маршрутизация не работает
Итак, я создал базовую угловую приложение:
index.html
<!DOCTYPE html>
<html ng-app="sampleApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="navbar">
<a href="#/">Home</a>
<a href="#/aboutme">About me</a>
<a href="#/projects">Projects</a>
<a href="#/contact">Contact</a>
</div>
<div ng-view></div>
</body>
</html>
app.js
var myApp = angular.module('sampleApp', ['ngRoute']);
myApp.config(
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/main.html'
}).
when('/aboutme', {
templateUrl: 'views/aboutme.html'
}).
when('/projects', {
templateUrl: 'views/projects.html'
}).
when('/contact', {
templateUrl: 'views/contact.html'
}).
otherwise({
redirectTo: '/'
});
}
);
При запуске сервера (npm install http-server
затем http-server -o
) и запустите приложение, я вижу main.html
и навигационные ссылки. URL-адрес: http://127.0.0.1:8080/#!/
. Когда я нажимаю, например. Проекты, URL-адрес становится http://127.0.0.1:8080/#!/#%2Fprojects
, но содержание страницы остается неизменным (ссылки на навигацию + main.html
).
Я также попытался модифицировать app.js так:
...
myApp.config(['$routeProvider',
function($routeProvider) {
...
}]);
... но результат тот же.
Что я делаю неправильно?
У вас есть сообщение об ошибке? – Pterrat
В вашем index.html положите в голову ' ', чтобы избежать/#! и получить прямой url –
ocespedes
вы пытались удалить '/' как в 'Projects' – Jax