0

When I click on the Home link, the goTo function is executed. However, it redirects me to a blank page like so:

page

When I click on the browser's back button, it redirects me to the page I wanted to go to (firstPage).

enter image description here

Any suggestions on what I am doing wrong?

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

I directly redirected the anchor to the firstPage route instead of calling another function. Here is what I changed to make it work:

<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>
Improve this question

1 Answer 1

Reset to default
2

it is because you do not have a redirection rule or a route configuration for '/' you can redirect the user to home if there is no matching route.

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' }).otherwise({redirectTo: '/home'}); }]) .controller('footerLink', ['$scope', '$location', function($scope, $location) { $scope.goTo = function (url) { $location.path(url); }; // this function is not really required }]);

and instead of creating another function to redirect user you can use the use the href on html as you are not doing any other processing there except redirecting user.

<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>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I don't think that is why it is not working because all other routes are working except for the firstPage route.
do you get any error? have you tried checking if goTo function is called? i.e. console.log within the function