Clicking on the Home link triggers the goTo function, but it redirects to a blank page as shown:
https://i.sstatic.net/qerBI.png
Upon clicking on the browser's back button, it redirects to the desired page (firstPage).
https://i.sstatic.net/oaANp.png
Any insights on what might be causing this issue?
HTML:
<footer ng-controller = "footerLink">
<a href = "#" ng-click="goTo('/firstPage')"> Home </a>
<a href = "#"> About us </a>
<a href = "#"> Our Team </a>
<a href = "#"> Blog </a>
<a href = "#"> Services </a>
<a href = "#"> Portfolio </a>
<a href = "#"> Contact </a>
<a href = "#"> Sitemap </a>
</footer>
JS
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
}).
when('/buttonView', {
templateUrl: 'buttonView/buttonView.html',
controller: 'buttonViewCtrl'
}).
when('/firstPage', {
templateUrl: 'view2/view2.html',
controller: 'footerLink'
}).
when('/home', {
templateUrl: 'view1/view1.html',
controller: 'logo'
});
}])
.controller('footerLink', ['$scope', '$location', function($scope, $location) {
$scope.goTo = function (url) {
$location.path(url);
};
}])
UPDATE
Instead of calling another function, I directly redirected the anchor to the firstPage route. Here is the updated code:
<footer ng-controller = "footerLink">
<a href = "#/firstPage"> Home </a>
<a href = "#"> About us </a>
<a href = "#"> Our Team </a>
<a href = "#"> Blog </a>
<a href = "#"> Services </a>
<a href = "#"> Portfolio </a>
<a href = "#"> Contact </a>
<a href = "#"> Sitemap </a>
</footer>