CODEWITHSUNDEEP
javascriptangularjs
user4982150
user4982150

Reputation:

AngularJS $routeProvider issue

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>

Upvotes: 0

Views: 99

Answers (1)

Ammadu
Ammadu

Reputation: 1675

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>

Upvotes: 2

Related Questions