angularJS-tutorial/lab19.html at master · eramitmishra/angularJS-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!-- AngularJS $watch() , $digest() and $apply() -->
<!-- The AngularJS $scope functions $watch(), $digest() and $apply() are some of the central functions in AngularJS. Understanding $watch(), $digest() and $apply() is essential in order to understand AngularJS.

When you create a data binding from somewhere in your view to a variable on the $scope object, AngularJS creates a "watch" internally. A watch means that AngularJS watches changes in the variable on the $scope object. The framework is "watching" the variable. Watches are created using the $scope.$watch() function which I will cover later in this text.

At key points in your application AngularJS calls the $scope.$digest() function. This function iterates through all watches and checks if any of the watched variables have changed. If a watched variable has changed, a corresponding listener function is called. The listener function does whatever work it needs to do, for instance changing an HTML text to reflect the new value of the watched variable. Thus, the $digest() function is what triggers the data binding to update.

Most of the time AngularJS will call the $scope.$watch() and $scope.$digest() functions for you, but in some situations you may have to call them yourself. Therefore it is really good to know how they work.

The $scope.$apply() function is used to execute some code, and then call $scope.$digest() after that, so all watches are checked and the corresponding watch listener functions are called. The $apply() function is useful when integrating AngularJS with other code.

I will get into more detail about the $watch(), $digest() and $apply() functions in the remainder of this text.

     -->

<!DOCTYPE html>
<html ng-app="mainWacth">
<head>
    <title>AngularJS $watch() , $digest() and $apply()</title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="Scripts/angular.min.js"></script>
    <script>
        var mainApp = angular.module("mainWacth", [])
            .controller("cntrlMain", ['$scope', 'orderByFilter',

            function ($scope, orderBy) {
                $scope.number = 3;
                $scope.Quantity = 2;
                $scope.UnitPrice = 40;
                $scope.$watch(function ($scope) {
                    return $scope.Quantity;
                }, function (nev, olv) {
                    $scope.TotalPrice = nev * $scope.UnitPrice;
                });

                $scope.products = [
                                    {
                                        "name": "p1", "price": "15", "quantity": "60", "InStock": 90
                                    },
                                    {
                                        "name": "p2", "price": "25", "quantity": "41", "InStock": 100
                                    }
                                    ,
                                    {
                                        "name": "p3", "price": "20.10", "quantity": "14", "InStock": 100
                                    }
                                    ,
                                    {
                                        "name": "p4", "price": "25.52", "quantity": "41", "InStock": 120
                                    }
                ];
                $scope.StockLimit = 30;
                $scope.propertyName = 'name';
                $scope.reverse = false;
                $scope.products = orderBy($scope.products, $scope.propertyName, $scope.reverse);
                $scope.sortBy = function (propertyName) {
                    $scope.reverse = (propertyName !== null && $scope.propertyName === propertyName)
                        ? !$scope.reverse : false;
                    $scope.propertyName = propertyName;
                    $scope.products = orderBy($scope.products, $scope.propertyName, $scope.reverse);
                };


                $scope.$watchCollection(function ($scope) {
                    return $scope.products[0];
                }, function (newValue, oldValue) {
                    debugger;
                });
            }

            ]);
    </script>
    <style>

        .sortorder:after {
  content: '\25b2';
}
.sortorder.reverse:after {
  content: '\25bc';
}
    </style>
</head>
<body class="container">
    <div class="jumbotron">AngularJS $watch(), $digest() and $apply()</div>
    <div class="alert alert-success">
        <p>The $scope.watch() function creates a watch of some variable. When you register a watch you pass two functions as parameters to the $watch() function:</p>
        <ul>
            <li>A value function</li>
            <li>A listener function</li>
        </ul>
        <pre>
        <b>Here is an example:</b>
        <code>
        $scope.$watch(
            function(scope) {}, <code><b>Value Funtion: </b>The value function should return the value which is being watched.</code>
            function(newValue,oldValue) {} <code><b>Listener Funtion: </b>The listener function should do whatever it needs to do if the value has changed.</code>
        );
        </code>
    </pre>
    </div>

    <div ng-controller="cntrlMain">

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th class="text-primary label-warning"><a href="javascript:void(0);" ng-click="sortBy('name')">Product Name</a></th>
                    <th class="text-primary label-warning"><a href="javascript:void(0);" ng-click="sortBy('price')">Price Per Unit</a></th>
                    <th class="text-primary label-warning"><a href="javascript:void(0);" ng-click="sortBy('quantity')">Order Quantity</a></th>
                    <th class="text-primary label-warning">Order Price</th>
                    <th class="text-primary label-warning"><a href="javascript:void(0);" ng-click="sortBy('InStock')" >Current Stock</a><span class="sortorder"  ng-class="{reverse: reverse}"></span></th>
                    <th class="text-primary label-warning">After Order Stock</th>
                </tr>
            </thead>
            <tr ng-repeat="p in products" class="text-danger">
                <td>{{p.name}}</td>
                <td>{{p.price | currency:"$" }}</td>
                <td>{{p.quantity}}</td>
                <td>{{p.quantity * p.price | currency}}</td>
                <td>{{p.InStock}}</td>
                <td style="{{p.InStock - p.quantity > StockLimit ? '':'background-color:Red;color:white;'}}">{{p.InStock - p.quantity | number}}</td>
            </tr>
        </table>


        <hr />
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Quantity</th>
                    <th>Unit Price</th>
                    <th>Total Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{Quantity}}</td>
                    <td>{{UnitPrice}}</td>
                    <td>{{TotalPrice}}</td>
                </tr>
            </tbody>
        </table>


    </div>
</body>
</html>