Маршрутизация AngularJS 1.6 не работает

Я пытаюсь создать свое первое угловое приложение. Но он вообще не работает. Я понятия не имею, в чем проблема. Проверил консоль, ошибок нет.

<head>
 <meta charset="utf-8">
 <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script>
</head>
<body ng-app="myApp">
  <h1>Test angular</h1>
  <a href="#/">Main</a>
  <a href="#sec">Second</a>
  <a href="#th">Third</a>
  <div ng-view></div>
</body>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
});
</script>

Может кто-нибудь помочь мне?


javascript angularjs routing angularjs-1.6
person Petrus    schedule 16.12.2016    source источник
comment
в консоли ошибок нет :/   -  person Petrus    schedule 16.12.2016
comment
Все ли ресурсы разрешаются правильно? Видите ли вы свой шаблон, когда запрашиваете applicationurl/main.html?   -  person Jeroen    schedule 16.12.2016
comment
Я работаю на локальном сервере.   -  person Petrus    schedule 16.12.2016
comment
@Jaroen да, я вижу свой шаблон, когда запрашиваю   -  person Petrus    schedule 16.12.2016

Ответы (5)


arrow_upward
30
arrow_downward

Маршруты в Angular 1.6 изменены с #/myUrl на #!/myUrl

Вы должны изменить свою ссылку на:

<a href="#!/">Main</a>
<a href="#!/sec">Second</a>
<a href="#!/th">Third</a>

См. этот ответ, если вы хотите удалить этот префикс.

person Mistalis    schedule 25.01.2017
comment
@Джон Спарвассер: Спасибо. У меня тоже сработало для 1.6.4/angular.min.js... - person Thulasiram; 12.06.2017
comment
Идеальный ответ!! @Mistalis отличное решение. - person Harshal Yelpale; 10.01.2018

arrow_upward
5
arrow_downward

Попробуйте добавить $locationProvider в свой скрипт

app.config(['$locationProvider', function($locationProvider) {
        $locationProvider.hashPrefix('');
        }]);
person Ravi Teja Vattem    schedule 13.02.2017

arrow_upward
1
arrow_downward

Я обнаружил, что вы не включили $routeProvider должным образом. Вот рабочий код маршрутизации:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
}]);
person Emad Salah    schedule 16.12.2016
comment
сайт размещен на локальном сервере? Если нет, то это причина, почему он не работает - person Emad Salah; 16.12.2016
comment
Да, он размещен на локальном сервере. - person Petrus; 16.12.2016
comment
Попробуйте опубликовать jsFiddle на своем веб-сайте, чтобы я мог проверить, почему возникает эта проблема. - person Emad Salah; 16.12.2016

arrow_upward
1
arrow_downward

Попробуйте этот код, он работает

app.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
    .when('/', {
        templateUrl: 'index.html'
    })
    .when('/about', {
        templateUrl: 'about.html'
    })
    .when('/service', {
        templateUrl: 'service.html'
    });}]);
person MDF    schedule 22.04.2017

arrow_upward
-3
arrow_downward

Вам нужно исправить атрибуты href:

Правильный способ:

<a href="#/">Main</a>
<a href="#/sec">Second</a>
<a href="#/th">Third</a>
person salix    schedule 16.12.2016