angularjs is a high-end front-end MVC development framework developed by Google.
Angularjs official website:/There is a demo on the official website, and FQ may be required to access it
Angularjs Chinese Community:/Suitable for beginners
Quote files:/ajax/libs/angularjs/1.3.8/
Notes when using angular
Quoting the angularjs library:/litengdesign/angularjsTest/blob/master/angular-1.0.1.... You can download it on github in the example in this section
You need to add ng-app="appName" to the area you are using, or directly ng-app (global).
Set the controller ng-controller="Ctrl".
Please note the following points when testing the example
angularjs code needs to be introduced before head, the author uses angular-1.0., please pay attention to the version difference.
All small examples are run in the following areas, remember to add ng-app to the active area.
The following are some small cases to illustrate the common instructions and usage of angularjs defaults.
hello world program (dual data binding)
Use ng-model={{name}} to bind data
<label for="name">name:</label>
<input type="text" ng-model="name" />
<hr>
hello:{{name || 'liteng'}}
/angularjsTest/
Small case of event binding use
<div>
Unit price: <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: {{(price) * (quantity)}}
<dt>
<dl>Note:</dl>
<dd>Input involving html5: <a href="http:///html5/att_input_type.asp">http:///html5/att_input_type.asp>
<dd>ng-init: Set initial value</dd>
</dt>
</div>
/angularjsTest/
ng-init: The attribute value can be specified by default
<p ng-init="value='hello world'">{{value}}</p>
/angularjsTest/
ng-repeat: used to iterate data similar to i for info in js
<div ng-init="friends=[{name:'Jhon',age:25},{name:'Mary',age:28}]"></div>
<p>I have {{}} friends. They are</p>
<ul>
<li ng-repeat="friend in friends">
[{{$index+1}}]:{{}}Age is: {{}}
</li>
</ul>
/angularjsTest/
ng-click:dom click event
<div ng-controller="ctrl">
<button ng-dblclick='showMsg()'>{{a}}</button>
</div>
<script>
function ctrl($scope){
$='hello';
$=function(){
$='world';
}
}
</script>
/angularjsTest/
ng-show: Set element display
Note: ng-show="!xx": Add before the attribute value! It means that it is sure to display, if not added! Not displayed if it is uncertain
<div ng-show="!show">
ng-show="!show"
</div>
<div ng-show="show">
ng-show="show"
</div>
/angularjsTest/
ng-hide: Set element hiding
<div ng-hide="aaa">
ng-hide="aaa"
</div>
<div ng-hide="!aaa">
ng-show="!aaa"
</div>
/angularjsTest/
Use ng-show to create toggle effects
<h2>toggle</h2>
<a href ng-click="showLog=!showLog">Show logo</a>
<div ng-show="showLog">
<img ng-src="/sites/default/files/" alt="">
</div>
/angularjsTest/
ng-style: Similar to the default style
Please note the writing format here: strings need to be included in quotes
<div ng-style="{width:100+'px',height:200+'px',backgroundColor:'red'}">
box
</div>
/angularjsTest/
filter:Filter field
<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-->
/angularjsTest/
ng-template: Can load templates
<div ng-include="''"></div>
<h1>hello</h1>
/angularjsTest/
$http: A method similar to ajax works very well
<div class="container" ng-controller="TestCtrl">
<h2>HTTP Request-Method 1</h2>
<ul>
<li ng-repeat="x in names">
{{}}+{{}}
</li>
</ul>
</div>
<h2>Method 2</h2>
<div ng-controller="TestCtrl2">
<ul>
<li ng-repeat="y in info">
{{}}+{{}}
</li>
</ul>
</div>
<script>
//Method 1
var TestCtrl=function($scope,$http){
var p=$http({
method:'GET',
url:'json/'
});
(function(response,status,headers,config){
$=response;
});
(function(status){
(status);
});
}
//Method 2
function TestCtrl2($scope,$http){
$('json/yiqi_article.json').success(function(response){
$=response;
});
}
</script>
/angularjsTest/
All the above codes:/litengdesign/angularjsTest
The implemented demo:/angularjsTest/
As for the router and directive of angularjs, I will take it out separately next time.