Ng-View is not displaying data
22 views
Skip to first unread message
Nancy Drew
Jul 23, 2021, 2:28:10 AM7/23/21
to Angular and AngularJS discussion
I am trying to learn routing in Anjular JS, but ng-view is not loading the pages.
Main Html page-
<!DOCTYPE html>
<html ng-app="RouteApp">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="JavaScript.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#!">AnjularJS</a>
<div class="nav navbar-nav navbar-right">
<a class="nav-link" href="#/First">First Page</a>
<a class="nav-link" href="#/Second">Second Page</a>
</div>
</div>
</nav>
<div class="container">
<div ng-view>
</div>
</div>
</body>
</html>
Javascript file
var RouteApp = angular.module('RouteApp', ['ngRoute']);
RouteApp.config(function ($routeProvider) {
$routeProvider.when('First', {
templateUrl: 'First.html',
controller : 'CtrFive'
})
.when('Second', {
templateUrl: 'Second.html',
controller: 'CtrSix'
})
});
RouteApp.controller('CtrFive', ['$scope', function ($scope) {
}]);
RouteApp.controller('CtrSix', ['$scope', function ($scope) {
}]);
First.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>This is first!</h1>
</body>
</html>
Second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>This is second!</h1>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages