日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
帶你進入AngularJS的大門

  

創(chuàng)新互聯(lián)公司主營會昌網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),會昌h5小程序定制開發(fā)搭建,會昌網(wǎng)站營銷推廣歡迎會昌等地區(qū)企業(yè)咨詢

介紹

這是我寫的***篇關(guān)于Angular.js的文章，但是我確信看完這篇文章將對你了解Angular.js的基本知識有很大的幫助。

首先需要指出什么是angular js，其實說白了angular js就是Javascript的一個類庫，我們使用這個類庫可以很容易的創(chuàng)建web頁面。雙向綁定是angular js其中的一個重要特征，這也是相對于其他的Javascript的類庫來說angular js中很重要的特征。雙向綁定即是當(dāng)你修改任何屬性的值的時候，相關(guān)聯(lián)的html元素也將改變，你并不需要額外的去修改。

Angular js還為我們提供了MVVM（Model View ViewModel）的模型。MVVM的意思就是說Model是一個真實的對象，我們使用這個對象創(chuàng)建需要在頁面顯示的模型，并且調(diào)用視圖模型。View（視圖）即是我們需要輸出的頁面。

背景

如果你沒有使用angular js或者其它的和angular js有相似功能的類庫，比如knockout.js，那么當(dāng)我們編寫代碼的時候?qū)懜喔鼜?fù)雜的代碼。所以說使用angular js編寫應(yīng)用程序更快更高效，并且比其它的類庫更容易管理。

代碼使用

下面我們將通過一個簡單的例子來逐漸的了解angular js。

為了更好的理解angular js的知識，我們使用asp.net作為后臺的應(yīng)用程序來實現(xiàn)簡單的增刪改查的操作，并且在這個例子中我們使用的是靜態(tài)列表形式來展現(xiàn)增刪改查的操作。

在數(shù)據(jù)模型中有5個屬性，UserName、Address、Salary、IsMarried和Email。在視圖中列出了這些屬性的記錄，并且在每一條數(shù)據(jù)后面都有一個刪除和修改按鈕。通過這些按鈕我們能創(chuàng)建、修改和刪除靜態(tài)列表。

現(xiàn)在首先讓我們了解一下以下例子中使用到的屬性的含義

data-ng-app——表明這是angular 要處理的元素

data-ng-controller——指定用來處理此元素的angular 控制器

data-ng-bind——指定該元素綁定model中的哪個屬性（上面列出的UserName、Address、Salary、IsMarried或者是Email）

比如UserName是Model的屬性并且將該屬性綁定到定義的元素

data-ng-repeat——用來指定循環(huán)的數(shù)據(jù)

使用上面的語法，我們對UserData這個angular 對象屬性進行循環(huán)，取出里面的數(shù)據(jù)。limitTo:20表明最多循環(huán)20次，這是angular中的一個過濾器。當(dāng)然angular.js中還可以使用 其他的過濾器，比如uppercase、lowercase和currency等。

data-ng-click——用來綁定點擊事件

$index——表示循環(huán)中的索引

data-ng-model——將angular 模型應(yīng)用于html dom中，這表示當(dāng)修改input輸入框中的值時相應(yīng)的model中的屬性也會改變

data-ng-disabled——通過該屬性的值來禁用某個元素或者不禁用

下面讓我們看一下下面的代碼

var angularuserApp = angular.module("userApp", []);
angularuserApp.controller("userAppCtrl", function ($scope, $http, $interval, $window,$timeout) {})

***行代碼創(chuàng)建了一個對象，這是由html dom中data-ng-app指定的。另一行代碼創(chuàng)建了一個控制器，是由data-ng-controller指定的。

$http用來指定服務(wù)端的地址；$interval 和 $timeout就類似于jquery中的interval和timeout，這兩個變量在這個例子中只是定義但并沒有被使用到，其工作原理和jquery中的相同；$window的定義和Javascript中的window對象相同，使用這個變量可以實現(xiàn)你想用window對象實現(xiàn)的效果。

