Monday, January 19, 2015

AngularJS : On click redirect to another page

You may also like to see:

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:

    6 comments:

    1. Why use the $window service rather than $location?

      ReplyDelete
    2. Nice post.I like the way you start and then conclude your thoughts. Thanks for this information .I really appreciate your work, keep it up. Application Development using Angularjs

      ReplyDelete
    3. How do i add the links? and could u pls post the html page as well?

      ReplyDelete
    4. Thanka a tonnn!!!!! but i will still repeat the question why not $location??? $window is used when we want to redirect to external links. I don't have that requirement. I tried replacing $window with $location in your solution but its not working.

      ReplyDelete
    5. hi. you can for me about code (html & css) bellow

      i want done as you (format it)


      01
      (function(){
      02

      03
      'use strict';
      04

      05
      function ngRedirectTo($window) {
      06
      return {
      07
      restrict: 'A',
      08
      link: function(scope, element, attributes) {
      09
      element.bind('click', function (event) {
      10
      //assign ng-Redirect-To attribute value to location
      11
      $window.location.href = attributes.ngRedirectTo;
      12
      });
      13
      }
      14
      };
      15
      }
      16
      angular.module('app').directive('ngRedirectTo', ngRedirectTo);
      17
      //inject $window service for redirection
      18
      redirectTo.$inject = ['$window'];
      19
      }());


      thank you. ^-^

      ReplyDelete

    Life insurance policy, bank loans, software, microsoft, facebook,mortgage,policy,