Angularjs the most commonly used feature rollup _angularjs

ANGULARJS simplifies application development by presenting a higher level of abstraction for developers. As with other abstract techniques, this can lose a bit of flexibility. In other words, not all applications are suitable for ANGULARJS. Angularjs is primarily concerned with the construction of CRUD applications. Fortunately, at least 90% of all Web applications are CRUD applications. But to understand what is appropriate to build with ANGULARJS, you have to understand what is not suitable for angularjs construction.

such as games, graphical interface Editor, this DOM operation is very frequent and complex applications, and crud applications are very different, they are not suitable for angularjs to build. It might be better to use some lighter, simpler techniques like jquery in this case.

Ng-repeat label for the first iteration output

Ng-repeat let table ul ol and other tags and js in the array of perfect combination

<ul>
<li ng-repeat= ' person in persons ' >
{{person.name}} ' is {{person.age}} ' years old.
</li>
</ul>

You can even specify the order of the output:

<li ng-repeat= "Person in Persons | By: ' Name ' >

The second dynamic binding Ng-model label

Any user input, as long as the value of the HTML tag, can dynamically bind the variables in JS, and is dynamic binding.

<input type= "text" ng-model= ' password ' >

For a bound variable, you can use {{}} to refer directly to the

<span>you input password is {{password}}</span>

If you are familiar with Fiter, you can easily output in the format you want

<span>{{1288323623006 | date: ' YYYY-MM-DD HH:mm:ss Z '}}</span>

Ng-click event of the third binding point hit event

Using Ng-click you can easily bind a label to a point hit event.

<button ng-click= "pressme ()"/>

Of course, the premise is that you want to define your own Pressme method in the $scope domain.

Unlike the traditional OnClick method, you can even pass an object for the Ng-click method, like this:

<ul>
<li ng-repeat= "person in Persons" >
<button ng-click= "printf (person)"/>
</li >
</ul>

And, of course, the Ng-dblclick tag.

Ng-switch on, ng-if/ng-show/ng-hide/ng-disabled label of the Forth branch statement

Branching statements allow you to write logical judgments on the interface.

<ul>
<li ng-repeat= "person in Persons" >
<span ng-switch on= "Person.sex" >
<span ng-switch-when= "1" >you are a boy</span>
<span ng-switch-when= "2" >you are a girl</span>
</span>
<span ng-if= "Person.sex==1" >you may be a father</span> <span
" Person.sex==2 ">you May is a mother</span>
<span> please
input your baby ' s name:<input type=" Text "ng-disabled="!person.hasbaby "/>
</span>
<span>
</li>
</ul>

Ng-trim ng-minlength ng-maxlength required Ng-pattern label

The input box in the form, you can use the above label to achieve the user input validation.
You already know what they mean by literal meaning.

<form name= "Yourform" >
<input type= "text" name= "Inputtext" required ng-trim= "true" ng-model= "Usernum" Ng-pattern= "/^[0-9]*[1-9][0-9]*$/" ng-maxlength= "6" maxlength= "6"/>
</form>

You can determine whether the input box is empty by $scope. Yourform.inputtext $error required.

You can use $scope. Yourform.inputtext $invalid to determine whether the input content satisfies ng-pattern,ng-maxlength,maxlength

The input you get through $scope.usernum is removed from the blanks because of the presence of Ng-trim.

The Ng-options label of the dropdown box

Ng-options is a specially crafted label for the dropdown box.

<select ng-model= "yourselected" ng-options= "person.id as Person.name in persons" ></select>

The dropdown box shows Person.name, and when you select one of them, you can get the person.id you selected by yourselected.

The seventh control CSS Ng-style label

Ng-style to help you easily control your CSS properties

<span ng-style= "MyColor" >your color</span>

You can change the effect you want by assigning a value to MyColor, like this:

$scope. Mycolor={color: ' Blue '};
$scope. Mycolor={cursor: ' pointer ', color: ' Blue '};

The $http object for the eighth asynchronous request.

ANGULARJS provides a jquery-like $.ajax object for asynchronous requests.
Asynchronous operations are highly prized in angularjs, so $http operations are asynchronous, unlike Jquery.ajax, which also provide async parameters.

$http ({method: ' POST ', params: {id:123}, Data:{name: ' John ', age:27}, url: '/mypath '})
. Success (function (response, Status, headers, config) {
//do anything what you want;
})
. Error (Function (response, status, headers, config) {
//do anything what you want;
});

If you are a POST request, the data in the params will be added to the URL and the data will be placed in the request body.

To share the above eight kinds of angularjs most commonly used functions, I hope to help you!