下面是所有HTML代碼

 
 
    
  
  
  1.  
    2. 
  
  
  2.      
    3. 
  
  
  3.          
    4. 
  
  
  4.              
    5. 
  
  
  5.              
    6. 
  
  
  6.              
    7. 
  
  
  7.              
    8. 
  
  
  8.              
    9. 
  
  
  9.              
    10. 
  
  
  10.              
    11. 
  
  
  11.              
    12. 
  
  
  12.          
    13. 
  
  
  13.          
    14. 
  
  
  14.              
    15. 
  
  
  15.                 User Name 
    16. 
  
  
  16.                 Address 
    17. 
  
  
  17.                 Email 
    18. 
  
  
  18.                 Salary 
    19. 
  
  
  19.                 Is Married 
    20. 
  
  
  20.              
    21. 
  
  
  21.          
    22. 
  
  
  22.          
    23. 
  
  
  23.              
    24. 
  
  
  24.                  
    25. 
  
  
  25.                      
    26. 
  
  
  26.                  
    27. 
  
  
  27.                  
    28. 
  
  
  28.                  
    29. 
  
  
  29.                  
    30. 
  
  
  30.                  
    31. 
  
  
  31.                   
    32. 
  
  
  32.                   
    33. 
  
  
  33.              
    34. 
  
  
  34.          
    35. 
  
  
  35.      
    36. 
  
  
  36.      
    37. 
  
  
  37.      
    38. 
  
  
  38.      
    39. 
  
  
  39.         
     Edit User Information 
     
    40. 
  
  
  40.          
    41. 
  
  
  41.              
    42. 
  
  
  42.                  
    43. 
  
  
  43.                     User Name : 
    44. 
  
  
  44.                  
    45. 
  
  
  45.                  
    46. 
  
  
  46.                      
    47. 
  
  
  47.                  
    48. 
  
  
  48.              
    49. 
  
  
  49.              
    50. 
  
  
  50.                  
    51. 
  
  
  51.                     Address : 
    52. 
  
  
  52.                  
    53. 
  
  
  53.                  
    54. 
  
  
  54.                      
    55. 
  
  
  55.                  
    56. 
  
  
  56.              
    57. 
  
  
  57.              
    58. 
  
  
  58.                  
    59. 
  
  
  59.                     Email : 
    60. 
  
  
  60.                  
    61. 
  
  
  61.                  
    62. 
  
  
  62.                      
    63. 
  
  
  63.                  
    64. 
  
  
  64.              
    65. 
  
  
  65.              
    66. 
  
  
  66.                  
    67. 
  
  
  67.                     Salary : 
    68. 
  
  
  68.                  
    69. 
  
  
  69.                  
    70. 
  
  
  70.                      
    71. 
  
  
  71.                  
    72. 
  
  
  72.              
    73. 
  
  
  73.              
    74. 
  
  
  74.                  
    75. 
  
  
  75.                     Is Married : 
    76. 
  
  
  76.                  
    77. 
  
  
  77.                  
    78. 
  
  
  78.                      
    79. 
  
  
  79.                  
    80. 
  
  
  80.              
    81. 
  
  
  81.              
    82. 
  
  
  82.                  
    83. 
  
  
  83.                      
    84. 
  
  
  84.                      
    85. 
  
  
  85.                  
    86. 
  
  
  86.  
    87. 
  
  
  87.              
    88. 
  
  
  88.          
    89. 
  
  
  89.      
    90.
 
  •  

    • 下面是控制器的實現(xiàn)代碼

     
 
      
  
  
    1. public class UserController : Controller 
      2. 
  
  
    2.    { 
      3. 
  
  
    3.        // 
      4. 
  
  
    4.        // GET: /User/ 
      5. 
  
  
    5.  
      6. 
  
  
    6.        public ActionResult Users() 
      7. 
  
  
    7.        { 
      8. 
  
  
    8.            return View(); 
      9. 
  
  
    9.        } 
      10. 
  
  
    10.  
      11. 
  
  
    11.        public JsonResult GetData() 
      12. 
  
  
    12.        { 
      13. 
  
  
    13.            List objList = new List(); 
      14. 
  
  
    14.  
      15. 
  
  
    15.            //==Create the test data for in view  ============================ 
      16. 
  
  
    16.            User objuser = new User(); 
      17. 
  
  
    17.            objuser.UserName = "Pragnesh Khalas"; 
      18. 
  
  
    18.            objuser.Address = "B-25 Swaminarayan Park Naroda Ahmedabad"; 
      19. 
  
  
    19.            objuser.Email = "pragnesh@gmail.com"; 
      20. 
  
  
    20.            objuser.Salary = 9000; 
      21. 
  
  
    21.            objuser.IsMarried = true; 
      22. 
  
  
    22.            objList.Add(objuser); 
      23. 
  
  
    23.  
      24. 
  
  
    24.            objuser = new User(); 
      25. 
  
  
    25.            objuser.UserName = "Rahul Patel"; 
      26. 
  
  
    26.            objuser.Address = "A-40 Navkar Soci. Ahmedabad"; 
      27. 
  
  
    27.            objuser.Email = "rahul@gmail.com"; 
      28. 
  
  
    28.            objuser.Salary = 8000; 
      29. 
  
  
    29.            objuser.IsMarried = true; 
      30. 
  
  
    30.            objList.Add(objuser); 
      31. 
  
  
    31.  
      32. 
  
  
    32.            objuser = new User(); 
      33. 
  
  
    33.            objuser.UserName = "Bhavin Patel"; 
      34. 
  
  
    34.            objuser.Address = "D-10 Bharat Soci. Ahmedabad"; 
      35. 
  
  
    35.            objuser.Email = "bhavin@gmail.com"; 
      36. 
  
  
    36.            objuser.Salary = 6000; 
      37. 
  
  
    37.            objuser.IsMarried = true; 
      38. 
  
  
    38.            objList.Add(objuser); 
      39. 
  
  
    39.  
      40. 
  
  
    40.            return Json(objList, JsonRequestBehavior.AllowGet); 
      41. 
  
  
    41.        } 
      42. 
  
  
    42.  
      43. 
  
  
    43.    } 
      44.

    下面是模型代碼

     
 
      
  
  
    1. public class User 
      2. 
  
  
    2. { 
      3. 
  
  
    3.     [Required] 
      4. 
  
  
    4.     public string UserName { get; set; } 
      5. 
  
  
    5.  
      6. 
  
  
    6.     [Required] 
      7. 
  
  
    7.     public string Address { get; set; } 
      8. 
  
  
    8.  
      9. 
  
  
    9.     [EmailAddress] 
      10. 
  
  
    10.     public string Email { get; set; } 
      11. 
  
  
    11.  
      12. 
  
  
    12.     public double? Salary { get; set; } 
      13. 
  
  
    13.     public bool? IsMarried { get; set; } 
      14. 
  
  
    14. } 
      15.

    以上就是本文的整體內(nèi)容，希望對你有所幫助。


    網(wǎng)站題目：帶你進入AngularJS的大門
    網(wǎng)站URL：http://www.dlmjj.cn/article/dpshpcs.html