What is UI Routing in Angular JS?

Manish Sharma 691 19 May 2024

What is UI-Routing in Angular JS, Explain with examples.

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

1 Answers

Anubhav Sharma 19 May 2024

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.

forum

What is UI Routing in Angular JS?

Can you answer this question?

1 Answers

Summary