Angularjs Simple usage

First, data binding

Angularjs's two-way data binding means that you can change the data in mode (JS), and these changes automatically appear on the view immediately, and vice versa. That is: On the one hand can make the model changes to drive the DOM element changes, on the other hand can also be done DOM element changes will affect the model.

When we use jquery, the code will flood with statements like this: var val = $ (' #id '). Val (); $ (' #id '). HTML (str), and so on, that is, frequent DOM operations (read and write), our ultimate goal is not to manipulate the DOM, but to implement the business logic. Ng's bindings will let you get rid of DOM operations, as long as the template and the data are bound by the declaration, the two will be kept in sync, the latest data will be displayed in real time in the page, the page user modified data will be recorded in the data model in real time.

Data interaction from view to controller to view (example 01):

　　
Changing the User,view in $scope will also be updated automatically.
Second, scope:
　　$scope is an object that links a view (a DOM element) to a controller. In our MVC structure, this $scope will be the model that provides a excecution context bound to the DOM element (and its child elements).
Although it may sound complicated, $scope is actually a JavaScript object that both controller and view can access, so we can use it to pass information between the two. In this $scope object, we store both the data and the functions that will run on the view.
Every angular application will have a $rootScope. This $rootScope is the top-level scope, which corresponds to the DOM element that contains the Ng-app Directive attribute.
App.run (function ($rootScope) {$rootScope. Name = "Zhang San";});
If the page is not explicitly set $scope, Angular will bind the data and functions here, the first part of the example is to run successfully.
This allows us to access the Name property from anywhere in the view, using the template expression {{}}, like this:
{{Name}}
Third, module
　　One more attribute on the 
Example:
var demoApp = angular.module (' demoApp ', []);
Iv. Ajax
$http Service is one of the core services of ANGULARJS, which helps us communicate with remote HTTP services through XMLHttpRequest objects or JSONP.
The $http service is a function that takes a setting object that specifies how to create an HTTP request; it returns a promise (* Reference JavaScript Asynchronous Programming's Promise mode), which provides two methods: The Success method and the error method.
　　
Demoapp.controller ("Democontroller", Function ($http, $scope) {$scope. Getajaxuser = function () {$http. Get (". /xxx.action "). Success (function (data) {alert (data);}). Error (function () {Alert ("Error! ”);});};});
ANGULARJS Ajax is basically the same as Ajax in the framework of jquery.
Five, 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. Filters are often used with tags to format the data in your model as needed. The control functions of the form are mainly related to data validation and enhancement of form controls. Ng has built-in filters that are:
Currency (currency), date (date), filter (substring match), JSON (formatted JSON object), LimitTo (number of limits), lowercase (lowercase), uppercase (uppercase), number (digits), Order by (sort).
Use of filters:
1. Use the filter in the template
We can use filter directly in {{}}, followed by an expression | The syntax for partitioning is as follows:
{{expression | filter}}
2. Using the filter in controller and service
We can also use filters in our JS code, the way we are familiar with dependency injection, for example, I want to use the currency filter in the controller, just inject it into the controller, the code is as follows:
App.controller (' TESTC ', function ($scope, currencyfilter) {
$scope. num = Currencyfilter (123534);
}
Using {{num}} in the template can output $123,534.00 directly! Using filter in a service is the same thing.
Vi. Custom Filters:
The custom method of filter is also simple, using the module's filter method, returns a function that receives the input value and returns the processed result. Words don't say much, let's write a look. For example, I need a filter that returns an array of elements that are labeled as odd, with the following code:
App.filter (' Odditems ', function () {/*odditems is the name of the custom filter, the functions are custom filter methods */
return function (Inputarray) {var array = []; for (Var i=0;i<inputarray.length;i++) {if (i%2!==0) {Array.push ( Inputarray[i]); }} return array; } });
Vii. directives:
　　NG contains many instructions to control templates, such as Ng-repeat,ng-class, and there are many instructions to help you complete business logic, such as Ng-controller,ng-model. So we can also customize the instructions:
Instructions are used in several ways:
As a label:<my-dir></my-dir>
As attribute: <span my-dir= "Exp" ></span>
As a comment:<!--directive:my-dir exp--and
As the class name: <span class= "MY-DIR:EXP;" ></span>
In fact, it is commonly used as a label and attribute.
1. Built-in instruction
1. Ng-class
Ng-class is used to bind a class name to an element, and the return value of its expression can be in the following three ways:
Class name string, you can split multiple class names with spaces, such as ' Redtext boldtext ';
Class an array group, each item in the array will be stacked to take effect;
A JSON object with a name value that has a key value of the class name, a Boolean type, and a value of true when the class is added to the element.
Here's an example of using map:
Ng-class Test
Red Bold Delete Line
<div ng-class= "{redtext:{{red}}, Boldtext:{{bold}}, Striketext:{{strike}}" ></div>
If you want to splice a class name, you can use an interpolated expression, such as:
<div class= "{{style}}text" > font style Test </div>
Then specify the value of the style in the controller:
$scope. style = ' red ';
Note that I use the class instead of the Ng-class, this is not to be swapped, the official documents did not explain, let's think this is Ng's grammatical rules.
Similar to Ng-class, Ng also provides a ng-class-odd, ng-class-even two instructions to match ng-repeat respectively in odd and even sequences using corresponding classes. This is used to achieve interlaced color change in the table can be more convenient.
2. Ng-style
Ng-style the CSS style used to bind the element, the return value of its expression is a JS object, the key is the CSS style name, and the value is the corresponding legal value for the style. The usage is relatively simple:
<div ng-style= "{color: ' Red '}" >ng-style test </div>
<div ng-style= "style" >ng-style test </div>
$scope. style = {color: ' red '};
3. Ng-show,ng-hide
For more commonly used element explicit control, Ng is also encapsulated, ng-show and Ng-hide values are boolean-type expressions, when the value is true, the corresponding show or hide takes effect. The framework uses Display:block and Display:none to control the explicit concealment of the element.
4. Custom directives:
　　　　　　　　
var demoApp.angular.module ("DemoApp", []);d emoapp.directive (' UserInfo ', function () {return {        restrict: ' E ',        Templateurl: ' userinfotemplate.html ',        replace:true,        transclude:true,        scope: {            mytitle: ' =etitle ' c6/>},        link:function (scope,element,attris) {            scope.showtext = false;            Scope.toggletext = function () {                scope.showtext =! scope.showtext;}}    };})  
Restrict is ' E ': Used as a label (restrict is ' A ': used as a style;)and replaceis true: Replace the current label with a template Transclude is true: the contents of the current element are transferred to the template; scope is {mytitle: ' =etitle '}: Defines a model named MyTitle, whose value points to the Etitle property of the current element; Templateurl as ' Userinfotemplate.html ': template content for ng-template defines the contents of the ID userinfotemplate.html; Link: Specifies the included behavior;
 Angularjs Simple usage