ng-view不会显示模板

I have been working a bit with Angular and I tried to implement simple routing. I have a basic HTML which contains reference to all the required scripts and a ng-view tag.

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

For some reason, when the page is loaded, the template isn't shown in the ng-view location. Why isn't it shown, and how to fix it?

出于某种原因,当加载页面时,模板不会显示在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>

and the the script file:

和脚本文件:

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

3 个解决方案

#1

Okay first you need to run your code from a server, so to test it locally use http-server which is really easy to prepare.

好的,首先你需要从服务器运行你的代码,所以要在本地测试使用http-server,这很容易准备。

Then you will need to change your templateUrl path from:

然后,您需要更改templateUrl路径:

{templateUrl : '/routView1.html'}

to:

{templateUrl : './routView1.html'}

#2

You need to redirect to that page so that routing will come to know which page to render inside ng-view directive.

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

There are multiple ways to do it.

有多种方法可以做到这一点。

Define one more otherwise to redirect to /.

另外定义一个以重定向到/。
```
$routeProvider.otherwise({redirectTo: '/'})
```

Add anchor to page that will redirect to /.

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

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

Having default url on page in <head> tag.

在标记的页面上有默认网址。
```
<base href="/"/>
```

#3

After starting a local host and ruining the code from there it worked perfectly fine.

在启动本地主机并破坏代码之后,它工作得非常好。

The issue was with the chrome related security when you make local ajax calls.

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

So one has this problem should do one of the following things:

所以有一个问题应该做以下事情之一:

1.Disable web-security in chrome. 2.Start a local host to test.

1.铬合金的网络安全性。 2.启动本地主机进行测试。

#1