範本與資料的基本運作流程如下:
使用者請求應用起始頁面
使用者的瀏覽器向伺服器發起一次http連接,然後載入index.html頁面,這個頁麵包含了模板
angular被載入到頁面中,等待頁面載入完成,找出ng-app指令,用來定義模板的邊界
angular遍歷模板,尋找指定和綁定關係,將觸發一些列動作:註冊監聽器、執行一些DOM操作、從伺服器取得初始化資料。最後,應用程式將會啟動起來,並將範本轉換成DOM視圖
連接到伺服器去載入需要展示給使用者的其他資料
顯示文字
一種使用{{}}形式,如{{greeting}} 第二種ng-bind="greeting"
使用第一種,未被渲染的頁面可能會被使用者看到,index頁面建議使用第二種,其餘的頁面可以使用第一種
表單輸入
表單
在某些情況下,我們不想一有變化就立刻做出動作,而是要進行等待。例如:
表單
非表單提交類型的交互,以點擊為例
表單標題>
腳本>
函數 StartUpController($scope) {
$scope.funding = {startingEstimate:0};
計算所需 = 函數() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);
$scope.requestFunding = function() {
window.alert("抱歉,請先吸引更多顧客。")
};
$scope.reset = function() {
$scope.funding.startingEstimate = 0;
};
}
腳本>
頭>
列表、表格以及其他迭代類型元素
ng-repeat會透過$index傳回目前引用的元素序號。範例程式碼如下:
表單標題>
腳本>
var Students = [{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]
函數 StudentListController($scope) {
$scope.students = 學生;
}
腳本>
頭>
{{$index 1}} |
{{student.name}} |
{{student.score}} |
表>
身體>
隱藏與顯示
ng-show和ng-hide功能是等價的,但是運作效果剛好。
<script><br />
function DeathrayMenuController($scope) {<br />
$scope.menuState = {show:false };//這裡換成menuState.show = false 效果就顯示不出來了。以後宣告變數還是放在{}裡面吧<br />
$scope.toggleMenu = function() {<br />
$scope.menuState.show = !$scope.menuState.show;<br />
};<br />
}<br />
</script>
- Stun
- Disintegrate
- Erase from history
css類別與樣式
ng-class和ng-style都可以接受一個表達式,表達式執行的結果可能是如下取值之一:
表示css類別名稱的字串,以空格分隔
css類別名稱數組
css類別名稱到布林值的映射
程式碼範例如下:
<script><br />
function HeaderController($scope) {<br />
$scope.isError = false;<br />
$scope.isWarning = false;
<p> $scope.showError = function() {<br />
$scope.messageText = "Error!!!!"<br />
$scope.isError = true;<br />
$scope.isWarning = false;<br />
}
<p> $scope.showWarning = function() {<br />
$scope.messageText = "Warning!!!"<br />
$scope.isWarning = true;<br />
$scope.isError = true;<br />
}<br />
}<br />
</script>
{{messageText}}
css類別名稱到布林值的對應
範例程式碼如下:
<script><br />
function Restaurant($scope) {<br />
$scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}];
<p> $scope.selectRestaurant = function(row) {<br />
$scope.selectedRow = row;<br />
}<br />
}<br />
</script>
//css類別名稱到布林值的對應,當模型屬性selectedRow的值等於ng-repeat中得$index時,selectd樣式就會被設定到那一行
{{restaurant.name}} |
{{restaurant.cuisine}} |