首頁 web前端 js教程 AngularJS語法詳解_AngularJS

AngularJS語法詳解_AngularJS

May 16, 2016 pm 04:18 PM
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}}
       
   



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

複製程式碼程式碼如下:



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



 
 

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


{{$index 1}} {{student.name}} {{student.score}}

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



本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

如何快速地把你的 Python 程式碼變成 API 如何快速地把你的 Python 程式碼變成 API Apr 14, 2023 pm 06:28 PM

如何快速地把你的 Python 程式碼變成 API

PHP8.0中新的型別別名語法 PHP8.0中新的型別別名語法 May 14, 2023 pm 02:21 PM

PHP8.0中新的型別別名語法

2022年最新5款的angularjs教學從入門到精通 2022年最新5款的angularjs教學從入門到精通 Jun 15, 2017 pm 05:50 PM

2022年最新5款的angularjs教學從入門到精通

Go語言與JS的連結與區別 Go語言與JS的連結與區別 Mar 29, 2024 am 11:15 AM

Go語言與JS的連結與區別

lambda 表達式的語法和結構有什麼特色? lambda 表達式的語法和結構有什麼特色? Apr 25, 2024 pm 01:12 PM

lambda 表達式的語法和結構有什麼特色?

使用PHP和AngularJS建立響應式網站,提供優質的使用者體驗 使用PHP和AngularJS建立響應式網站,提供優質的使用者體驗 Jun 27, 2023 pm 07:37 PM

使用PHP和AngularJS建立響應式網站,提供優質的使用者體驗

使用PHP和AngularJS建立Web應用 使用PHP和AngularJS建立Web應用 May 27, 2023 pm 08:10 PM

使用PHP和AngularJS建立Web應用

C++語法中易混淆的概念解析 C++語法中易混淆的概念解析 Jun 01, 2024 pm 09:13 PM

C++語法中易混淆的概念解析

See all articles