AngularJs Routing Using Ui-Router

AngularJs Routing Using Ui-Router

AngularJs is used for create single page applications. While creating single page applications routing is very important. In this article explains how to setup routing using Ui-Router. Ui-Router is 3rd party routing framework developed by Angular UI team. There are many advantages are there while using Ui-Router instead of using ng-route. Ui-Router allows nested views and it is works based on state not url. Following below simple example explains how to work Ui-Router.

File structure :

angularjs-ui-routing

The above structure describes the file structure for this example. You may also put these files in single folder but that is not a good practice. Separate the css,js and templatesfiles into appropriate folders.

index.html :

In the above index.html file is the only single file is used develop entire application. All required files are incorporate between “<div ui-view></div>” based on state defined in routing. All the required files for this application are included in between “<head></head>”.

app.js :

This is file is the root file. In this file the application is initialized and loads the required dependencies.

route.js :

This is the route configuration file. Based on this file angular application will works.

templates :

This folder contains all the templates which are used for angular application.