angularjs路由模板不起作用

下面的代碼可以在stackoverflow控制檯中正常工作，但不能在我的瀏覽器上正常工作。 BéicallngRoute不適合我。讚賞您的幫助。新的angularJS。angularjs路由模板不起作用

<!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="#banana">Banana</a> 
<a href="#tomato">Tomato</a> 

<p>Click on the links to change the content.</p> 

<p>The HTML shown in the ng-view directive are written in the template property of the $routeProvider.when method.</p> 

<div ng-view></div> 

<script> 
var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
        template : <h1>Main</h1><p>Click on the links to change this content</p> 
    }) 
    .when("/banana", { 
        template : <h1>Banana</h1><p>Bananas contain around 75% water.</p> 
    }) 
    .when("/tomato", { 
        template : <h1>Tomato</h1><p>Tomatoes contain around 95% water.</p> 
    }); 
}); 
</script> 

</body> 
</html>

來源

2016-09-26 laput

兩件事情，我跳出：1）你錯過了'的https：'從你的' angular-route.js'腳本引用和2）'template'值應該用引號括起來，因爲它們是你的示例代碼中的字符串。 – Lex

什麼是不工作，路線或主播？你應該使用ng-href – dwbartz

你需要用引號括起來的模板，

var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     template :"<h1>Main</h1><p>Click on the links to change this content</p>" 
    }) 
    .when("/banana", { 
     template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>" 
    }) 
    .when("/tomato", { 
     template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>" 
    }); 
});

WORKING DEMO

來源

2016-09-26 18:17:19 Sajeetharan

我做到了。還是行不通。顯示「/」模板，但沒有其他2個點擊。 – laput

@laput是否檢查過我添加的演示 – Sajeetharan

是的，我做過了。相同的代碼在堆棧溢出控制檯上工作。但不能在我的瀏覽器上工作。我正在運行Apache Web服務器。所以想知道它必須不是代碼。 – laput

angularjs路由模板不起作用

回答

相關問題