ANGULARJS Study Notes--expression

First, Angular expression vs. Js expression

This makes it easy for people to associate a angular view expression with a javascript expression, but that's not entirely true, because angular is not the eval () of JavaScript evaluates an expression. You can imagine a angular expression as a JavaScript expression with the following differences :

• Property Evaluation: The evaluation of all properties is for scope , and is for object.

• Tolerance (forgiving): expression evaluation, for undefined and null,angular is tolerant, but Javascript will produce nullpointerexceptions ( -_-!!!! Why I haven't seen it before.

• There is no Process Control statement: In the angular expression, we cannot do any of the following: conditional branching, looping, throwing an exception.

• Filter (filters ): We can pass the result of an expression into the filter chain ( filter chains

On the other hand, if we want to (in expression), execute any Code, we can write those codes to controller and called it in a method. If we want to javascript eval () a angular expression, you can use $eval () method.

<! doctype html> 
Second, attribute evaluation (propertyEvaluation)
 
Angularthe context of the expression parsing environment isScope, whileJavaScriptis thewindow(it should refer to strict modeEveltime),Angularneed to pass$windowAccessGlobal Windowobject. For example, if we need to call in an expression defined in thewindowobject on thealert (), we need to use$window. Alert (). This is intended to avoid accidental access to public properties (Global State) (a homologous smallBUG? A common source of subtle bugs)
 
<! doctype html> 
Third, forgiving(tolerance, fault tolerance?) )
 
Expression evaluation is tolerant to undefined and null . In JavaScript , when a is not  An object, the a.b.c  evaluated, an exception will be thrown. Sometimes this is reasonable for a common language, and expression evaluation is mainly used for data binding, the general form is as follows:
 
 
  
 
  
   
 
    
 
     
{{a.b.c}}
 
    
 
   
 
 
  
 
If a does not exist, no display appears to be more reasonable than throwing an exception (unless we wait for the service side to respond, it will be defined soon). If the expression is not tolerant enough, then we write the binding code in such a chaotic way:
 
 
  
 
  
   
 
    
 
     
{{((a||{}).b||{}).c}}     //这……
 
    
 
   
 
 
  
 
Similarly, when referencing a function A.B.C () , if it is undefined or null, then simply return  Undefined. 
 
 
Iv. no Control flow statement (no controlsflow statements)
 
We cannot write process Control statements in an expression. The reason behind this is thatangular 's core system is that the logic of the application should be within the scopeof the controller, not View inside. If we need to include conditional branching, looping, or throwing exceptions in the view expression, you can delegate the JavaScript method instead (you can call  the methods in scope). 
 
 
Five, filter (Filters)
 
When we present data to the user, we may need to convert the data from the original format to a friendly (readable) format. For example, we have a data object that needs to be formatted according to geography before it is displayed to the user. We can pass an expression to a series of filters, such as:
 
 
  
 
  
   
 
    
 
     
name | uppercase
 
    
 
   
 
 
  
 
This expression evaluation can simply pass the value of name to the uppercase filter. 
 
Chained filters Use this syntax:
 
 
  
 
  
   
 
    
 
     
value | filter1 | filter2
 
    
 
   
 
 
  
 
We can also transmit a colon-separated parameter to the filter , for example, to display 123 in a two-decimal format :
 
 
  
 
  
   
 
    
 
     
123 | number:2
 
    
 
   
 
 
  
 
 
Six, the prefix "$"
 
We may wonder, what is the meaning of the prefix "$"? It is a simple prefix used by angular to make its API name distinguishable from other APIs (to prevent collisions). If angular does not use $, then evaluation of a.length () will return undefined  . Because neither a nor angular itself defines this property. 
 
Considering theAngularFuture versions may choose to increaselengthThis way, this will change the behavior of the expression. What's worse, we developers may create alengthproperty, then theAngularA conflict occurs. This problem exists becauseAngularThe object that currently exists is extended by adding methods. By adding a prefix"$",Angularretains a specificnamespace, soAngularthe developer and useAngulardevelopers can coexist in harmony. 
 

 

ANGULARJS Study Notes--expression