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'})
});
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="/"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With