模板指令在以下代码中有效，但模板 URL 不起作用？
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://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>
<!--template is working but template url is not working-->
<script">
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : 'hello'
})
.when("/red", {
template : 'hi'
})
.when("/green", {
templateUrl : 'hello.html'
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
最佳答案
您需要一个像 (apache) 这样的网络服务器来使用 templateUrl。
http://plnkr.co/edit/L4Hxf7KiiVuouPWRv4pl
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: 'hello'
})
.when("/red", {
template: 'hi'
})
.when("/green", {
templateUrl: 'hello.html'
})
.when("/blue", {
templateUrl: 'blue.html'
});
});
关于javascript - template 指令有效，但 templateUrl 无效。请提出建议？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37873886/