Question

我正在尝试为练习创建单页应用程序演示。我已将所有三个html文件存储在同一文件夹中。我试图给出整个页面路径。我尝试给出容器ng-view / ng-view。我正在使用括号编辑器。可以看到url中的更改，但它没有显示来自html页面Login.html和About.html的容器ng-view中的内容。请帮助..我的代码在这里：

  <!DOCTYPE html><html><head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route/angular-route.min.js"></script>
         <script>
                var app = angular.module("myApp", ["ngRoute"]); 
                app.config(function($routeProvider) 
                    {
                    $routeProvider
                    .when("/", {
                        templateUrl : "/Index.html"
                    })
                    .when("/red", {
                        templateUrl : "/Login.html"
                    })
                    .when("/green", {
                        templateUrl : "/About.html"
                    });
                    });

        </script>

</head>
<body ng-app="myApp">
<ul>
    <li><a href="#!/">Main</a></li>
    <li><a href="#!/red">Red</a></li>
    <li><a href="#!/green">Green</a></li>
</ul>

<p>Click on the links.</p>

<p>This example uses the ng-view directive as an attribute to a DIV element.</p>
    <div ng-view> </div>
</body>

Answer 1

提供给“templateUrl”的相对路径可能存在问题。

尝试更改为“模板”，只需添加一个简单的测试 - 页面名称 每页的元素。

如果您可以看到所有页面 - 这意味着问题出在您证明为templateUrl的相对路径中。

并且可能尝试将“/”路线放在最后（我不记得在角度1.x但是在角度2+中的顺序问题）。

与angularJS路由有关，为什么路由不能正常工作

1 个答案: