ANGULARJS Study Notes--expression

Original address: Http://code.angularjs.org/1.0.2/docs/guide/expression

An expression (Expressions) is a code fragment of a class JavaScript that is typically placed in a bound area (such as {{expression}}). An expression is parsed by the $parse service (http://code.angularjs.org/1.0.2/docs/api/ng. $parse).

For example, the following is a valid expression in angular:

• 1+2
• 3*10 | Currency
• User.Name

First, angular expression vs. Js expression

This makes it easy to associate a angular view expression with a JavaScript expression, but this is not entirely true, because angular does not evaluate the expression through the JavaScript eval (). 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 JavaScript is for the Window 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). For example, convert a Date object to a locally specified human-readable format.

On the other hand, if we want to execute arbitrary JavaScript code (in the angular expression), we can write that code into a method of the controller and invoke it. If we want to eval () a angular expression in JavaScript, you can use the $eval () method.

<! DOCTYPE html>
Second, attribute evaluation (property Evaluation)
The context of angular's expression parsing environment is scope, while JavaScript is window (which should refer to strict mode Evel), angular needs to access the Global Window object through $window. For example, if we need to invoke alert () defined on the Window object in an expression, we need to use $window.alert (). This is intended to avoid accidental access to public properties (global State) (a small bug with a homologous origin). 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 is evaluated, and an exception is 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 to undefined.
Iv. no Control flow statement (no controls flow statements)
We cannot write process Control statements in an expression. The reason behind this is that angular's core system is that the logic of the application should be within the scope of the controller, not in the view. 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 transfer parameters separated by colons into the filter, for example, 123 in two decimal places:

 
  
 
  
   
 
    
 
     
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 that the future version of angular may choose to increase the length of this method, this will change the behavior of this expression. What's worse, we developers may create a length property that will conflict with angular. This problem exists because angular extends the currently existing object by adding methods. By adding the prefix "$", angular retains a specific namespace, so angular developers and developers using angular can coexist harmoniously.
ANGULARJS Study Notes--expression