--- title: Effective Routing & Navigation in AngularJS Application description: AngularUI Router is a routing framework for AngularJS, mainly developed to improve as well as enhance routing capabilities. --- [![e-Zest logo\_An accion lab company\_Colour](https://blog.e-zest.com/hubfs/images/Logos%20with%20Tagline/Corporate/SVG/e-Zest%20logo_An%20accion%20lab%20company_Colour.svg "e-Zest logo_An accion lab company_Colour")](https://www.e-zest.com/) - [WORK](https://www.e-zest.com/our-work) - [SERVICES](https://www.e-zest.com/our-services) - [Product Engineering](https://www.e-zest.com/digital-product-engineering-services) - [Enterprise Data Services](https://www.e-zest.com/enterprise-data-services) - [Digital Commerce](https://www.e-zest.com/digital-commerce-services) - [Digital Operations](https://www.e-zest.com/digital-operations) - [Digital Consulting](https://www.e-zest.com/digital-transformation-consulting-services) - [Digital Experience Design](https://www.e-zest.com/digital-experience-design) - [INSIGHTS](https://blog.e-zest.com/) - [CAREERS](https://www.e-zest.com/careers) - [ENTERPRISE DATA SERVICES](https://www.e-zest.com/enterprise-data-services) - [GENERATIVE AI](https://www.e-zest.com/generative-ai) - [Healthcare](https://healthcare.e-zest.com) - [Contact Us](https://www.e-zest.com/contact-us) - ![Elevating Product Engineering with AI and ML](https://blog.e-zest.com/hubfs/Elevating%20Product%20Engineering%20with%20AI%20and%20ML.jpg) [BLOGS](https://blog.e-zest.com) #### Elevating Product Engineering with AI and ML As technology evolves and customer choices broaden, there is an increasing ... [Read more](https://blog.e-zest.com/elevating-product-engineering-with-ai-and-ml) - ![e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024](https://blog.e-zest.com/hubfs/e-Zest%20%E2%80%93%20An%20Accion%20Labs%20Company%20-%20Gets%20Recognition%20as%20a%20Contender%20in%20the%20ISG%20Provider%20LensTM%20Study%20on%20Digital%20Engineering%20Services%202024.jpg) [NEWS](https://blog.e-zest.com/news) #### e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024 We are delighted to announce that e-Zest – An Accion Labs Company has been ... [Read more](https://blog.e-zest.com/news/e-zest-an-accion-labs-company-gets-recognition-as-a-contender-in-the-isg-provider-lens-study-on-digital-engineering-services-2024) - ![e-Zest Solutions supports Digital Pune Mission](https://blog.e-zest.com/hubfs/blog-files/Digital%20Literacy%20Bus%20e-Zest.png) [CSR](https://blog.e-zest.com/csr) #### e-Zest Solutions supports Digital Pune Mission **Pune, India:** e-Zest Solutions, a leading digital technology innovation ... [Read more](https://blog.e-zest.com/csr/e-zest-solutions-supports-digital-pune-mission) - [Work](https://www.e-zest.com/our-work) - [Services](https://www.e-zest.com/our-services) - [Insights](https://blog.e-zest.com) - [Careers](https://www.e-zest.com/careers) - [Enterprise Data](https://www.e-zest.com/enterprise-data-services) - [Generative AI](https://www.e-zest.com/generative-ai) - [Innovations](https://www.e-zest.com/innovations) - [Healthcare](https://healthcare.e-zest.com) - [About](https://www.e-zest.com/about-us) - [Contact](https://www.e-zest.com/contact-us) - [Blog](https://blog.e-zest.com/) - [News](https://blog.e-zest.com/news) - [CSR](https://blog.e-zest.com/csr) - [![Linkedin Icon](https://blog.e-zest.com/hubfs/icons/linkedin_icon_white.svg)](https://www.linkedin.com/company/e-zest-solutions/) - [![Twitter Icon](https://blog.e-zest.com/hubfs/twitter-logo-silhouette%20(5).svg)](https://twitter.com/ezest) - [![Facebook Icon](https://blog.e-zest.com/hubfs/facebook-app-logo%20(4).svg)](https://www.facebook.com/61259256638) - [![Instagram Icon](https://blog.e-zest.com/hubfs/instagram-logo%20(4).svg)](https://www.instagram.com/ezestsolutions/) - [![Youtube Icon](https://blog.e-zest.com/hubfs/icons/youtube_icon_white.svg)](https://www.youtube.com/user/ezestcorporate) [![Go to top icon](https://blog.e-zest.com/hubfs/AA%20Assets/top%20button.svg)](https://blog.e-zest.com/effective-routing-navigation-in-angularjs-application#top) Hit enter to search or ESC to close Insights e-Zest members share technology ideas to foster digital transformation. - [Blog](https://blog.e-zest.com) - [News](https://blog.e-zest.com/news) - [Podcasts](https://www.e-zest.com/podcasts) - [Healthcare](https://blog.e-zest.com/healthcare) - [CSR](https://blog.e-zest.com/csr) - [Whitepaper](https://blog.e-zest.com/whitepaper) - [Playbook](https://blog.e-zest.com/playbook) - [Media Kit](https://www.e-zest.com/media-kit) # Effective Routing & Navigation in AngularJS Application [Ashwini Eksambekar](https://blog.e-zest.com/author/ashwini-eksambekar) Nov 09, 2016 [AngularJS](https://blog.e-zest.com/topic/angularjs) [Routing](https://blog.e-zest.com/topic/routing) [Navigation](https://blog.e-zest.com/topic/navigation) [AngularUI Router](https://blog.e-zest.com/topic/angularui-router) - - - - AngularUI Router is a routing framework for AngularJS, mainly developed to improve as well as enhance routing capabilities. It allows us to well organize the parts of application interface into a state machine. UI-Router is state-based framework making routing and UI navigation easier and manageable. The $route service in Angular core is organized around URL routes whereas UI-Router is organized around states. It may optionally have routes and other behaviour, attached with it. States are bound to named, nested and parallel views that allow us to powerfully manage our application's interface Initial steps to use AngularUI Router : 1. Simply, we can download angular-ui-router.js file from link [http://angular-ui.github.io/ui-router/release/angular-ui-router.js](http://angular-ui.github.io/ui-router/release/angular-ui-router.js) or angular-ui-router.min.js (minified file) from link [http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js](http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js) . 1. Include angular-ui-router.js (or angular-ui-router.min.js) in your index.html file where we include AngularJS itself Configuring our application with AngularUI Router : Let’s begin configuring our application with AngularUI Router. 1. Inside of our app.js file, we need to add a dependency on the ui-router to our main angular module. e.g. angular.module ( ‘ myUiRoutingApp ’ ,  \[ 'ui.router'\] )       2. After that we need to inject $stateProvider and $urlRouterProvider into our config object. angular.module(‘myUiRoutingApp’, \['ui.router'\]) .config (\[ '$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider ) { $urlRouterProvider.otherwise('/home'); $stateProvider .state ('home', { url: "/home", templateUrl: "modules/main/views/home.html" }) .state ('user', { url: "/user", templateUrl: "modules/user/views/user.html" }) .state ('user.newUser', { url: "/newUser'", templateUrl: "modules/user/views/newUser.html" }) } \]); In example above $urlRouterProvider.otherwise(), is used to map our application to home state by default whereas $stateProvider is used to define states. A state is nothing but a place in the application in terms of the overall UI and navigation perspective. It describes view (html template) it renders as well as how and what UI looks like at that place. // $stateProvider ‘s state() method take unique stateName (String) and a stateConfig (Object) $stateProvider.state( stateName, stateConfig); Let’s have a look at some parameters often used to define state object. These parameters for $stateProvider‘s .state () method are: - **stateName (String)** This is unique name describing state, e.g. "home”, “settings” etc. Usually stateName corresponds to view it renders. For having an inheritance based nesting of states that is for creating parent/child states, we use a dot notation. Example**:** "settings.profile", "user.newUser". Such states are defined when using nested states and nested views. - **stateConfig (Object)** The stateConfig object can be defined using following properties. - **template –** It represents String HTML content, or function that returns an HTML content . - **templateUrl** – It represents String URL path to HTML template file OR the directive will automatically generate & update the href function which returns URL path string. - **templateProvider –** It represents function that  returns HTML content string. - **Controller –** It represents a controller paired to the state as controller function or its name as string - **controllerProvider –** It represents Function (injectable) that returns the actual controller function or string. - **resolve –** The resolve object corresponds to a map of dependencies which should be injected into the controller. This has following format. 1. keys – Refers to name of dependency to be injected into controller 2. factory – \[string|function\] When given as string then it is alias for service. And when given as function being injected and returning value, then that value is treated as dependency. In case if result is a promise, it is resolved before value is injected into controller - **views** – It refers to object defining view This views property is used to set up multiple views. If we don't need multiple views within a single state then no need to use this property. Often using nested views is more useful and powerful than using multiple sibling views. This views object has following format. 1. keys – (string) name of ui-view 2. view object– (object) view configuration object set up uses its own templates and respective controllers.       3. Now we can add a ui-view directive to the \ of our app. the ui-view is directive provided by the ui.router module. The ui-view directive gives information to $state like where to place our (views) templates. A view can be unnamed or named. We can only have one unnamed view within any template. For having multiple views, we can do setup views property of $stateProvider’s state and use named views with ui-view directive. This can be better illustrated with following example. \
\ \
\ \
\ $stateProvider.state ("home", {     views: {         "headerPanel": {             template: "\ Header data \"         },         "mainView": {             template: “\ main view data \"         },         "footerPanel": {             template: "\ Footer data \"         }     }          4. Further we can use ui-sref directive while navigation to particular state. This directive binds a link (\ anchor tag) to a state. If the state has an associated URL with it, then ui-sref directive automatically create and update the href attribute by using $state.href() method. Thus, click event to such a link will trigger a state transition with optional parameters. **Example:** HTML Template using ui-sref directive : \Home\ \New User\ AngularUI Router usage benefits: Ui-Router supports not only ngRoute but also adds many extra routing features. - ui-router allow us to have nested views & multiple named views. This feature is very useful with larger web apps where we may have pages which inherit from other different sections. - ui-router provides us strong-type linking between states with state names. Any change in the url in one place thus updates every link to that state when we build our links using ui-sref For larger projects where possibly URLs might change, this feature plays vital role. - States allow us to map, configure and access different information about different states and we can easily pass information between these states via $stateParams. - With ui-router, state transitions can be performed effectively using $state.go() or $state.transitionTo() etc. methods. State Change Events can be used as per application need. These are fired at rootScope level and are as follows: - $stateChangeStart - This event is fired when any state transition begins. - $stateNotFound - This event is fired when a requested state is not found on using its provided state name during any state transition. - $stateChangeSuccess - This event is fired once the state transition process completes. - $stateChangeError - This event is fired when any error occurs while state transition process. Thus, In AngularJS applications for effective routing and navigation ui-router usage will be helpful. - - - ### Similar Blog [![Using Protractor for AngularJS Automation Testing](https://blog.e-zest.com/hubfs/Using-protractor-for-angularjs-automation-testing.jpg) Using Protractor for AngularJS Automation Testing In our application, which is built using AngularJS, we required to write an automated script that is supposed to run on headless ... By Kaveri Solapure Dec 06, 2017](https://blog.e-zest.com/using-protractor-for-angularjs-automation-testing) [![Dynamic Expression Tree Builder](https://blog.e-zest.com/hubfs/Dynamic-Expression-Tree-Builder-.png) Dynamic Expression Tree Builder In enterprise when applications are developed using Entity Framework it is always essential to have a generic code which can be ... By Alhad Alsi Jun 07, 2017](https://blog.e-zest.com/dynamic-expression-tree-builder) [Angular 4 is here! By skipping the Angular 3 version, Google surprised everyone with the announcement of Angular 4, a latest advancement to mobile ... By Corporate Mar 28, 2017](https://blog.e-zest.com/angular-4-is-here) [User authentication & access privilege checking in AngularJS application **Introduction:** By Ashwini Eksambekar Jan 30, 2017](https://blog.e-zest.com/user-authentication-access-privilege-checking-in-angularjs-application) [AngularJS Modularization & Dependency Injection AngularJS provides a built-in dependency injection mechanism. Using dependency injection mechanism you can split your application ... By Sudha Thorat Dec 12, 2016](https://blog.e-zest.com/angularjs-modularization-dependency-injection) [![Achieving optimal speed & performance of AngularJS application](https://blog.e-zest.com/hubfs/ipsita-achieving-optimal-speed-and-performance-of-angularjs-application-20170912.png) Achieving optimal speed & performance of AngularJS application AngularJS, being one of the most famous modern web application frameworks, provides us various magic features like two-way ... By Ashwini Eksambekar Sep 14, 2017](https://blog.e-zest.com/achieving-optimal-speed-performance-of-angularjs-application) [User authentication & access privilege checking in AngularJS application **Introduction:** By Ashwini Eksambekar Jan 30, 2017](https://blog.e-zest.com/user-authentication-access-privilege-checking-in-angularjs-application) ## Helping Organizations Thrive in the Digital Age [Contact Us](https://www.e-zest.com/contact-us) - [About](https://www.e-zest.com/about-us) - [Services](https://www.e-zest.com/our-services) - [Work](https://www.e-zest.com/our-work) - [Insights](https://blog.e-zest.com/) - [Healthcare](https://healthcare.e-zest.com/) - [Accion Labs](https://www.accionlabs.com/) - - - - - - Dallas - Detroit - Hannover - Vienna - London - Pune © 2025 e-Zest Solutions - [Privacy Policy](https://www.e-zest.com/privacypolicy) - [Cookie Policy](https://www.e-zest.com/cookie-policy) Contact us Contact us e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.