標籤：javascript 用戶端 開發 網站
概念:
基於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="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初識
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
