Summary of the most commonly used functions of AngularJS_AngularJS

AngularJS simplifies application development by presenting developers with a higher level of abstraction. As with other abstraction techniques, some flexibility is lost. In other words, not all applications are suitable for AngularJS. AngularJS is primarily concerned with building CRUD applications. Fortunately, at least 90% of WEB applications are CRUD applications. But to understand what is suitable for building with AngularJS, you need to understand what is not suitable for building with AngularJS.

For example, games, graphical interface editors, applications with frequent and complex DOM operations are very different from CRUD applications, and they are not suitable to be built with AngularJS. In situations like this it might be better to use some lighter, simpler technology like jQuery.

First iteration output ng-repeat tag

ng-repeat perfectly combines table ul ol and other tags with arrays in js

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

You can even specify the order of output:

<li ng-repeat="person in persons | orderBy:'name'">

Second dynamic binding of ng-model tag

Any html tag with user input and a value can be dynamically bound to variables in js, and it is dynamic binding.

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

For bound variables, you can use {{}} to directly reference

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

If you are familiar with fiter, you can easily output in the format you need

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

Third binding click event ng-click event

Using ng-click you can easily bind click events to a label.

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

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

Unlike the traditional onclick method, you can even pass an object to 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

The fourth branch statement: ng-switch on, ng-if/ng-show/ng-hide/ng-disabled tags

Branch 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 ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

Fifth Verification Grammar: ng-trim ng-minlength ng-maxlength required ng-pattern and other tags

For the input box in the form, you can use the tag above to verify user input.
You already know what they mean, literally.

<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 use $scope.yourForm.inputText.$error.required to determine whether the input box is empty

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

The input content you obtain through $scope.userNum has the leading and trailing whitespace removed because of the existence of ng-trim.

The sixth drop-down box ng-options tag

ng-options is a tag specially created for drop-down boxes.

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

The drop-down box displays person.name. When you select one of them, you can get the person.id you selected through yourSelected.

Seventh: Control the ng-style tag of css

ng-style helps you easily control your css attributes

<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 eighth $http object for asynchronous requests.

AngularJS provides an object similar to jquery's $.ajax for asynchronous requests.
Asynchronous operations are highly respected in AngularJS, so $http operations are all asynchronous, unlike jquery.ajax which also provides 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 making a POST request, the data in params will be put to the end of the URL for you, and the data in data will be put into the request body.

The above has shared with you the eight most commonly used functions of AngularJS. I hope it will be helpful to you!