You may also like to see:

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

Beside the fact AngularJs is Single Page Application, but we use routes for bookmarks and for better user experience. Any application move around different UI views on for different actions or features to perform. Since AngularJs is SPA it do not reload complete page on each route change but it loads only the html for current page and inject into our current page.

In AngularJs application if you want to redirect application to another page of 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 redirect 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, way to extend HTML functionality. You can teach HTML new features using 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 a extending Attribute, so whenever a element have 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 eace camel-case word separated by hyphen( ie, - ). so our directive ngRedirectTo will be use in html as ng-Redirect-To. Here is 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 element and assign 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