ng-view won't display template

Question

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.

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?

<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'})
});

Then the problem is that you are providing a wrong path to the html file. where is your routView1.html ? What does your folder structure look like ? — the_critic, Sep 07 '15 at 16:10
I have all the files located in the same folder (I don't believe that the path is the issue). I think the problem is with the ajax call resulted from the routing and the fact that it is a security issue if it's preformed locally in chrome. — Guy Tabak, Sep 07 '15 at 20:09
There should be more than just "failed to load template". The dev tools usually also mention which path was requested... can you post a screenshot of you console ? — the_critic, Sep 07 '15 at 21:27

score 2 · Answer 1 · answered Sep 06 '15 at 21:46

2

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

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="/"/>
```

answered Sep 06 '15 at 21:46

Pankaj Parkar

134,766
23
234
299

Thanks for the answer, none of the options helped. I do see the routing preformed after adding the "otherwise" but the ng-view doesn't load the template. Going to the console as asked above i see the following error: "Failed to load template". I presume the problem is that the files are stored locally and result in security issues - i will start a server and see if i get a different result. – Guy Tabak Sep 07 '15 at 16:07

score 0 · Answer 2 · answered Sep 07 '15 at 20:41

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.

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.

score 0 · Accepted Answer · answered Sep 07 '15 at 21:41

0

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.

Then you will need to change your templateUrl path from:

{templateUrl : '/routView1.html'}

to:

{templateUrl : './routView1.html'}

answered Sep 07 '15 at 21:41

Alejandro Garcia Anglada

2,373
1
25
41

ng-view won't display template

3 Answers3