2016-11-04 2 views
0

Я изучаю маршрутизацию в угловых js, пожалуйста, помогите мне со следующим примером. В этом примере маршрутизация не работает. Нужно ли запускать это на любом сервере?Почему угловая js-маршрутизация не работает для этого примера?

<!DOCTYPE html> 
<html> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 

    <body ng-app="myApp"> 

    <p><a href="#/">Main</a></p> 

    <a href="#/red">Red</a> 
    <a href="#/green">Green</a> 
    <a href="#/blue">Blue</a> 

    <div ng-view></div> 

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

    <p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p> 
</body> 
</html> 

main.html

<h2> Hello this is main.html</h2> 

red.html

<h2> Hello this is red.html</h2> 

green.html

<h2> Hello this is green.html</h2> 

blue.html

<h2> Hello this is blue.html</h2> 
+0

Где вы пытаетесь это? –

+0

Пробовали ли вы это на веб-сервере или в браузере (как html)? – ismailperim

+0

Я не уверен, что угловой даже загружен. ваши теги скрипта находятся за пределами вашего или вашего нет – dbarthel

ответ

0

Удалите # из HREF и один раз попробовать

<a href="/">Main</a> 
0
enter code here 

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script> 
 

 
<body ng-app="myApp"> 
 

 
    <p><a href="#/">Main</a> 
 
    </p> 
 

 
    <a href="#/red">Red</a> 
 
    <a href="#/green">Green</a> 
 
    <a href="#/blue">Blue</a> 
 

 
    <div ng-view></div> 
 

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

 
    <p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p> 
 
</body> 
 

 
</html>

Проблема с вашим угловым маршрутным КДС.

+0

использовать '' –

0

Try URL в

<p><a href="/">Main</a></p> 

<a href="/red">Red</a> 
<a href="/green">Green</a> 
<a href="/blue">Blue</a> 

Тогда только ваш маршрут коляски установить с URL

Смежные вопросы