首页 > 代码库 > AngularJs初识
AngularJs初识
概念:
基于javascript开发的‘客户端应用框架‘，使我们可以更加快捷，简单的开发web应用。适用于CRUD或SPA单页面网站的开发(前后端数据交互频繁)
作用域:
$scope:局部
$rootScope：全局
双向数据绑定：mvvm
$timeout 用法类似setTimeout
但是$timeout会改变view中的值
ng-click 类似于onclick
ng-model
监听器:(监听数据变化)
三个参数:
监听的对象
回调函数---->有两个参数(新的值，旧的值)
true：是否深度监听
实例:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="UTF-8">
<title>AngularJs初识</title>
<!--引入AngularJs的文件-->
<script type="text/javascript" src="http://www.mamicode.com/angular.min.js"></script>
<script type="text/javascript">
var phonecatApp = angular.module(‘phonecatApp‘, []);
phonecatApp.controller(‘PhoneListCtrl‘,function($scope) {
$scope.huawei={
‘price‘:1499,
‘num‘ :1 ,
‘fre‘ :20
};
$scope.max = function(){
return $scope.huawei.price*$scope.huawei.num;
}
$scope.$watch($scope.max,function(newVal,oldVal){
newVal>=100?$scope.huawei.fre=0:$scope.huawei.fre=20;
},true);
})
</script>
</head>
<body>
<div ng-controller=‘PhoneListCtrl‘>
<p>价格: <input type="text" ng-model=‘huawei.price‘/></p>
<p>个数: <input type="text" ng-model=‘huawei.num‘/></p>
<p>费用: <span></span>{{max() | currency:‘￥‘}}</p>
<p>运费: <span></span>{{huawei.fre | currency:‘￥‘}}</p>
<p>总额: <span></span>{{max()+huawei.fre| currency:‘￥‘}}</p>
</div>
</body>
</html>
本文出自 “12897581” 博客，请务必保留此出处http://12907581.blog.51cto.com/12897581/1928368
AngularJs初识