AngularJS語法詳解_AngularJS

範本與資料的基本運作流程如下：

使用者請求應用起始頁面
使用者的瀏覽器向伺服器發起一次http連接，然後載入index.html頁面，這個頁麵包含了模板
angular被載入到頁面中，等待頁面載入完成，找出ng-app指令，用來定義模板的邊界
angular遍歷模板，尋找指定和綁定關係，將觸發一些列動作：註冊監聽器、執行一些DOM操作、從伺服器取得初始化資料。最後，應用程式將會啟動起來，並將範本轉換成DOM視圖
連接到伺服器去載入需要展示給使用者的其他資料

顯示文字

一種使用{{}}形式，如{{greeting}} 第二種ng-bind="greeting"

使用第一種，未被渲染的頁面可能會被使用者看到，index頁面建議使用第二種，其餘的頁面可以使用第一種

表單輸入

複製程式碼 程式碼如下:

   
   
   


   

        Starting:   //change的時候呼叫函數
        Recommendation: {{funding.needed}}
   

在某些情況下，我們不想一有變化就立刻做出動作，而是要進行等待。例如：

複製程式碼 程式碼如下:

   
   
   


   

  //ng-submit
        Starting:
        Recommendation: {{funding.needed}}
        Fund my startup!
   

非表單提交類型的交互，以點擊為例

複製程式碼程式碼如下：

    表單標題>
    腳本>
   
    函數 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;
        };
    }
    腳本>
頭>

   

        開始：
        建議：{{funding.needed}}
        資助我的創業公司！
        重設按鈕>
    表格>
身體>

列表、表格以及其他迭代類型元素

ng-repeat會透過$index傳回目前引用的元素序號。範例程式碼如下：

複製程式碼程式碼如下：

    表單標題>
    腳本>
   
    var Students = [{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]
    函數 StudentListController($scope) {
        $scope.students = 學生;

    }
    腳本>
頭>

   

       
           
           
           
       
    表>
身體>

隱藏與顯示
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>

  Toggle Menu
 

   
• 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}}

    Error
    Warning

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>

{{$index 1}}

{{student.name}}

{{student.score}}

  //css類別名稱到布林值的對應,當模型屬性selectedRow的值等於ng-repeat中得$index時，selectd樣式就會被設定到那一行
       
       
   

{{restaurant.name}}

{{restaurant.cuisine}}