首頁 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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 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

提到API開發,你可能會想到DjangoRESTFramework,Flask,FastAPI,沒錯,它們完全可以用來寫API,不過,今天分享的這個框架可以讓你更快把現有的函數轉化為API,它就是Sanic 。 Sanic簡介Sanic[1],是Python3.7+Web伺服器和Web框架,旨在提高效能。它允許使用Python3.5中添加的async/await語法,這可以有效避免阻塞從而達到提升響應速度的目的。 Sanic致力於提供一種簡單且快速,集創建和啟動於一體的方法

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

隨著PHP8.0的發布,新增了一種類型別名語法,使得使用自訂的類型變得更加容易。在本文中,我們將深入了解這種新的語法,以及它對開發人員的影響。什麼是類型別名?在PHP中,類型別名本質上是一個變量,它引用另一個類型的名稱。這個變數可以像其他類型一樣使用,並在程式碼中的任何地方聲明。這種語法的主要作用是為常用的類型定義自訂別名,使得程式碼更易於閱讀和理解。

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

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

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

Lambda表達式是無名稱的匿名函數,其語法為:(parameter_list)->expression。它們具有匿名性、多樣性、柯里化和閉包等特徵。在實際應用中,Lambda表達式可用於簡潔地定義函數,如求和函數sum_lambda=lambdax,y:x+y,並透過map()函數應用於列表來進行求和操作。

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

在現今資訊時代,網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備,為使用者提供優質的體驗,成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站,進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言,非常適合Web開發。 PHP具有許多優點,如易於學習、跨平台、豐富的工具庫、開發效

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

Go語言與JS的聯繫與區別Go語言(也稱為Golang)和JavaScript(JS)都是目前流行的程式語言,它們在某些方面有聯繫,在其他方面又有明顯的區別。本篇文章將探討Go語言與JavaScript之間的聯繫與區別,同時提供具體的程式碼範例來幫助讀者更好地理解這兩種程式語言。連結:都是跨平台的Go語言和JavaScript都是跨平台的,可以在不同的作業系統

PHP8.0中的父類別呼叫語法 PHP8.0中的父類別呼叫語法 May 14, 2023 pm 01:00 PM

PHP是一種廣泛應用於Web開發的伺服器端腳本語言,而PHP8.0版本中引進了一種新的父類呼叫語法,讓物件導向程式設計更加方便簡潔。在PHP中,我們可以透過繼承的方式來建立一個父類別和一個或多個子類別。子類別可以繼承父類別的屬性和方法,並且可以透過重寫父類別的方法來修改或擴展其功能。在普通的PHP繼承中,如果我們想在子類別中呼叫父類別的方法,需要使用parent關鍵字來引用父

學會使用CSS選擇器的基本文法 學會使用CSS選擇器的基本文法 Jan 13, 2024 am 11:44 AM

掌握基本的CSS選擇器語法,需要具體程式碼範例CSS選擇器是前端開發中非常重要的一部分,它可以用來選擇和修改HTML文件的各個元素。掌握基本的CSS選擇器語法對於編寫高效率的樣式表是至關重要的。本文將介紹一些常見的CSS選擇器以及對應的程式碼範例。元素選擇器元素選擇器是最基本的選擇器,可以透過元素的標籤名稱來選擇對應的元素。例如,要選擇所有的段落(p元素),可以使用

See all articles