2017-01-31 3 views
0

Отказ от ответственности: Да, я прочитал много других сообщений, но не смог найти решение.Угловая маршрутизация не работает

Итак, я создал базовую угловую приложение:

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) { 
    ... 
}]); 

... но результат тот же.

Что я делаю неправильно?

+0

У вас есть сообщение об ошибке? – Pterrat

+0

В вашем index.html положите в голову '', чтобы избежать/#! и получить прямой url – ocespedes

+0

вы пытались удалить '/' как в 'Projects' – Jax

ответ

2

похоже, хорошо работаем. И как упоминание в комментариях нужно проверить угловую версию. i создать образец Plunker

<script data-require="[email protected]" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script> 
<script data-require="[email protected]" data-semver="1.2.0-rc1" src="https://code.angularjs.org/1.2.0rc1/angular-route.js"></script>