ANGULARJS Basic Knowledge Conquer

Angularjs is a tall, front-end MVC development framework developed by Google.

ANGULARJS Official website: https://angularjs.org/website has demo, access may need to FQ

Angularjs Chinese Community: http://www.angularjs.cn/for Beginners

Citation file: Https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

Use angular note

1. Reference Angularjs Library: https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1 .... Can be downloaded from the GitHub example in this section
2. You need to add ng-app= "AppName" to the area you are using, or directly Ng-app (global).
3. Set the controller ng-controller= "Ctrl".

To test the example, please note the following points

1. The ANGULARJS code needs to be introduced before head, and the author is using Angular-1.0.1.min.js, note the version differences.
2. All small samples are run in the following areas, remember to add Ng-app to the area of action.

Here are some small cases to illustrate the common directives and usages of angularjs by default.

Hello World Program (dual data binding)

Bind data using Ng-model={{name}}

<label for= "name" >name:</label><input type= "text" ng-model= "name" id= "name"/>
Http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html
Event bindings Use small cases
<div>  : <input type= "number" min=0 ng-model= "Price" ng-init= "price=299" >  Quantity: <input type= " Number "min=0 ng-model=" Quantity "ng-init=" Quantity=1 ">  <br>  total: {{(price) * (quantity)}}  < dt>    <dl> Note:</dl>    <dd> input:<a href= involved HTML5 Http://www.w3school.com.cn/html5/att _input_type.asp ">http://www.w3school.com.cn/html5/att_input_type.asp</a></dd>    <dd> Ng-init: Set initial value </dd>  </dt></div>
Http://2.liteng.sinaapp.com/angularjsTest/event-bind.html
Ng-init: Property values can be specified by default
<p ng-init= "value= ' Hello World '" >{{value}}</p>
Http://2.liteng.sinaapp.com/angularjsTest/ng-init.html
Ng-repeat: Used to iterate data similar to the I for info in JS
<div ng-init= "friends=[{name: ' Jhon ', age:25},{name: ' Mary ', age:28}]" ></div>  <p> I have {{ Friends.length}} friends. They are </p>  <ul>    <li ng-repeat= "friend in Friends" >      [{{$index +1}}]:{{ Friend.name}} Age: {{friend.age}}    </li>   </ul>
Http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html
Ng-click:dom Click events
<div ng-controller= "Ctrl" >  <button ng-dblclick= ' showmsg () ' >{{a}}</button></div>< script>    Function Ctrl ($scope) {      $scope. a= ' Hello ';      $scope. Showmsg=function () {        $scope. a= ' World ';      }     }  </script>
Http://2.liteng.sinaapp.com/angularjsTest/ng-click.html
Ng-show: Setting element display
Note: ng-show= "!xx": Add in front of the attribute value! Indicates OK display, if not added! Indicates that an indeterminate is not displayed
<div ng-show= "!show" >  ng-show= "!show" </div><div ng-show= "show" >  ng-show= "Show" </div >
Http://2.liteng.sinaapp.com/angularjsTest/ng-show.html
Ng-hide: Setting Element shadowing
<div ng-hide= "AAA" >  ng-hide= "AAA" </div><div ng-hide= "!aaa" >  ng-show= "!aaa" </div>
Http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html
Using Ng-show to make toggle effect
Http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html
Ng-style: Similar to the default style
Note The writing format here: strings need to be enclosed in quotation marks
<div ng-style= "{width:100+ ' px ', height:200+ ' px ', backgroundcolor: ' Red '}" >  box</div>
Http://2.liteng.sinaapp.com/angularjsTest/ng-style.html
Filter: Filtering fields
<div>{{9999|number}}</div> <!--9,999--><div>{{9999+1 |number:2}}</div><!-- 10,000.00--><div>{{9*9|currency}}</div><!--$81.00--><div>{{' Hello World ' | uppercase}} </div><!--HELLO world-->
Http://2.liteng.sinaapp.com/angularjsTest/filter.html
Ng-template: template can be loaded
<div ng-include= "' tpl.html '" ></div>
Tpl.html
Http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html
$http: An AJAX-like approach works
<div class= "container" ng-controller= "Testctrl" > 
Http://2.liteng.sinaapp.com/angularjsTest/ajax.html
All of the above code:https://github.com/litengdesign/angularjstest
Implementation of the Demo:http://2.liteng.sinaapp.com/angularjstest/index.html
As for ANGULARJS routing (router) and instructions (directive) next time I will come out alone.
I source: www.liteng.org If you need to reprint please indicate the source. Otherwise the legal liability will be investigated
Copyright belongs to the author and blog Park All, please friendship reprint.
ANGULARJS Basic Knowledge Conquer