Angular JS Magazine

luni, 15 septembrie 2014

Using Controller Inheritance

In this tip you can see how to avoid code duplication by using controller inheritance, This feature can be used by using the ng-controller directive nested in HTML elements. The scopes of the child controllers inherit the data and behaviors of the parent controller scope.
Below we have the atpMainCtrl, which is a controller used at body level, the atpFirstCtrl controller, which is used at div level under the body level, and atpSecondCtrl which is used at a sub-div of the previous div. So, if we say that atpMainCtrl = A, atpFirstCtrl  = B and atpSecondCtrl  = C, then:

 - A is the main controller, doesn't inherit other controller
 - B is a child of A
 - C is a child of B and A

<!DOCTYPE html>
<html ng-app="atpModule">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <script>
        angular.module("atpModule", [])
                .controller("atpMainCtrl", function ($scope) {
                    $scope.atp = [
                        { name: 'Nadal, Rafael (ESP)', email: 'nadalrafael@gmail.com', birthplace: 'Manacor, Mallorca, Spain' },
                        { name: 'Djokovic, Novak (SRB)', email: 'djokovicnovak@gmail.com', birthplace: 'Belgrade, Serbia' },
                        { name: 'Federer, Roger (SUI)', email: 'federerroger@gmail.com', birthplace: 'Basel, Switzerland' },
                        { name: 'Wawrinka, Stan (SUI)', email: 'wawrinkastan@gmail.com', birthplace: 'Lausanne, Switzerland' },
                        { name: 'Ferrer, David (ESP)', email: 'ferrerdavid@gmail.com', birthplace: 'Javea, Spain' }
                    ];

                    $scope.namesToUpperCase = function () {
                        angular.forEach($scope.atp, function (value, key) {
                            value.name = value.name.toUpperCase();
                        });
                    }

                    $scope.namesToLowerCase = function () {
                        angular.forEach($scope.atp, function (value, key) {
                            value.name = value.name.toLowerCase();
                        });
                    }
                })
                .controller("atpFirstCtrl", function ($scope) {
                    $scope.namesAndEmailsToUpperCase = function () {
                        $scope.namesToUpperCase();
                        angular.forEach($scope.atp, function (value, key) {
                            value.email = value.email.toUpperCase();
                        });
                    }

                    $scope.namesAndEmailsToLowerCase = function () {
                        $scope.namesToLowerCase();
                        angular.forEach($scope.atp, function (value, key) {
                            value.email = value.email.toLowerCase();
                        });
                    }
                })
                .controller("atpSecondCtrl", function ($scope) {
                    $scope.namesEmailsAndBirthplaceToUpperCase = function () {
                        $scope.namesToUpperCase();
                        $scope.namesAndEmailsToUpperCase();
                        angular.forEach($scope.atp, function (value, key) {
                            value.birthplace = value.birthplace.toUpperCase();
                        });
                    }

                    $scope.namesEmailsAndBirthplaceToLowerCase = function () {
                        $scope.namesToLowerCase();
                        $scope.namesAndEmailsToLowerCase();
                        angular.forEach($scope.atp, function (value, key) {
                            value.birthplace = value.birthplace.toLowerCase();
                        });
                    }
                });
    </script>
</head>
<body ng-controller="atpMainCtrl">
<div>
    <div id="atpMainPanel" class="panel">
        <h4 class="panel-header">ATP SINGLES RANKINGS (main controller)</h4>
        <table class="table">
            <thead>
            <tr>
                <th>Name</th>
                <th>E-mail</th>
                <th>Birthplace</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in atp">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td>{{item.birthplace}}</td>
            </tr>
            </tbody>
        </table>
        <button class="btn btn-default" type="button" ng-click="namesToUpperCase()">Names To Upper Case</button>
        <button class="btn btn-default" type="button" ng-click="namesToLowerCase()">Names To Lower Case</button>
    </div>
</div>
<div ng-controller="atpFirstCtrl">
    <div id="atpFirstPanel" class="panel">
        <h4 class="panel-header">ATP SINGLES RANKINGS (first controller inherits main controller)</h4>
        <table class="table">
            <thead>
            <tr>
                <th>Name</th>
                <th>E-mail</th>
                <th>Birthplace</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in atp">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td>{{item.birthplace}}</td>
            </tr>
            </tbody>
        </table>
        <button class="btn btn-default" type="button" ng-click="namesAndEmailsToUpperCase()">Names And E-mails To Upper
            Case
        </button>
        <button class="btn btn-default" type="button" ng-click="namesAndEmailsToLowerCase()">Names And E-mails To Lower
            Case
        </button>
    </div>
    <div ng-controller="atpSecondCtrl">
        <div id="atpSecondPanel" class="panel">
            <h4 class="panel-header">ATP SINGLES RANKINGS (second controller inherits first controller)</h4>
            <table class="table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>E-mail</th>
                    <th>Birthplace</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in atp">
                    <td>{{item.name}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.birthplace}}</td>
                </tr>
                </tbody>
            </table>
            <button class="btn btn-default" type="button" ng-click="namesEmailsAndBirthplaceToUpperCase()">Names,
                E-mails
                And Birthplaces To Upper
                Case
            </button>
            <button class="btn btn-default" type="button" ng-click="namesEmailsAndBirthplaceToLowerCase()">Names,
                E-mails
                And Birthplaces To Lower
                Case
            </button>
        </div>
    </div>
</div>
</body>
</html>