AngularJS前端框架怎麼用？ angularjs前端框架的使用介紹

本篇文章主要介紹了關於angularjs的前端框架的學習，有哪些地方需要了解的都在這篇文章裡面了。現在就一起來看這篇文章吧

一、AngularJS的主要簡介：

#          AngularJS 將應用程式資料綁定到HTML 元素

          AngularJS 可以複製和重複HTML 元素

          AngularJS 可以隱藏並顯示HTML 元素

          AngularJS 可以在HTML 元素"背後加上程式碼# 、AngularJS 指令特點：

           ng-directives 擴充了HTML

           ng-model 指令將元素值（例如輸入域的值）為「綁定至應用如：】

           ng-bind 指令把應用程式資料綁定到HTML 視圖，也就是將後台資料綁定到前台

           ng-init初始化頁中的變數

           AngularJS 

模組（Module） 定義了AngularJS 應用。

           AngularJS 

控制器（Controller） 用於控制 AngularJS 應用。

三、AngularJS表達式：

            AngularJS 表達式寫在雙大括號內：

{{ expression }}。

        AngularJS 運算式將資料綁定到 HTML，這與 

ng-bind 指令有異曲同工之妙。

            AngularJS 將在表達式書寫的位置"輸出」資料。

四、AngularJS 表達式與JavaScript 表達式的區別

            類似JavaScript 表達式，AngularJS 表達式變數包含字母，運算符，Java##c##c      表達式   不同，AngularJS 表達式可以寫在HTML 中

            與JavaScript 表達式不同，AngularJS 表達式不支援條件判斷，循環及異常

    1器。

五、AngularJS定義一個模組：

 var app = angular.#module('myApp'#, [#] );

六、AngularJS指令學習：

• ##【

  ng- init：資料初始化】

 1、初始化單一變數

c6346739108a27d7f9e6744ab18f920e924a40b95b9c2560225f13e789d891d4姓名： < ;span ng-bind#="firstName ' ' lastName

1#">48d40be6cbb06ce6845b94a879a1c60e1beb5ce6cbaf7b8362d9ed3b4e04b621825307633e861fd7abf05541834b51f0【執行結果：姓名：Doe 】 2、初始化Json對象                     

#10704e2c3f4abaa7329ff7adf47ff227 90c16711c2f826216745ccc1d1a38149姓為{{ person.lastName }}#275727f65ed63d97c65f64c3644b0d82d13bcd4536a3bbdd69f4b3f7944d77fd【執行結果：姓為Doe】##3 、初始化陣列物件(陣列下標從0開始)#37434b31ab91eebaa8f03ae616af9527###### ################################################################################### 03ecbfdb04e58f46cbd2eed3524a42f3######第三個值是{{ points[2] }}######91a398ad1bfdfb0bd1d7978ffc7480c0######98b6f0d9d416c40d8f6de6fb5696c3b4【執行結果:######第三個值為19 ###】################## 【###ng-model###：資料同步】############# #######        1、AngularJS利用ng-model進行資料綁定，同時向後台傳遞數據，在前台中只要兩個相關聯的數據，一方變化，另一方會立即變化####### #########

  <p ng-app="" ng-init="quantity=1;price=5”> 
<h2>价格计算器</h2> 
数量： <input type="number"  ng-model="quantity”> 
价格： <input type="number" ng-model="price”>
<p><b>总价：</b> {{ quantity * price }}</p>
</p>

#########【###ng-repeat###：資料循環】################# #          1、AngularJS利用ng-repeat進行資料循環，循環的html標記是ng-repeat指令所在的標記###

                        5febe34c59450fb17b70c81c5ffd10f9 

                                  d3771b0717303fa4cff39e39630091b7使用 ng-repeat 来循环数组8c05e4ba700ecf3a3fba632670b48d2e 

                                  94cf9f71896cce458971adf2bc978fb1

                                          4fa76e168b8fe1de649ff42059b63884

 {{ x }} 00264599778bfef15205fe2f698216e0

                                  6f304873f188339d0626400a7defcfa7 

                        721bb74aac4891df28f85ad785726569【执行结果：

li整一个标记和里面的内容进行循环重复】

• 【ng-app：应用程序】

1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，e388a4556c0f65e1904146cc1a846bee 元素是 AngularJS应用程序的"所有者"。     

2、ng-app 指令指明了应用,  ng-controller 指明了控制器，放在一个p的属性中，指明这一段p都在AngularJS的控制范围内

3、ng-app 指令定义了 AngularJS 应用程序的 根元素

4、ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序 

•  <p ng-app="" ng-init="firstName=&#39;John’">
                       <p>姓名为 <span ng-bind=“firstName”></span></p>
           </p

