AngularJS語法詳解_AngularJS
May 16, 2016 pm 04:18 PM
angularjs
文法
範本與資料的基本運作流程如下:
使用者請求應用起始頁面
使用者的瀏覽器向伺服器發起一次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}} |
{{restaurant.name}} | {{restaurant.cuisine}} |
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)