angularjs是google開發的一款高大上的前端mvc開發框架。
Angularjs官網：https://angularjs.org/ 官網有demo,訪問可能需要FQ
Angularjs中國社區：http://www.angularjs.cn/ 適合初學者
引用文件：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
使用angular注意
引用angularjs庫：https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... 可以在本節示例的github上下載
需要在你使用的區域加上ng-app="appName",或者直接ng-app（全局）。
設置控制器ng-controller="Ctrl"。
測試一下示例請注意以下幾點
需要在head之前引入angularjs代碼,作者使用的是angular-1.0.1.min.js，請注意版本區別。
所有小示例都是在以下區域運行，記得在作用區域加上ng-app。
下面通過一些小的案例來說明angularjs默認的常見的指令和用法。
hello world程序(雙數據綁定)
使用ng-model={{name}}來綁定數據
複製代碼代碼如下:
<label for="name">name:</label>
<input type="text" ng-model="name" id="name"/>
<hr>
hello:{{name || 'liteng'}}
http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html
事件綁定使用小案例
複製代碼代碼如下:
<div>
單價：<input type="number" min=0 ng-model="price" ng-init="price=299">
數量: <input type="number" min=0 ng-model="quantity" ng-init="quantity=1">
<br>
總價：{{(price) * (quantity)}}
<dt>
<dl>注:</dl>
<dd>涉及html5的input：<a href="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:設定初始值</dd>
</dt>
</div>
http://2.liteng.sinaapp.com/angularjsTest/event-bind.html
ng-init:可默認指定屬性值
複製代碼代碼如下:
<p ng-init="value='hello world'">{{value}}</p>
http://2.liteng.sinaapp.com/angularjsTest/ng-init.html
ng-repeat:用於迭代數據類似於js中的i for info
複製代碼代碼如下:
<div ng-init="friends=[{name:'Jhon',age:25},{name:'Mary',age:28}]"></div>
<p>我有{{friends.length}} 朋友.他們是</p>
<ul>
<li ng-repeat="friend in friends">
[{{$index+1}}]:{{friend.name}}年齡為：{{friend.age}}
</li>
</ul>
http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html
ng-click:dom的點擊事件
複製代碼代碼如下:
<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:設置元素顯示
注：ng-show="!xx":在屬性值前面加！表示確定顯示,如果不加！表示不確定則不顯示
複製代碼代碼如下:
<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:設置元素隱藏
複製代碼代碼如下:
<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
運用ng-show製作toggle效果
複製代碼代碼如下:
<h2>toggle</h2>
<a href ng-click="showLog=!showLog">顯示logo</a>
<div ng-show="showLog">
<img ng-src="http://liteng.org/sites/default/files/logo.png">
</div>
http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html
ng-style:和默認style類似
這裡請注意書寫格式：字符串需要用引號包含
複製代碼代碼如下:
<div ng-style="{width:100+'px',height:200+'px',backgroundColor:'red'}">
box
</div>
http://2.liteng.sinaapp.com/angularjsTest/ng-style.html
filter:過濾字段
複製代碼代碼如下:
<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:可以加載模板
複製代碼代碼如下:
<div ng-include="'tpl.html'"></div>
tpl.html
複製代碼代碼如下:
<h1>hello</h1>
http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html
$http:一個類似ajax的方法很管用
複製代碼代碼如下:
<div ng-controller="TestCtrl">
<h2>HTTP請求-方法1</h2>
<ul>
<li ng-repeat="x in names">
{{x.Name}}+{{x.Country}}
</li>
</ul>
</div>
<h2>方法2</h2>
<div ng-controller="TestCtrl2">
<ul>
<li ng-repeat="y in info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<script>
//方法1
var TestCtrl=function($scope,$http){
var p=$http({
method:'GET',
url:'json/date.json'
});
p.success(function(response,status,headers,config){
$scope.names=response;
});
p.error(function(status){
console.log(status);
});
}
//方法2
function TestCtrl2($scope,$http){
$http.get('json/yiqi_article.json').success(function(response){
$scope.info=response;
});
}
</script>
http://2.liteng.sinaapp.com/angularjsTest/ajax.html
以上所有的code:https://github.com/litengdesign/angularjsTest
實現的demo:http://2.liteng.sinaapp.com/angularjsTest/index.html
至於angularjs的路由（router）和指令（directive）下次本人將單獨拿出來講。