日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

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

  

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

介紹

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

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

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

背景

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

代碼使用

下面我們將通過一個(gè)簡(jiǎn)單的例子來逐漸的了解angular js。

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

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

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

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

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

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

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

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

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

data-ng-click——用來綁定點(diǎn)擊事件

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

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

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

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

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

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

$http用來指定服務(wù)端的地址；$interval 和 $timeout就類似于jquery中的interval和timeout，這兩個(gè)變量在這個(gè)例子中只是定義但并沒有被使用到，其工作原理和jquery中的相同；$window的定義和Javascript中的window對(duì)象相同，使用這個(gè)變量可以實(shí)現(xiàn)你想用window對(duì)象實(shí)現(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.
 
  •  

    • 下面是控制器的實(shí)現(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)容，希望對(duì)你有所幫助。


    當(dāng)前名稱：帶你進(jìn)入AngularJS的大門
    網(wǎng)站URL：http://www.5511xx.com/article/dpshpcs.html