Nested views and child routes in AngularJS

In AngularJS, nested views and child routes allow us to create a structured and modular application by dividing different parts of the UI into smaller components. This is useful for applications with complex navigation structures like dashboards, multi-step forms, and user profiles.

---

1. Why Use Nested Views?

✔ Better Code Organization – Separate different sections of a page into smaller views.
✔ Reusable Components – Define reusable templates for different parts of the UI.
✔ Dynamic Content Loading – Load only the required sections instead of reloading the full page.

---

2. Setting Up ngRoute for Nested Views

To enable nested views, we use the $routeProvider along with multiple ng-view elements.

Step 1: Load Required AngularJS Modules

Ensure angular-route.js is included in your project:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>

---

Step 2: Configure Routes with Child Templates

Define the main parent view and its child views.

var app = angular.module("myApp", ["ngRoute"]);

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "home.html",
        controller: "HomeController"
    })
    .when("/dashboard", {
        templateUrl: "dashboard.html",
        controller: "DashboardController"
    })
    .when("/dashboard/profile", {
        templateUrl: "profile.html",
        controller: "ProfileController"
    })
    .when("/dashboard/settings", {
        templateUrl: "settings.html",
        controller: "SettingsController"
    })
    .otherwise({
        redirectTo: "/"
    });
}]);

How It Works:

• /dashboard loads dashboard.html (parent view).
• /dashboard/profile loads profile.html inside dashboard.html.
• /dashboard/settings loads settings.html inside dashboard.html.

---

Step 3: Create the Parent View (dashboard.html)

Inside dashboard.html, define the main layout with a nested ng-view.

<h2>Dashboard</h2>
<a href="#!/dashboard/profile">Profile</a> | 
<a href="#!/dashboard/settings">Settings</a>

<div ng-view></div>

How It Works:

• Clicking Profile or Settings will load content into the ng-view inside dashboard.html.

---

Step 4: Create Child Views

Profile View (profile.html)

<h3>User Profile</h3>
<p>This is the profile section.</p>

Settings View (settings.html)

<h3>Settings</h3>
<p>This is the settings section.</p>

---

Step 5: Define Controllers

app.controller("DashboardController", function($scope) {
    $scope.message = "Welcome to the Dashboard!";
});

app.controller("ProfileController", function($scope) {
    $scope.message = "This is the Profile page.";
});

app.controller("SettingsController", function($scope) {
    $scope.message = "This is the Settings page.";
});

---

3. Alternative Approach Using UI-Router (ui.router)

AngularJS also supports nested views using the ui-router module, which provides more flexibility.

Step 1: Include angular-ui-router

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

---

Step 2: Configure Routes with ui-router

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

app.config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");

    $stateProvider
    .state("home", {
        url: "/",
        templateUrl: "home.html",
        controller: "HomeController"
    })
    .state("dashboard", {
        url: "/dashboard",
        templateUrl: "dashboard.html",
        controller: "DashboardController"
    })
    .state("dashboard.profile", {
        url: "/profile",
        templateUrl: "profile.html",
        controller: "ProfileController"
    })
    .state("dashboard.settings", {
        url: "/settings",
        templateUrl: "settings.html",
        controller: "SettingsController"
    });
}]);

---

Step 3: Modify the Parent View

Use ui-view instead of ng-view for nested routing:

<h2>Dashboard</h2>
<a ui-sref="dashboard.profile">Profile</a> | 
<a ui-sref="dashboard.settings">Settings</a>

<div ui-view></div>

Why Use ui-router?

• More flexible for deeply nested views.
• Supports named views and dynamic parameters.
• Works well for single-page applications (SPA).

---

4. Summary of Nested Routing Approaches

Approach	Pros	Cons
$routeProvider (ngRoute)	Simple & easy to use	Limited to one view per route
ui-router (ui.view)	Supports multiple views	Requires additional setup