ANGULARJS Notes---data binding

I. Data binding

1. Simple binding

The following implements a binding of a simple addition operation,

A.ng-app: Indicates that the DIV is within the ANGULARJS application, remove the ng-app= "" then the binding will be invalid

B.ng-models: For data binding, the information entered inside the two input will be bound to the VAL1 and val2 variables.

C.{{Filedname}}: Double brackets are also bindings for data.

<! DOCTYPE Html>"Angular.min.js"></script><script type="Text/javascript"></script>""> <div > <input ng-model="Val1"Type=" Number"Placeholder="Input your number"> + <input ng-model="Val2"Type=" Number"Placeholder="Input your Numer"> = <span>{{Val1+val2 | |0}}</span> </div> </div>
2. Use of $scope
The above mentioned by Ng-model implementation of data binding, in fact, the so-called data binding is actually bound to the $scope. The following is a two-integer sum calculated by writing the Sumcontroller method to achieve a click of the Submit button.
<! DOCTYPE Html>"Angular.min.js"></script><script type="Text/javascript">function Sumcontroller ($scope) {$scope. Addtwonumber=function () {$scope. Addnumber= $scope. val2+$scope. Val1;     }; }     </script>""> <div ng-controller="Sumcontroller"> <input ng-model="Val1"Type=" Number"Placeholder="Input your number"> + <input ng-model="Val2"Type=" Number"Placeholder="Input your Numer"> <button ng-click="Addtwonumber ()">Submit</button> <span>{{addnumber| |0}}</span> </div> </div>
3. $apply () Usage
The above refers to the implementation of data binding through Ng-model, in fact, the so-called data binding is actually bound to the $scope. The following is a simple clock program, through the SetInterval method to update the clock value every second, in the binding we still use the Apply method.
A. Calling Updateclock () in SetInterval will reveal that Chrome's console will print the current time every second, but the interface is not updated
B. After calling $scope. $apply (Updateclock) in SetInterval, Chrome's console will accept the current time every 1 seconds, and the interface update time
C. Why is this so? In fact, calling the SetInterval method loops trigger The Updateclock method is different from the mechanism above us through Ng-click. Ng-click will automatically $watch and monitor data changes to update the interface. The setinterval of native JavaScript has changed the data can not be monitored, so it is to be implemented by $apply.
Understanding $apply () and $digest () in angular
<! DOCTYPE Html>"Angular.min.js"></script><script type="Text/javascript">function ClockController ($scope) {varUpdateclock =function () {$scope. Clock=NewDate ();
Console.log ($scope. Clock); Data Watch}varClockinterval =setinterval (function () {//Updateclock ();---Not updated$scope. $apply (Updateclock); }, +);   Updateclock (); }</script>""> <div ng-controller="ClockController"> 
two. Modular
The. NET development knows that in development we will declare different namespaces and different classes to implement the modular management of code, in fact, Angularjs also provides a similar approach, we can implement the code through NG-APP and Ng-contrller Modular management.
A. Register a module in the background via angular.module, then add Contrller through App.controller, where the 'sumcontroller'   and ' timecontroller'   belongs to the sibling module, and the scope binding object between the two does not interfere with each other.
B. An HTML page background can only register a module, if the registration of multiple will error.
<! DOCTYPE Html>"Angular.min.js"></script><script type="Text/javascript">varApp = Angular.module ('app',[]); App.controller ('Sumcontroller', Function ($scope) {$scope. Addtwonumber=function () {$scope. Addnumber= $scope. val2+$scope. Val1;     };              }); App.controller ('Timecontroller', Function ($scope) {$scope. Timetwonumber=function () {$scope. Timenumber= $scope. Val2 *$scope. Val1;     };       }); </script>"app"> <div ng-controller="Sumcontroller"> <input ng-model="Val1"Type=" Number"Placeholder="Input your number"> + <input ng-model="Val2"Type=" Number"Placeholder="Input your Numer"> <button ng-click="Addtwonumber ()">Submit</button> <span>{{addnumber| |0}}</span> </div> <br/> <div ng-controller="Timecontroller"> <input ng-model="Val1"Type=" Number"Placeholder="Input your number"> * <input ng-model="Val2"Type=" Number"Placeholder="Input your Numer"> <button ng-click="Timetwonumber ()">Submit</button> <span>{{timenumber| |0}}</span> </div> </div>
ANGULARJS Notes---data binding