Pop frame. AngularJS

AngularJS is a relatively new technology, and version 1.0 was released in 2012.
AngularJS was developed by Google's employees Mi?ko hevery from 2009 onwards.
This is a very good idea, the project is now officially supported by Google, a full-time development team to continue to develop and maintain him. Angularjs was designed to overcome the lack of HTML in building applications. HTML is a good design language for static text presentation, but it seems weak to build a Web application. So I did some work (you can also think of it as a gimmick) to get the browser to do what I want the core is to extend the HTML through the instructions, binding the data to the HTML through an expression.

Angular contrast js\jquery at the same time make a calculator angular is good at doing a lot of computational processing

Angular features: Two-way data binding, instruction system, MVVM design mode (faster work efficiency), multi-module development, System Dependency injection.

"{{}}" as an expression of angular, can be written in HTML, which can include: string, Number, Boolean, ternary expression, array, object.

directive: All ng-begin with some instructions from angular:
Ng-bind: Binding, similar to innhtml
Ng-bind-html: Similar to Ng-bind
Ng-repeat:ng-repeat= "A in B" B is an array of arrays in the expression, similar to the for-in
Ng-class: When you do the class
Ng-if: If True is displayed, False is automatically annotated
Ng-hide: Is true when it is not displayed, false when displayed
Ng-show: The opposite of hide
Ng-switch: The corresponding cars will be displayed
NG-SRC: The source address used to give the picture
Ng-href: The source address used for the A tag
Ng-focus: The effect obtained when used to get the focus
Ng-blur: When used to lose focus
Ng-dblclick: For double-click, use in Label: <ang-click= "name ()!! Note here is a way to write "></a>


Custom Directives
since the official instructions are not necessarily sufficient, we need to set some custom directives ourselves:
use Diretive to set the module, note. This is the method to add to the modules.

app.directive (' The name of the instruction ', the second parameter is the array, which is similar to the controller's second argument) 
If the name of the instruction is called by the Hump, it is necessary to convert all the uppercase and lowercase letters into lower case, and add "-" to the original size.

Template: ' Specify an HTML string, and eventually angular will render the string to the page, we write the innerHTML location of the label where the custom directive is located '

Templateurl: also specifies a string, except that the string is a path, and eventually angular will help us to request the file and then insert the contents of the file into the page as a template string.

Angular priority will identify the corresponding attribute value as the ID of the script tag, and if there is no ID, the attribute value will be used as a path to request.
+ Restrict: Specify how ANGUALR custom directives are used
   -' C ': Indicates that ng-cloak can only be used in the form of a class style
   -' A ': Indicates that it can only be used as an attribute
   -' E ': Indicates that the <my-Btn></my-Btn> can only be used in the form of a custom label   

Replace: A Boolean value is required: When True, angular replaces the label of the custom directive with the template string specified by Tempate.
(Go to the shell).

Transclude: Transpose, which requires a Boolean value that is true, adds a string of innerHTML position of the label where the custom directive is located to the innerHTML position of the label in the template string that owns the ng-trasclude directive.
-Scope: You need to provide an object to get the property value of the label where the custom directive is located.
      `{
          
      }`
-Link: need to provide a function, this function has three parameters
      + scope, can expose some properties to the template string to use, and the controller of the $scope a bit similar
        However, the properties it exposes can only be used in template strings and cannot be used throughout the view.
      + element: Is the Jqlite object that angular the label for the custom directive we get
      

Filter:

Filters (filter), as its name, is to receive an input, process it through a rule, and return the processed results. It is used primarily for formatting data, such as getting a subset of an array, sorting the elements in a group, and so on. Ng contains filters that are: currency (currency), date (date), filter (substring match), JSON (formatted JSON object), LimitTo (number of limits), lowercase (lowercase), uppercase (uppercase), Number (numbers), order by (sort).
-Angular's official filter:

-What is a filter 
 + filter (filter) as its name is, the function is to receive an input, process it through a rule, and return the processed results. It is used primarily for formatting data, such as getting a subset of an array, sorting the elements in a group, and so on. Ng contains filters that are: currency (currency), date (date), filter (substring match), JSON (formatted JSON object), LimitTo (number of limits), lowercase (lowercase), uppercase (uppercase), Number (numbers), order by (sort). 
-Angular Official filter 
 + currency (currency) 
-{{$ | currency: ' usd$ ': 0}} 
 + date (date) 
-{{' 1288323 623006 ' | Date: "Mm/dd/yyyy ' at ' H:mma"}} 
 + JSON (formatted JSON object) 
-' <pre >{{{' name ': ' Value '} | json}}</pre>  ; ' 
 + limitto (Limit number) 
-{{numbers | limitto:numlimit}} 
 + lowercase (lowercase) 
-{{lowercase_expr ession | lowercase}} 
 + uppercase (uppercase) 
-{{uppercase_expression | uppercase}} 
 + number (numeric) 
-{{ 1234 |        number:0}} 
 + ORDER by (sort) 
 + filter (substring match) 
-Custom filter 
 + ' App.filter ("Myuppercase", function () {
        return function (data) {
 return data.touppercase (); 
 } 
}); `

Pop frame. AngularJS