首頁 > 開發者 > JavaScript
AngularJS文法詳解，angularjs詳解
模板和資料的基本運作流程如下：
使用者請求應用起始頁面
使用者的瀏覽器向伺服器發起一次http串連，然後載入index.html頁面，這個頁麵包含了模板
angular被載入到頁面中，等待頁面載入完成，尋找ng-app指令，用來定義模板的邊界
angular遍曆模板，尋找指定和綁定關係，將觸發一些列動作：註冊監聽器、執行一些DOM操作、從伺服器擷取初始化資料。最後，應用將會啟動起來，並將模板轉換成DOM視圖
串連到伺服器去載入需要展示給使用者的其他資料
顯示文本
一種使用{{}}形式，如{{greeting}} 第二種ng-bind="greeting"
使用第一種，未被渲染的頁面可能會被使用者看到，index頁面建議使用第二種，其餘的頁面可以使用第一種
表單輸入
複製代碼 代碼如下:
<html ng-app>
<head>
<title>表單</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function StartUpController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded); //watch model的變化
}
</script>
</head>
<body>
<form ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"> //change的時候調用函數
Recommendation: {{funding.needed}}
</form>
</body>
</html>
在某些情況下，我們不想一有變化就立刻做出動作，而是要進行等待。例如：
複製代碼 代碼如下:
<html ng-app>
<head>
<title>表單</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function StartUpController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);//watch監視一個運算式，當這個運算式發生變化時就會調用一個回呼函數
$scope.requestFunding = function() {
window.alert("Sorry,please get more customers first.")
};
}
</script>
</head>
<body>
<form ng-submit="requestFunding()" ng-controller="StartUpController"> //ng-submit
Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
<button>Fund my startup!</button>
</form>
</body>
</html>
非表單提交型的互動，以click為例
複製代碼 代碼如下:
<html ng-app>
<head>
<title>表單</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function StartUpController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);
$scope.requestFunding = function() {
window.alert("Sorry,please get more customers first.")
};
$scope.reset = function() {
$scope.funding.startingEstimate = 0;
};
}
</script>
</head>
<body>
<form ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
<button ng-click="requestFunding()">Fund my startup!</button>
<button ng-click="reset()">Reset</button>
</form>
</body>
</html>
列表、表格以及其他迭代型元素
ng-repeat會通過$index返回當前引用的元素序號。 範例程式碼如下：
複製代碼 代碼如下:
<html ng-app>
<head>
<title>表單</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var students = [{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]
function StudentListController($scope) {
$scope.students = students;
}
</script>
</head>
<body>
<table ng-controller="StudentListController">
<tr ng-repeat='student in students'>
<td>{{$index+1}}</td>
<td>{{student.name}}</td>
<td>{{student.score}}</td>
</tr>
</table>
</body>
</html>
隱藏與顯示
ng-show和ng-hide功能是等價的，但是運行效果正好相反。
複製代碼 代碼如下:
<html ng-app>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function DeathrayMenuController($scope) {
$scope.menuState = {show:false };//這裡換成menuState.show = false 效果就顯示不出來了。以後聲明變數還是放在{}裡面吧
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
}
</script>
</head>
<body>
<div ng-controller='DeathrayMenuController'>
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState.show'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
</div>
</body>
</html>
css類和樣式
ng-class和ng-style都可以接受一個運算式，運算式執行的結果可能是如下取值之一：
表示css類名的字串，以空格分隔
css類名數組
css類名到布爾值的映射
程式碼範例如下：
複製代碼 代碼如下:
<html ng-app>
<head>
<style type="text/css">
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
</style>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function HeaderController($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = "Error!!!!"
$scope.isError = true;
$scope.isWarning = false;
}
$scope.showWarning = function() {
$scope.messageText = "Warning!!!"
$scope.isWarning = true;
$scope.isError = true;
}
}
</script>
</head>
<body>
<div ng-controller="HeaderController">
<div ng-class="{error:isError,warning:isWarning}">{{messageText}}</div>
<button ng-click="showError()">Error</button>
<button ng-click="showWarning()">Warning</button>
</div>
</body>
</html>
css類名到布爾值的映射
範例程式碼如下：
複製代碼 代碼如下:
<html ng-app>
<head>
<style type="text/css">
.selected {
background-color: lightgreen;
}
</style>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function Restaurant($scope) {
$scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}];
$scope.selectRestaurant = function(row) {
$scope.selectedRow = row;
}
}
</script>
</head>
<body>
<table ng-controller="Restaurant">
<tr ng-repeat='restaurant in list' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'> //css類名到布爾值的映射,當模型屬性selectedRow的值等於ng-repeat中得$index時，selectd樣式就會被設定到那一行
<td>{{restaurant.name}}</td>
<td>{{restaurant.cuisine}}</td>
</tr>
</table>
</body>
</html>
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
