Best Way To Highlight Current Menu Item With Angular Js

While working with single page application architecture with angular js its very common requirement to highlight or add selected class to current menu item.
Mentioned below is one of the easiest way to add selected class which I prefer, if you guys have any other methods or suggestions please feel free to add your comments.

HTML CodeĀ for header section which contains menu itemĀ -

 

App.js File – (As per anuglar js documentation you should keep all controllers in different files to follow standard directory structure but for this blog I have kept it in single file to make it simple)

 

As you can see currentPage variable is added as a rootScope of application so that it would be accessible in all available controllers.

$rootScope.currentPage is declared in run method so it will be initialized in every page request.

Kindly add your comments if further details required.

 

Leave a Reply

Your email address will not be published. Required fields are marked *