---
title: "What is UI Routing in Angular JS?"
description: "What is UI Routing in Angular JS?"
author: "Manish Sharma"
published: 2024-05-19
updated: 2024-05-20
canonical: https://www.mindstick.com/forum/160661/what-is-ui-routing-in-angular-js
category: "angular js"
tags: ["javascript", "angular js", "javascript framework", "front-end development"]
reading_time: 2 minutes
---
# What is UI Routing in Angular JS?
What is UI-[Routing](https://www.mindstick.com/articles/11998/attribute-routing-in-asp-dot-net-mvc) in [Angular](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project) JS, [Explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems) with examples.
## Replies
### Reply by Anubhav Sharma
The **UI-router** module is more flexible and powerful than **ngRoute**, supporting nested views, multiple-named views, and other advanced features.
**Include the ui-router module:** Include the **angular-ui-router.js** script in your HTML file.
```javascript
```
**Define the module dependency:** Include **ui.router** as a dependency in your AngularJS application module.
```javascript
var app = angular.module('myApp', ['ui.router']);
```
**Configure the states:** Use the **$stateProvider** and **$urlRouterProvider** to define your states.
```javascript
```
**Create the controllers and templates:** This step remains the same as with **ngRoute**.
```javascript
app.controller('HomeController', ['$scope', function ($scope) {
$scope.message = 'Welcome to the Home Page!';
}]);
app.controller('AboutController', ['$scope', function ($scope) {
$scope.message = 'Learn more About Us!';
}]);
```
**Set up the main HTML file:** Use **ui-view** to display the routed content.
```html
AngularJS UI-Router Example
```
### Summary
Routing in AngularJS allows you to create a smooth, single-page application experience by defining multiple views and associating them with specific URLs. The **ngRoute** module is suitable for simple applications, while **ui-router** is better for more complex applications that require advanced routing features. By following the steps outlined above, you can set up and manage routing in your AngularJS applications efficiently.
Thank you.
---
Original Source: https://www.mindstick.com/forum/160661/what-is-ui-routing-in-angular-js
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.