Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'})
});
like image 884
Guy Tabak Avatar asked Oct 30 '22 19:10

Guy Tabak


1 Answers

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.

  1. Define one more otherwise to redirect to /.

    $routeProvider.otherwise({redirectTo: '/'})
    
  2. Add anchor to page that will redirect to /.

    <body ng-app='ngRouteTest'>
        <a href="#/">Home Page</a>
        <div ng-view></div>
    </body>
    
  3. Having default url on page in <head> tag.

    <base href="/"/>
    
like image 102
Pankaj Parkar Avatar answered Nov 04 '22 00:11

Pankaj Parkar