Sign in Subscribe
AngularJS

Nested Views in AngularJS UI-Router: A Complete Guide (2026)

Learn how to implement nested views using AngularJS UI-Router in this comprehensive guide, enhancing your app's structure and user experience.

kavin sharma

• 3 min read
Nested Views in AngularJS UI-Router: A Complete Guide (2026)

Nested Views in AngularJS UI-Router: A Complete Guide (2026)

AngularJS remains a popular choice for developers working on single-page applications (SPAs) due to its powerful features and ease of use. One of its most useful features is the ability to create nested views using the UI-Router. In this guide, we'll explore how to effectively implement nested views in an AngularJS application.

Key Takeaways

  • Understand the basics of AngularJS UI-Router for managing states and views.
  • Learn how to configure nested views to create a dynamic user interface.
  • Implement a simple application with a header and dynamic body content using nested views.
  • Debug common issues faced while implementing nested views in AngularJS.

This tutorial will guide you through setting up nested views in a sample AngularJS application. Specifically, we will create a simple application with a header, a main content area displaying a login form or password reset form based on the URL. This approach allows for a modular and maintainable code structure, making your application scalable and easier to manage.

Prerequisites

  • Basic understanding of AngularJS and JavaScript.
  • Familiarity with HTML and CSS.
  • AngularJS (v1.8) and UI-Router installed in your project.

Step 1: Set Up the Project Structure

First, ensure that you have AngularJS and UI-Router included in your project. You can include them via CDN links in your index.html:

<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.28/angular-ui-router.min.js"></script>

Next, create the basic structure for your application:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Nested Views</title>
</head>
<body>
    <header ui-view="header"></header>
    <div class="container-fluid">
        <div class="row">
            <div ui-view="main"></div>
        </div>
    </div>
</body>
</html>

Step 2: Define the Application Module and Routes

In your main JavaScript file, define the AngularJS module and configure the UI-Router:

angular.module('myApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode({enabled: true, requireBase: false});
    
    $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: 'header.html'
                },
                'main': {
                    templateUrl: 'home.html'
                }
            }
        })
        .state('home.login', {
            url: 'login',
            templateUrl: 'login.html'
        })
        .state('home.passwordForget', {
            url: 'password/forget',
            templateUrl: 'password-forget.html'
        });
    
    $urlRouterProvider.otherwise('/');
});

Here, we define multiple states, including nested states like home.login and home.passwordForget. This structure allows us to control what content is displayed in the main view based on the URL.

Step 3: Create the Templates

Create separate HTML files for each template. These templates will be loaded into the ui-view elements defined in your index.html.

<!-- header.html -->
<nav>
    <h1>My App Header</h1>
</nav>
<!-- home.html -->
<div>
    <ui-view></ui-view>
</div>
<!-- login.html -->
<div>
    <h2>Login Form</h2>
    <form>
        <!-- Login form fields -->
    </form>
</div>
<!-- password-forget.html -->
<div>
    <h2>Password Reset Form</h2>
    <form>
        <!-- Password reset form fields -->
    </form>
</div>

Step 4: Testing the Application

Run your application in a local server environment. Navigate to the root URL, and you should see the header and a placeholder for the main content. By navigating to /login or /password/forget, the corresponding forms should appear in the main view.

This setup provides a clean separation of concerns, allowing different parts of the application to be managed independently.

Common Errors/Troubleshooting

  • 404 Errors on Routes: Ensure the templateUrl paths are correct and the files are located in the right directory.
  • Views Not Loading: Double-check that your state names and ui-view names match exactly.
  • HTML5 Mode Issues: If encountering problems with URL routing, verify that your server is configured to redirect all requests to index.html.

Frequently Asked Questions

What is the benefit of using nested views?

Nested views allow for more structured and manageable code, enabling different parts of an application to be updated independently.

Can I use UI-Router with AngularJS 1.x?

Yes, UI-Router is compatible with AngularJS 1.x and offers advanced state management capabilities.

Why use HTML5 mode in UI-Router?

HTML5 mode removes the hash (#) from URLs, providing cleaner and more user-friendly URLs.

Frequently Asked Questions

What is the benefit of using nested views?

Nested views allow for more structured and manageable code, enabling different parts of an application to be updated independently.

Can I use UI-Router with AngularJS 1.x?

Yes, UI-Router is compatible with AngularJS 1.x and offers advanced state management capabilities.

Why use HTML5 mode in UI-Router?

HTML5 mode removes the hash (#) from URLs, providing cleaner and more user-friendly URLs.

Sign up for more like this.

Enter your email
Subscribe