http://www.iteye.com/news/32507
例子1：
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<script src="editor-app/libs/angular_1.2.13/angular.min.js"></script>
<script src="editor-app/libs/angular_1.2.13/angular-animate.min.js"></script>
<script src="test/demo.js"></script>
</head>
<!-- body #s -->
<body >
<!-- -->
<h5>1、ng-model属性双向绑定“\{\{\}\}”</h5>
<div ng-controller="helloCtrl">
<p>名字输入 : <input type="text" name="world" ng-model="world" /></p>
<p>Hello后面输出： {{world}}</p>
</div>
<h5>2、ul-ol-li筛选、 排序示例</h5>
<div ng-controller="phoneListCtrl">
<input ng-model="quer"/>
<select ng-model="sortType">
<option value="name">按姓名</option>
<option value="age">按年龄</option>
</select>
<ul>
<li ng-repeat="phone in phones |filter:quer |orderBy:sortType">
<p>{{phone.name}}--{{phone.age}}--{{phone.snippet}}--<img ng-src="{{phone.imsrc}}"/></p>
</li>
</ul>
<ol>
<li ng-repeat="phone in phones |filter:quer |orderBy:sortType">
<p>{{phone.name}}--{{phone.age}}--{{phone.snippet}}--<img ng-src="{{phone.imsrc}}"/></p>
</li>
</ol>
</div>
<h5>3、简单金额统计</h5>
<div ng-controller="multipleController">
数量：<input type="number" min="0" max="10" required ng-model="num1"/>
单价：<input type="number" min="1" max="100" required ng-model="num2"/>
<p>总计（默认美元形式）：{{num1*num2 | currency}}</p>
<p>总计（指定人民币形式）：{{num1*num2 | currency:"RMB ¥"}}</p>
</div>
<h5>4、filter:内置过滤器；自定义过滤器</h5>
<div ng-controller="filterController">
<input ng-model="lower">
<input ng-model="upper">
<p>{{ lower | lowercase }}</p>
<p>{{ upper | uppercase }}</p>
</div>
<h5>5、指令directive示例-根据格式显示时间</h5>
<div ng-controller="directiveController">
<p> 要显示的时间格式:<input ng-model="format"/></p>
<p>当前时间:<span my-current-time></span></p>
</div>
<h5>6、</h5>
<div ng-controller="showHideController">
<p><button ng-click="toggle()">显示/隐藏</button></p>
<p ng-hide="myVar">
名：<input ng-model="ming"/>
姓：<input ng-model="xing"/>
----姓名：{{xing+" "+ming}}
</p>
</div>
<h5>7、自定义服务</h5>
<div ng-controller="myController7">
<input ng-init="message='good'" ng-model="message"/>
<button ng-click="callNotify(message);">notify</button>
</div>
<script type="text/javascript">
var app=angular.module("demoApp",[]);
//demo1
app.controller("helloCtrl",function($scope){
$scope.world="angularjs text";//初始值
});
//demo2
var phoneListCtrl=['$scope','$http',function($scope,$http){
$scope.phones=[
{name:"小赵",age:"34",snippet:"行政",imsrc:"editor-app/images/bpmn-error.png"},
{name:"张域",age:"19",snippet:"法务",imsrc:"editor-app/images/datadefinition.png"},
{name:"刘芳",age:"25",snippet:"财务",imsrc:"editor-app/images/wrench.png"},
{name:"袁华",age:"46",snippet:"运营",imsrc:"editor-app/images/delete.png"},
{name:"小孙",age:"22",snippet:"技术",imsrc:"editor-app/images/bpmn-warning.png"}
];
//方式二赋值
//$http.get('test/test.json').success(function(data){
// $scope.phones=data;
//});
$scope.sortType='age';
}];
//demo3
function multipleController($scope){
//初始
$scope.num1=2;
$scope.num2=4;
}
//demo4
function filterController($scope){
//初始
$scope.lower="UPPERCASE LETTERS TO LOWERCASE";
$scope.upper="lowercase letters to uppercase";
}
//demo5
function directiveController($scope){
$scope.format='yyyy-MM-dd HH:mm:ss';
}
//在module模块中新建指令
app.directive('myCurrentTime',function($timeout,dateFilter){
return function(scope,element,attrs){
var format,timeoutId;
function updateTime(){
element.text(dateFilter(new Date(),format));
}
//$watch监听scope值的改变
scope.$watch('format',function(value){
format=value;
updateTime();
});
function updateLater(){
timeoutId=$timeout(function(){
updateTime();
updateLater();
},1000);
}
element.bind('$destroy',function(){
$timeout.cancel(timeoutId);
console.log(timeoutId);
});
updateLater();
}
});
//demo6
app.controller("showHideController",function($scope){
$scope.xing="雷";
$scope.ming="小风"
$scope.myVar=false;
$scope.toggle=function(){
$scope.myVar=!$scope.myVar;
}
});
//demo7--服务factory-callNotify调用自定义服务notifyService
angular.module("demoApp", []).factory('notify',['$window',function(win){
var msgs=[];
return function(msg){
msgs.push(msg);
if(msgs.length==3){
win.alert(msgs.join('\n'));
msgs=[];
}
};
}]);
function myController7(scope,notifyService){
scope.callNotify=function(msg){
notifyService(msg);
};
}
myController7.$inject=['$scope','notify'];
</script>
</body>
<!-- body #e -->
</html>
例子2：
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<script src="editor-app/libs/angular_1.2.13/angular.min.js"></script>
<script>
var app=angular.module("demoApp",[]);
app.controller("demoController",function($scope){
//初始化
$scope.productsList=[
{name:"苹果",category:"水果",other:"--"},
{name:"香蕉",category:"水果",other:"--"},
{name:"黄瓜",category:"蔬菜",other:"--"},
{name:"豆角",category:"蔬菜",other:"--"},
{name:"西瓜",category:"水果",other:"--"},
{name:"米",category:"其它",other:"--"},
{name:"白菜",category:"蔬菜",other:"--"},
{name:"油",category:"其它",other:"--"},
{name:"萝卜",category:"蔬菜",other:"--"}
];
$scope.quantity=0;
$scope.price=0;
//点击计算按钮
$scope.countTotalFunction=function(){
if(undefined==$scope.productName||null==$scope.productName){
alert("请选择商品名称！");
}else{
alert('商品名称：'+$scope.productName.name+"，总计: "+$scope.quantity*$scope.price);
}
};
});
</script>
</head>
<body >
<div style="text-align: left;margin-left: 200px;">
<h5>DEMO:购买某种商品的金额统计</h5>
<div ng-controller="demoController">
<p>商品名称：
<select ng-model="productName" ng-options="p.name group by p.category for p in productsList">
<option value=''>--请选择--</option>
</select>
</p>
<p>数量：<input type="text" ng-model="quantity" required /></p>
<p>单价：<input type="text" ng-model="price" required /></p>
<p>自动统计金额：{{quantity*price}}</p>
<button ng-click="countTotalFunction()">手动计算金额</button>
</div>
</div>
<!--
PS:
1-$scope作用域是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,数据绑定就靠它。
$rootscope是各个controller中scope的桥梁。用$rootscope定义的值，可以在各个controller中使用。
2-AngularJS拥有许多扩展的HTML属性即指令：
如ng-app,ng-init,ng-model,ng-controller,ng-click,ng-change,ng-class,
ng-show,ng-hide,ng-disabled,ng-cloak,ng-view,ng-bind,
ng-include,ng-options...
3-AngularJS服务：
$http $location $timeout $interval $q $routeProvider $log....
-->
</body>
</html>