2016-11-04 70 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>

问题是与你的角路线CDN。

+0

使用'' –

0

尝试网址为

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

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

那么只有你推着婴儿车的路线与设置您的网址