•  【ng-bind：数据绑定】  
  

         1、绑定单一变量（想看更多就到PHP中文网AngularJS开发手册中学习）

                 #5a3594befafe94cd75768614e630e4a45e3679267742af30ca4af3410e6eeddf姓名： < ;span ng-bind#="firstName ' ' lastName

1#">4d35186a4d4397a4145e1e8ea9385474ecd039181dc9a2e360f8ca33ddf68c9982344f3bb5789e479fd08ad906dfe9f4【執行結果：姓名：Doe 】        2、初始化Json對象                ea376224459838868c5b1722c3a2718bec02a3e345caa99d650bef5a6ddf3de2姓為51a32127c5082c4c897357e7c168e29bd6d448110e0324953b5d7bc1e2b276ce77c0e188e8a6e0de9e8d776fa76a706b#67fad9d2eae1c76105328819a3c22d3c【執行結果：姓為Doe】

        3、初始化陣列物件(

陣列下標從0開始

)

• #               8ef78fe5cb07eeaa03d23a92585d5ddd"######points=[1,15,19,2,40] ######"######>#########4e6f63b2c1a96d9fa375d49c01c14d94##################################第三個值為 da259a75b378c28a49067eaeb69e90a754bdf357c58b8a65c66d7c19c8e4d114# #####3f5a9f5078febde5388a5f5ac27203ad#######3f5a9f5078febde5388a5f5ac27203ad【執行結果:######第三個值為19###】###################【###ng-show：###資料展示】# #################          1、ng-show指令在ng-show屬性的值為true的情況下就會顯示ng-show指令所在的標記內容          ###

                       88dadd5e70e90027e9f320651b48d218

  
                                 與 lt;input type="email " name="myAddress" ng-model="text"#>
  
                                             不是一個合法的郵箱地址2f2ea01482151c2429fae2b48f392989
  ##                     fe15baa833b692b9b9d64e723d0aeee7

               【 執行結果：當myAddress這個輸入框輸入的值是一個合法郵箱地址的話，那麼「不是一個合法的郵箱地址」就不會展示，否則，就會展示！ 】

                 {{myForm.myAddress.$valid}} (若輸入的數值為合法的則為true)
  • ## $dirty}} (如果數值改變則為true)

                   {{myForm.myAddress.$touched}} (如果透過觸控螢幕點擊則為true)【這些一般作為ng-show的判斷條件】
    

  # 【
  ng-

  options：下拉選擇】
  

              1、建立程式碼             # select>4a086327eab81a570570135e226637b8{{x}}cd3986402bcab1ee9896644f6a19108e

  6ea4a9224032427ff186e4ba7fb9a2a4######

                      【ng-repeat的範例】
  

                             ites"> ;18bb6ffaf0152bbe49cd8a3620346341

                      【ng-options中的範例】

  ##                         ng-repeat 有局限性，ng-repeat選擇的是一個字串，而ng-options選擇的是一個物件

  # 【

  ng-disabled
   ：標示按鈕屬性是不是可用】
              1、true表示按鈕不可用，false表示按鈕可用

  # 【

  ng-hide
  ：標示標記是否隱藏】

  • 
    

              1、true表示ng-hide所在的標記是隱藏的，false表示ng-hide所在的標記是顯示的，和ng-show是相反的

  # 【

  ng-click
  ：AngularJS的點擊事件】 

  • 
    

               1、ng-click指令定義了AngularJS點選事件

  #七、自訂指令的定義與使用

  
  

   【

  .directive 
  ：新增自訂指令】

  • 1、指令定義 
    

    app.directive("runoobDirective", function() {
    var app = angular.module("myApp", []);

     return {

            restrit:”A”,【限制指令只能作為屬性使用】

            template : "

    ##       4a249f0d628e2318394fd9b75b4636b1自訂指令!473f0a7621bec819994bb5020d29372a"

    # };

    } );

  2、指令的呼叫

  • 標記呼叫：

    35adab23ecc8461b841370eb93e4f71be3de340255482cd94387496516a6677b59cafe4c24851b7fd081b4cc4015f4a6
  屬性呼叫：

  # e4164c80d9da080a9319062219e09ba6bba4ac3bf17e0f843e61b890e62d3fcd 類別名稱呼叫：caf904127b51129e581f0511d9fc943f94b3e26ee717c64999d7867364b1b4a3

  註解呼叫：f5d8b3fe03ed9ac581569e06355cbdf0 【執行結果：

  自訂指令！注意這執行結果不是註解

  】 
   3、限制指令使用範圍(預設是作為EA)

  
  

 E：作為元素名稱使用

 A：使用屬性

 C：作為類別名稱使用

 M：作為註解使用

#【注意】1、type=「number」   表示此輸入框是數字格式的，可​​以向上向下點選增加數字或減少數字，但允許輸入非數字字元 

#

這篇文章到這就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問。

以上是AngularJS前端框架怎麼用？ angularjs前端框架的使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！