Common features in AngularJS (iii)

6. Expression

Expressions are used in templates to create a connection between templates, business logic, and data with full flexibility, while avoiding the infiltration of business logic into a template.

1 <DivNg-controller= "Somecontroller">2     <Div>{{recompute ()/10}}</Div>3     <ulng-repeat= "thing in Things">4         <LiNg-class= "{highlight: $index% 4 >= threshold ($index)}">5 {{otherfunction ($index)}}6         </Li>7     </ul>8 </Div>

Of course, for the first expression, recompute ()/10, you should avoid this way of putting business logic in a template, which should clearly differentiate between the responsibilities of the view and the controller, which makes it easier to test.

Although the expressions inside Angular are more restrictive than Javascript, they are more tolerant of undefined and null. If an error is encountered, the template simply does not show anything, and does not throw a nullpointerexception error so that you can safely use the uninitialized model values, and once they are assigned, they are immediately displayed.

7. Distinguish between UI and controller responsibilities

There are three types of functions in the application controller:

• Set the initial state for a model in an app
• Exposing data models and functions to Views (UI templates) through $scope objects
• Monitor changes in the rest of the model and take appropriate actions

It is recommended that you create a controller for each functional area in the view, which keeps the controller in a small and manageable state.

More complex, you can create nested controllers that, through the internal prototype inheritance mechanism, $scope on the parent controller object are passed to the $scope of the internal nested controller.

1 <  ng-controller= "Parentcontroller">2     <  Ng-controller = "Childcontroller" >... </ Div > 3 </ Div >

In the above example, the Childcontroller $scope object can access all the properties (and functions) on the Parentcontroller $scope object.

8. Monitor data model changes using $watch

Of all the functions built into scope, the most likely is $watch function, and when a part of your data model changes, $watch can notify you, monitor the properties of individual objects, and monitor the results that need to be computed, as long as they can be accessed as attributes. Or it can be computed as a JavaScript function and can be monitored by $watch function. The function signature is:

$watch (WATCHFN, watchaction, Deepwatch)

watchfn--This parameter is a string with a Angular expression or function that returns the current value of the data model being monitored. It will be executed several times, so ensure that no side effects are produced;

watchaction--usually receives the new and old two values of WATCHFN, as well as a reference to the scope object, as a function (NewValue, oldValue, scope).

deepwatch--if set to true, go back and check to see if each property of the monitored object has changed, which is set to true when monitoring an array or multiple objects, but because of the array of variables, the computational burden is heavier.

Common features in AngularJS (iii)