Nested Controller example in AngularJS

Last Reply one year ago By dharmendr

Posted one year ago

Is it possible to use nested controller in angularjs

What scenarios we use it

Posted one year 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/