Summary of Angularjs basic knowledge and examples_AngularJS

WBOY

Release： 2016-05-16 16:18:27

Original

1093 people have browsed it

angularjs is a high-end front-end mvc development framework developed by Google.

Angularjs official website: https://angularjs.org/ The official website has a demo, access may require FQ

Angularjs Chinese community: http://www.angularjs.cn/ Suitable for beginners

Reference file: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

Be careful when using angular

Quote the angularjs library: https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... You can download it from the github of the examples in this section
You need to add ng-app="appName" in the area you are using, or directly ng-app (global).
Set controller ng-controller="Ctrl".
Please note the following points when testing the example

You need to introduce angularjs code before head. The author uses angular-1.0.1.min.js. Please pay attention to the version difference.
All small examples are run in the following areas. Remember to add ng-app in the scope.
The following uses some small cases to illustrate the default common instructions and usage of angularjs.

hello world program (double data binding)

Use ng-model={{name}} to bind data

Copy code The code is as follows:

name:

hello:{{name || 'liteng'}}

http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

A small case of using event binding

Copy code The code is as follows:

Unit price:
Quantity:

Total price: {{(price) * (quantity)}}

Note:

Input involving html5: http://www.w3school.com.cn/html5/att_input_type.asphttp://www.w3school.com.cn/html5/att_input_type.asp">http://www.w3school.com.cn/ html5/att_input_type.asp>

ng-init: Set initial value

http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

ng-init: attribute values can be specified by default

Copy code The code is as follows:

http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

ng-repeat: used to iterate data similar to i for info in js

Copy code The code is as follows:

I have {{friends.length}} friends. They are

[{{$index 1}}]: {{friend.name}}’s age is: {{friend.age}}

http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

ng-click:dom click event

Copy code The code is as follows:

http://2.liteng.sinaapp.com/angularjsTest/ng-click.html

ng-show: Set element display

Note: ng-show="!xx": Add in front of the attribute value! Indicates confirmation of display, if not added! If unsure, do not display

Copy code The code is as follows:

ng-show="!show"

ng-show="show"

http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

ng-hide: Set element to hide

Copy code The code is as follows:

ng-hide="aaa"

ng-show="!aaa"

http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

Use ng-show to create toggle effect

Copy code The code is as follows:

toggle

Show logo

http://liteng.org/sites/default/files/logo.png" alt="">

http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html

ng-style: similar to the default style

Please pay attention to the writing format here: the string needs to be enclosed in quotes

Copy code The code is as follows:

box

http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

filter: filter field

Copy code The code is as follows:

{{9999|number}}

{{9999 1 |number:2}}

{{9*9|currency}}

{{'hello world' | uppercase}}

http://2.liteng.sinaapp.com/angularjsTest/filter.html

ng-template: Template can be loaded

Copy code The code is as follows:

tpl.html

Copy code The code is as follows:

hello

http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$http: An ajax-like method works well

Copy code The code is as follows:

HTTP request-method 1

{{x.Name}} {{x.Country}}

Method 2

{{y.aid}} {{y.title}}

<script><br>
//Method 1<br>
var TestCtrl=function($scope,$http){<br>
        var p=$http({<br>
Method:'GET',<br>
                                      <br>url:'json/date.json'<br><a href="'json/date.json'">
          });</a>
           p.success(function(response,status,headers,config){<br>
                $scope.names=response;<br>
          });<br>
           p.error(function(status){<br>
console.log(status);<br>
          });<br>
}<br>
//Method 2<br>
Function TestCtrl2($scope,$http){<br>
           $http.get('json/yiqi_article.json').success(function(response){<br>
                  $scope.info=response;<br>
        });<br>
}<br>
</script>