Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / what is ui routing in angular js?
Ask Question
Manish Sharma
Manish Sharma

Admin

When you can't control what's happening, challenge yourself to control the way you respond to what's happening. That's where your power is! Sometimes we need fantasy to survive reality. There is great beauty in simplicity

Message

1 Answers

Anubhav Sharma
Anubhav Sharma 19 May 2024
Report Abuse

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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.29/angular-ui-router.min.js"></script>

Define the module dependency: Include ui.router as a dependency in your AngularJS application module.

var app = angular.module('myApp', ['ui.router']);

Configure the states: Use the $stateProvider and $urlRouterProvider to define your states.

<script>
    var app = angular.module('myApp', ['ui.router']);

    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        console.log($stateProvider, $urlRouterProvider);
        $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home.html',
                controller: 'HomeController'
            })
            .state('about', {
                url: '/about',
                templateUrl: 'about.html',
                controller: 'AboutController'
            });
    }]);
</script>

Create the controllers and templates: This step remains the same as with ngRoute.

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.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>AngularJS UI-Router Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.29/angular-ui-router.min.js"></script>
</head>

<body>
    <nav>
        <a ui-sref="home">Home</a>
        <a ui-sref="about">About</a>
    </nav>
    <ui-view></ui-view>
</body>
<script>
    var app = angular.module('myApp', ['ui.router']);
    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        console.log($stateProvider, $urlRouterProvider);
        $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home.html',
                controller: 'HomeController'
            })
            .state('about', {
                url: '/about',
                templateUrl: 'about.html',
                controller: 'AboutController'
            });
    }]);
    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!';
    }]);
</script>

</html>

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.

MindStick Training