Introduction to Angularjs

With the development of society and continuous progress, angularjs constantly began to attract our attention, for us to write code and function of the implementation of a very effective help.

ANGULARJS is a structural framework for designing Dynamic Web applications. The main is to increase, delete, check, change aspects of the function, the operation of the DOM, the bottom of the implementation of the DOM operation. At the same time, it is a reference to the concept of MVC, the introduction of their own implementation of the method.

Some people think of it as MVC, the Model View controller (models, views, controllers), but some think it is MVVM, ie (model, view, here the VM is a whole, represents: View model). But Angularjs for the game, because the game has a lot of DOM operations, but it is to de-dom operation.

Angularjs has five of the most important features and features:

1. Two-way data binding.

Data binding allows you to write less code and provide as much time as possible to your application.

Here is a very simple example of a two-way binding to an input box and a

　　　　

2. Stencil.

In Angularjs, a template is an HTML file.

The HTML template will be parsed into the DOM by the browser. The DOM then becomes the input of the Angularjs compiler. Angularjs will traverse the DOM template to generate some guidance, namely, Directive (directives). All instructions are responsible for setting data bindings for the view.

Here's an example where we use the Ng-repeat directive to loop through an array of images and add an IMG template, as follows:

　　

　　　

3.MVC.

MVC or Model-view-controll Design patterns may mean different things to different people. Angularjs does not perform the traditional MVC, which is closer to MVVM (Moodel-view-viewmodel).

Model is a simple data in the application. ViewModel is an object that provides special data and methods to maintain the specified view. The controller is responsible for setting the initial state and parameterized $scope method to control the behavior.

4. Service and Dependency injection.

Angularjs has built-in dependency injection (DI) subsystems that can help developers develop, understand, and test applications more easily.

5. Instruction (Directive).

Directives can be used to create custom labels. They can be used to decorate elements or manipulate DOM properties. can be used as tags, attributes, annotations, and class names.

Here is an example that listens for an event and updates its $scope, as follows:

　　

You can then use this custom directive to:

<my-component ng-model= "Message" ></my-component>

Using a series of components to create your own app will make it easier for you to add, remove and update features.

For an introduction to the features of Angularjs, Next, let's look at its features. Let's talk about some of the contents of Ng's built-in filters.

1.currency (currency processing)

Using currency, you can format numbers as currency, which is the dollar sign by default, and you can pass in the required symbols yourself, such as when I pass in renminbi:

{{num | currency: ' ￥ '}}

　　　　

2.date (date format)

Native JS has limited formatting capabilities for dates, and the date filter provided by Ng basically meets the general formatting requirements. Use the following:

{{date | date: ' YYYY-MM-DD hh:mm:ss eeee '}}

The parameters are used to specify the desired format, and y m D H m S E respectively represent the day of the month and the week, and you are free to combine them. You can also use different numbers to limit the number of formatted digits. Other parameters can also use a specific descriptive string, such as "Shorttime" will format the time as 12:05 pm. NG provides eight descriptive strings that I think are a bit superfluous, and I can combine the desired format with my own will, and I don't want to remember so many words ~

3.filter (matched substring)

This filter is called filter. Used to process an array, and then filter out the elements containing a substring to return as a subarray. Can be an array of strings, or an array of objects. If it is an array of objects, you can match the value of the property. It receives a parameter that defines the matching rules for the substring. Here's an example of how the parameters are used, and I've defined an array with a few kids who are now particularly hot:

$scope. Childrenarray = [

{name: ' Kimi ', Age:3},

{name: ' Cindy ', Age:4},

{name: ' Anglar ', age:4},

{name: ' Shitou ', age:6},

{name: ' Tiantian ', age:5}

];

$scope. Func = function (e) {return e.age>4;} {{Childrenarray | filter: ' A '}}//Match attribute value contains a

{{Childrenarray | filter:4}}//Match attribute value contains 4

{{Childrenarray | filter: {name: ' I '}}}//parameter is an object that matches the name attribute containing I

{{Childrenarray | filter:func}}//parameter is a function that specifies the return age>4.

4.json (formatted JSON object)

The JSON filter can format a JS object as a JSON string with no parameters. What's the use of this thing, I generally do not output a JSON string on the page ah, the official website said it can be used for debugging, well, is a good choice. Alternatively, it can be used in JS as well as the familiar json.stringify (). The usage is super simple:

{{jsontest | json}}.

5.limitTo (Limit array length or string length)

The LimitTo filter is used to intercept an array or string, receive a parameter to specify the length of the intercept, or, if the argument is negative, to intercept from the end of the array. Personally think this filter is a little chicken, first only from the beginning/end of the array or string interception, second, JS primitive function can replace it, see how to use it:

{{Childrenarray | limitto:2}}//will display the first two items in the array.

6.lowercase (lowercase)

Convert the data to all lowercase. Without parameters, you can only change the entire string to lowercase, and you cannot specify a letter.

7.uppercase (uppercase)

Ditto.

8.number (formatted number)

The number filter can be divided into thousands, like this, 123,456,789. Also receives a parameter, you can specify the float type to retain several decimals:

{{num | number:2}}.

9. Order BY (sort)

Order BY filter You can sort the elements in an array, receive a parameter to specify the collation, and the argument can be a string representing the sort by the property name. Can be a function that defines a sort property. It can also be an array that is sorted by the property values in the array (if the value is equal by the first item, then the second one), or by an example of the child array above:

<div>{{Childrenarray | Order: ' age '}}</div>//Sort by age attribute value, if-age, reverse

<div>{{Childrenarray | Orderby:orderfunc}}</div>//Sort by the return value of the function

<div>{{Childrenarray | Order: [' age ', ' name ']}}</div>//If Age is the same, sort by name

As you can see, Ng built-in filters are not all-purpose, in fact, a lot of more chicken. The more personalized requirements we need to define our own filters, let's look at how to customize the filter.

　　

　　

Introduction to Angularjs