ng-route无法使用TemplateURL

Question

我试图设置链接到这里的第一个示例： https://www.w3schools.com/angular/angular_routing.asp包含颜色的示例。

<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.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
    .when("/blue", {
        templateUrl : "blue.htm"
    });
});
</script>
</body>

如果我使用模板并放入HTML，它可以正常工作，但是当我使用templateUrl（我确实设置了所有的.htm文件）时，它永远找不到.htm页面。

我的目录设置为

C：\ Users {User} \ Documents \ ng-Route和所有.htm文件都是ng-route文件夹的子项。

每当我点击链接时，网址都来自： ... NG路由/ index.html的＃！ 至 NG路由/ index.html的＃！/绿 但是局部视图没有显示出来。 任何帮助都会非常感激。