ng-view 不会显示模板

Question

我一直在使用 Angular 并尝试实现简单的路由。我有一个基本的 HTML，其中包含对所有必需脚本的引用和一个 ng-view 标记。

出于某种原因，加载页面时，模板未显示在 ng-view 位置。为什么不显示，如何解决？

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
    <script src="routCtrl.js"></script>
</head>
<body ng-app='ngRouteTest'>
    <div ng-view></div>
</body>

和脚本文件：

var ngRouteTest = angular.module('ngRouteTest',['ngRoute']);
ngRouteTest.config(function($routeProvider){
    $routeProvider
.when('/', 
     {templateUrl : '/routView1.html'})
});

Answer 1

您需要重定向到该页面，以便路由会知道在 ng-view 指令中呈现哪个页面。

有多种方法可以实现。

再定义一个 otherwise 重定向到 /.

$routeProvider.otherwise({redirectTo: '/'})

将锚点添加到将重定向到 / 的页面。

<body ng-app='ngRouteTest'>
    <a href="#/">Home Page</a>
    <div ng-view></div>
</body>

在 <head> 标签的页面上有默认值 url。
```
<base href="/"/>
```

Answer 2

启动本地主机并从那里破坏代码后，它工作得很好。

当您进行本地 ajax 调用时，问题与 chrome 相关的安全性有关。

所以遇到这个问题应该做以下事情之一：

1.Disable chrome 中的网络安全。 2.Start 要测试的本地主机。

Answer 3

好的，首先您需要从服务器运行您的代码，因此要在本地测试它，请使用 http-server，这非常容易准备。

然后您需要更改您的 templateUrl 路径：

{templateUrl : '/routView1.html'}

至：

{templateUrl : './routView1.html'}

ng-view 不会显示模板

ng-view won't display template

javascript

angularjs

route-provider

ng-view