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、初始化單一變數

<p ng-app=##" " ng-init="firstName='John';lastName='Doe' "><p#>姓名： < ;span ng-bind#="firstName ' ' lastName

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

#<

#p## ##-#<

p="" #ng-init=##"person={firstName:'John',lastName:'Doe'}"> <p>姓為{{ person.lastName }}###p>p>【執行結果：姓為Doe】##3 、初始化陣列物件(陣列下標從0開始)#<

p

# 

• 
  

• ng-app

  =

  "

"

# 

ng-init#######=### ###"######points=[1,15,19,2,40]#######」######>###### ################################################################################### <######p######>######第三個值是{{ points[2] }}############【執行結果:######第三個值為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指令所在的標記###

                        <p ng-app="" ng-init="names=['Jani','Hege','Kai']”> 

                                  <p>使用 ng-repeat 来循环数组p> 

                                  <ul>

                                          <li ng-repeat="x in names">

 {{ x }} li>

                                  ul> 

                        p>【执行结果：

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

• 【ng-app：应用程序】

1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，

元素是 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开发手册中学习）

                 #<p ng-app " ng-init="firstName='John';lastName='Doe' "><p#>姓名： < ;span ng-bind#="firstName ' ' lastName

1#">span>p>p#>【執行結果：姓名：Doe 】        2、初始化Json對象                <p ng-app

=""

 #ng-init=##"person={firstName:'John',lastName:'Doe'}"><##p ##>姓為<span ng-bind="person.lastName">p>###p>【執行結果：姓為Doe】

        3、初始化陣列物件(

陣列下標從0開始

)

• #               <

  p

 

ng-app

#=#######"#########ng-app####### ##### ######ng-init######span class="hl-quotes">"######points=[1,15,19,2,40] ######"######>#########<#############>##################################第三個值為 <###span###### ######ng-bind######=###"points[2]”># ############【執行結果:######第三個值為19###】###################【###ng-show：###資料展示】# #################          1、ng-show指令在ng-show屬性的值為true的情況下就會顯示ng-show指令所在的標記內容          ###

                     <form ng-app="" name=#ng-app= >

                               與 lt;input type="email " name="myAddress" ng-model="text"#>

                                           不是一個合法的郵箱地址<

/span

>
##                     <

##/form

#/form
#/form

##>

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

               {{myForm.myAddress.$valid}} (若輸入的數值為合法的則為true)

• ## $dirty}} (如果數值改變則為true)

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

# 【

ng-

options：下拉選擇】

            1、建立程式碼             # select><option ng-repeat="x in names">{{x}}</option>

<#### ##/select######>######

                    【ng-repeat的範例】

                           ites"> ;

                    【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 : "

  ##       

  自訂指令!

  "

  # };

  } );

2、指令的呼叫

• 標記呼叫：

  <

  runoob-directive #></runoob-directive#>

屬性呼叫：

# <p runoob-directive#></p#> 類別名稱呼叫：

註解呼叫：