Summary of Angularjs basic knowledge and examples_AngularJS

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.asp

">http://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:

{{value}}

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:

{{a}}

<script> <br /> Function ctrl($scope){<br /> $scope.a='hello';<br /> $scope.showMsg=function(){<br />           $scope.a='world';<br /> }<br /> }<br /> </script>

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'">           });            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>

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

All the above codes: https://github.com/litengdesign/angularjsTest

Demo implemented: http://2.liteng.sinaapp.com/angularjsTest/index.html

As for the routing (router) and directive (directive) of angularjs, I will talk about them separately next time.