hello.html<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html> |
controllers.jsfunction HelloController($scope) {
$scope.greeting = { text: 'Hello' };
} |
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<input ng-model='greeting.text'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html> |
controllers.jsfunction HelloController($scope) {
$scope.greeting = { text: 'Hello' };
} |
function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
// use $location for something good here...
} |
<!DOCTYPE html>
<html ng-app>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span ng-bind="item.title"></span>
<input ng-model='item.quantity'/>
<span ng-bind="item.price | currency"></span>
<span ng-bind="item.price * item.quantity | currency"></span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="../js/angular-1.2.2/angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html> |
| <html ng-app> ng-app告诉Angular管理页面的那一部分。依据须要ng-app也能够放在<div>上 <body ng-controller="CartController"> Javascript类叫做控制器，它能够管理对应页面区域中的不论什么东西。 <div ng-repeat="item in items"> ng-repeat代表为items数组中每一个元素拷贝一次该DIV中的DOM，同一时候设置item作为当前元素，并可在模板中使用它。 <span>{{item.title}}</span> 表达式{{item.title}}检索迭代中的当前项，并将当前项的title属性值插入到DOM中 <input ng-model="item.quantity"> ng-model定义输入字段和item.quantity之间的数据绑定 <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> 单位价格和总价格式化成美元形式。通过Angular的currency过滤器进行美元形式的格式化。 <button ng-click="remove($index)"> Remove </button> 通过ng-repeat的迭代顺序$index，移除数据和对应的DOM（双向绑定特性） function CartController($scope) { CartController 管理这购物车的逻辑，$scope 就是用来把数据绑定到界面上的元素 $scope.items = [ {title: ‘Paint pots‘, quantity: 8, price: 3.95}, {title: ‘Polka dots‘, quantity: 17, price: 12.95}, {title: ‘Pebbles‘, quantity: 5, price: 6.95} ]; 通过定义$scope.items，我们已经创建一个虚拟数据代表了用户购物车中物品集合，购物车是不能仅工作在内存中，也须要通知server端持久化数据。 $scope.remove = function(index) {$scope.items.splice(index, 1);}; remove()函数可以绑定到界面上，因此我们也把它添加到$scope 中 |
原文：http://www.cnblogs.com/mengfanrong/p/4249399.html