Question

模板指令正在使用以下代码，但模板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>

Answer 1

首先，您在<script"> -> <script>中有语法错误;
第二：检查你的tempalates extension html＆amp; htm;
对于此文件结构您的代码工作正常：

Answer 2

您需要像（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'
    });

});

模板指令正在工作，但templateUrl不工作。请问什么？

2 个答案: