Search code examples
javascriptangularjsng-viewroute-provider

ng-view won't display template


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

Solution

  • 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'}