AngularJS : On click redirect to another page

You may also like to see:

• Learning AngularJS Series for beginners
• AngularJs : Set page title dynamically
• Best Resources to learn JavaScript

Besides the fact, AngularJs is Single Page Application, but we use URL routes for bookmarks and for better user experience. An application navigates around the different UI views for different features and actions. Since AngularJs is doesA it do not reload the complete page on each route change but it loads only the HTML for the current page and inject into our current page.

In AngularJs application if you want to redirect the application to another page of the application, and if your navigation element is an anchor tag then you can simply assign new route's URL to href attribute of the tag.

Dashboard

But if your element to navigate is not anchor tag then you need to write a scope function which redirects to your required page and you invoke this function on your element click.

 Drafts 

and define that function in controller as:

$scope.redirectToDraftPage= function () {
   $location.path('/draft');
};

As you can see it is really annoying to write a scope function for each navigator items. So best way to achieve redirection in AngularJs on element click is to write a directive for this.

Directives

Directives are the custom tags and attributes, it is a way to extend HTML functionality. You can teach HTML new features using directive tags. AngularJs have many directives like ng-show, ng-app, ng-repeat, ng-class, ng-hide and many more.

For more details on directive see this article.

Directives are HTML tags and attributes. These are the way to use AngularJS extended HTML functionality. Using directives you can teach HTML new features by writing your own custom directives. AngularJS comes with a bunch of built-in directives like ng-app, ng-hide,ng-show, ng-repeat, ng-class and many others.

Include a directive to your application, with restrict: 'A' defining that this directive is actually an extending Attribute, so whenever an element has this custom directive as attribute my defined functionality will be executed accordingly.

So what this directive will do? It will assign a click event to that particular element which has this attribute. And it will redirect to the provided route onclick of the element.

(function(){

    'use strict';

    function ngRedirectTo($window) {
        return {
            restrict: 'A',
            link: function(scope, element, attributes) {
                element.bind('click', function (event) {
                    //assign ng-Redirect-To attribute value to location
                    $window.location.href = attributes.ngRedirectTo;
                });
            }
        };
    }
    angular.module('app').directive('ngRedirectTo', ngRedirectTo);
    //inject $window service for redirection
    redirectTo.$inject = ['$window'];
}());

As naming convention for directive work as each camel-case word separated by hyphen( ie, - ). so our directive ngRedirectTo will be use in html as ng-Redirect-To. Here is the html:

 Dashboard 

So now you include this directive to your index page and you can reuse this in your whole application wherever you want to navigate. Just add this attribute to the element and assign the route to it.

If you have any feedback or suggestions or you want to add something to this article please post in comments.

You may also like to see:

• Learning AngularJS Series for beginners
• AngularJs : Set page title dynamically
• Best Resources to learn JavaScript