2016-12-16 4 views
10

Я пытаюсь создать свое первое угловое приложение. Но он вообще не работает. Я понятия не имею, в чем проблема. Я проверил консоль, но нет эррос.AngularJS 1.6 routing not working

<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> 

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

+0

нет erros в консоли:/ – Petrus

+0

Все ли ресурсы решить правильно? Вы видите свой шаблон, когда вы запрашиваете у вас http: //applicationurl/main.html? – Jeroen

+0

Im работает на локальном сервере. – Petrus

ответ

27

маршрутов в угловых 1.6 изменен с #/myUrl к #!/myUrl

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

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

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

+2

отличный ответ ... – Juan

+0

@John Sparwasser: Спасибо. Работал для меня тоже за 1.6.4/angular.min.js ... – Thulasiram

+1

Отличный ответ !! @Mistalis отличное решение. – HarshalY

1

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

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     templateUrl : "main.html" 
    }) 
    .when("/sec", { 
     templateUrl : "sec.html" 
    }) 
    .when("/th", { 
     templateUrl : "th.html" 
    }); 
}]); 
+0

Пробовал. Все еще не работает:/ – Petrus

+0

- это сайт, размещенный на локальном сервере? Если нет, то это причина, почему он не работает –

+0

Да, он размещен на локальном сервере. – Petrus

-3

Вы должны исправить свои HREF атрибуты:

Правильный путь:

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

Я изменил ее, все еще не работает:/ – Petrus

4

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

app.config(['$locationProvider', function($locationProvider) { 
     $locationProvider.hashPrefix(''); 
     }]); 
1

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

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