Nested Controller example in AngularJS

Last Reply 7 months ago By dharmendr

Posted 7 months ago

Is it possible to use nested controller in angularjs

What scenarios we use it

Posted 7 months ago

Hi rani,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AngularJS Nested Controller</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        app = angular.module('MyApp', [])
        app.controller("CustomerController", function () {
            this.Message = 'This is Customer Controller';
            this.Customers = [
                { Id: 1, Name: "John Hammond", Country: "United States" },
                { Id: 2, Name: "Mudassar Khan", Country: "India" },
                { Id: 3, Name: "Suzanne Mathews", Country: "France" },
                { Id: 4, Name: "Robert Schidner", Country: "Russia" }
            ];
        });

        app.controller("EmployeeController", function () {
            this.Message = 'This is Employee Controller';
            this.Employees = [
                { Id: 1, Name: "Nancy Davolio" },
                { Id: 2, Name: "Andrew Fuller" },
                { Id: 3, Name: "Janet Leverling" },
                { Id: 4, Name: "Margaret Peacock" }
            ];
        });
    </script>
</head>
<body>
    <div ng-app='MyApp' ng-controller='CustomerController as Customer'>
        <div class='container'>
            <h1>{{Customer.Message}}</h1>
            <table>
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody ng-repeat="customer in Customer.Customers">
                    <tr>
                        <td>{{customer.Id }}</td>
                        <td>{{customer.Name }}</td>
                        <td>{{customer.Country }}</td>
                    </tr>
                </tbody>
            </table>
            <hr />
            <div ng-controller='EmployeeController as Employee'>
                <h2>{{Employee.Message}}</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody ng-repeat="employee in Employee.Employees">
                        <tr>
                            <td>{{employee.Id }}</td>
                            <td>{{employee.Name }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Demo

For more details refer below link.

https://www.c-sharpcorner.com/article/angularjs-nested-scopes-and-controllers-as-syntax/