Here is the code snippet from my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script src="app.js"></script>
<title>TESTS</title>
</head>
<body ng-app="testApp">
<a href="#link">Testing angularjs routing</a>
<div ng-view>{{message}}</div>
<div ng-controller="TestController">{{message}}</div>
</body>
</html>
And here is the content of my app.js file:
var testApp = angular.module('testApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl:'index.html',
controller: 'TestController'
}).when('/link', {
templateUrl:'link.html',
controller:'LinkController'
});
});
testApp.controller('TestController', function ($scope) {
$scope.message = "INDEX";
});
testApp.controller('LinkController', function ($scope) {
$scope.message = "LINK";
});
I seem to be having an issue with the routing in my AngularJS application. The link in my HTML is not clickable, even though it appears to be a normal link. Additionally, the second message is displaying "INDEX", which leads me to believe that the problem lies with the ng-view directive. When I remove the line with ng-view, the link becomes clickable again. I'm unsure of what could be causing this issue and would appreciate any insights or suggestions.