自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

帶你進(jìn)入AngularJS的大門

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

介紹

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

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

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

 

背景

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

代碼使用

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

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

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

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

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

data-ng-controller——指定用來(lái)處理此元素的angular 控制器

<div id="divUserList" data-ng-app="userApp" data-ng-controller="userAppCtrl"> </div>

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

<strong data-ng-bind="UserName"></strong>

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

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

<tr data-ng-repeat="x in UserData | limitTo:20"  >

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

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

<input type="button" id="btnDelete" value="Delete" data-ng-click="DeleteRow($index)" />

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

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

<input type="text" data-ng-model="UserName" required />

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

<input type="button" id="btnSaveAll" value="Save" data-ng-click="SaveRecord()" data-ng-disabled="CheckRecord()" />

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

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

下面是所有HTML代碼

  1. <div id="divUserList" data-ng-app="userApp" data-ng-controller="userAppCtrl"> 
  2.     <table class="table-striped table-hover" style="width:100%;"> 
  3.         <colgroup> 
  4.             <col style="width:15%;"/> 
  5.             <col style="width:25%;" /> 
  6.             <col style="width:10%;" /> 
  7.             <col style="width:10%;" /> 
  8.             <col style="width:15%;" /> 
  9.             <col style="width:10%;" /> 
  10.             <col style="width:7%;" /> 
  11.             <col style="width:7%;" /> 
  12.         </colgroup> 
  13.         <thead> 
  14.             <tr> 
  15.                 <th>User Name</th> 
  16.                 <th>Address</th> 
  17.                 <th>Email</th> 
  18.                 <th>Salary</th> 
  19.                 <th>Is Married</th> 
  20.             </tr> 
  21.         </thead> 
  22.         <tbody> 
  23.             <tr data-ng-repeat="x in UserData | limitTo:20"  > 
  24.                 <td> 
  25.                     <strong data-ng-bind="x.UserName"></strong> 
  26.                 </td> 
  27.                 <td><span data-ng-bind="x.Address"></span></td> 
  28.                 <td><span data-ng-bind="x.Email"></span></td> 
  29.                 <td><span data-ng-bind="x.Salary"></span></td> 
  30.                 <td><span data-ng-bind="x.IsMarried"></span></td> 
  31.                 <td><input type="button" id="btnEdit" value="Edit" data-ng-click="EditRow(x)" /> </td> 
  32.                 <td><input type="button" id="btnDelete" value="Delete" data-ng-click="DeleteRow($index)" /> </td> 
  33.             </tr> 
  34.         </tbody> 
  35.     </table> 
  36.     <br /> 
  37.     <br /> 
  38.     <form name="myform" novalidate> 
  39.         <h3> Edit User Information </h3> 
  40.         <table class="table-striped table-hover" style="width:100%;"> 
  41.             <tr> 
  42.                 <td> 
  43.                     User Name : 
  44.                 </td> 
  45.                 <td> 
  46.                     <input type="text" data-ng-model="UserName" required /> 
  47.                 </td> 
  48.             </tr> 
  49.             <tr> 
  50.                 <td> 
  51.                     Address : 
  52.                 </td> 
  53.                 <td> 
  54.                     <input type="text" data-ng-model="Address" required /> 
  55.                 </td> 
  56.             </tr> 
  57.             <tr> 
  58.                 <td> 
  59.                     Email : 
  60.                 </td> 
  61.                 <td> 
  62.                     <input type="email" data-ng-model="Email" /> 
  63.                 </td> 
  64.             </tr> 
  65.             <tr> 
  66.                 <td> 
  67.                     Salary : 
  68.                 </td> 
  69.                 <td> 
  70.                     <input type="number" data-ng-model="Salary" /> 
  71.                 </td> 
  72.             </tr> 
  73.             <tr> 
  74.                 <td> 
  75.                     Is Married : 
  76.                 </td> 
  77.                 <td> 
  78.                     <input type="checkbox" data-ng-model="IsMarried" /> 
  79.                 </td> 
  80.             </tr> 
  81.             <tr> 
  82.                 <td colspan="2"> 
  83.                     <input type="button" id="btnSaveAll" value="Save" data-ng-click="SaveRecord()" data-ng-disabled="CheckRecord()" /> 
  84.                     <input type="button" id="btnClear" value="Clear" data-ng-click="ClearRecord()" data-ng-disabled="CheckRecord()" /> 
  85.                 </td> 
  86.  
  87.             </tr> 
  88.         </table> 
  89.     </form> 
  90. </div> 
  91. <script> 
  92.     var angularuserApp = angular.module("userApp", []); 
  93.     angularuserApp.controller("userAppCtrl", function ($scope, $http, $interval, $window, $timeout) { 
  94.         //==Intit Value================ 
  95.         $scope.UserName = ""; 
  96.         $scope.Address = ""; 
  97.         $scope.Email = ""; 
  98.         $scope.Salary = null; 
  99.         $scope.IsMarried = null; 
  100.         //==Intit Value================ 
  101.         $scope.LoadIntialData = function () { 
  102.             var routeurl = '@Url.Action("GetData", "User")'; 
  103.             $http.get(routeurl).success(function (data) { 
  104.                 $scope.UserData = data; 
  105.             }).error(function (e) { 
  106.                 // error handling 
  107.             }); 
  108.         } 
  109.         $scope.LoadIntialData(); 
  110.         $scope.DeleteRow = function (index) { 
  111.             $scope.UserData.splice(index, 1); 
  112.             //==================if you use real time application then need to call to conroller from remove record from db======= 
  113.         } 
  114.         $scope.EditRow = function (ele) { 
  115.             $scope.UserName = ele.UserName; 
  116.             $scope.Address = ele.Address; 
  117.             $scope.Email = ele.Email; 
  118.             $scope.Salary = ele.Salary; 
  119.             $scope.IsMarried = ele.IsMarried; 
  120.         } 
  121.         $scope.SaveRecord = function () { 
  122.             var invalidfiled = ""; 
  123.             if (!$scope.myform.$valid) { 
  124.                 return; 
  125.             } 
  126.             else { 
  127.                 var IsItemUpdate = false; 
  128.                 $.each($scope.UserData, function (i, n) { 
  129.                     if (n.UserName == $scope.UserName && n.Address == $scope.Address) { 
  130.                         IsItemUpdate = true; 
  131.                         n.Email = $scope.Email; 
  132.                         n.Salary = $scope.Salary; 
  133.                         n.IsMarried = $scope.IsMarried; 
  134.                     } 
  135.                 }); 
  136.                 if (IsItemUpdate == false) { 
  137.                     var obj = new Object(); 
  138.                     obj.UserName = $scope.UserName; 
  139.                     obj.Address = $scope.Address; 
  140.                     obj.Email = $scope.Email; 
  141.                     obj.Salary = $scope.Salary; 
  142.                     obj.IsMarried = $scope.IsMarried; 
  143.                     $scope.UserData.unshift(obj); 
  144.                 } 
  145.                 $scope.ClearRecord(); 
  146.                 //==================if you use real time application then need to call to conroller from save record from db======= 
  147.             } 
  148.         } 
  149.         $scope.CheckRecord = function () { 
  150.             if ($scope.UserName != "" && $scope.Address != "") 
  151.                 return false; 
  152.             else 
  153.                 return true; 
  154.         } 
  155.         $scope.ClearRecord = function () { 
  156.             $scope.UserName = ""; 
  157.             $scope.Address = ""; 
  158.             $scope.Email = ""; 
  159.             $scope.Salary = null; 
  160.             $scope.IsMarried = null; 
  161.         } 
  162.     }); 
  163. </script> 

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

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

下面是模型代碼

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

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

 

責(zé)任編輯：王雪燕 來(lái)源： 跡憶
AngularJS
相關(guān)推薦

2021-02-16 09:17:40

VimLinux編輯器

2013-10-18 10:11:10

AngularJS項(xiàng)目

2019-04-04 08:27:35

OSITCPIP

2010-09-25 16:12:45

JVM虛擬機(jī)

2022-12-06 08:39:27

Vue3Reactive

2019-08-19 09:10:14

人工智能深度學(xué)習(xí)技術(shù)

2022-05-31 08:01:53

微前端巨石應(yīng)用微服務(wù)

2021-04-27 09:22:12

QML編程語(yǔ)言

2023-03-27 16:33:31

Java編程開(kāi)發(fā)

2014-05-30 10:51:55

PhpStormAngularJS

2009-06-19 16:12:07

IPv6代理服務(wù)器IPv6代理設(shè)備IPv協(xié)議

2009-12-09 09:41:56

Linux系統(tǒng)

2017-04-18 10:59:28

軟件測(cè)試認(rèn)證

2014-01-06 10:44:17

Angular數(shù)據(jù)

2014-02-28 13:46:35

Angular代碼

2019-10-22 22:43:55

Linux網(wǎng)絡(luò)安全數(shù)據(jù)

2017-09-13 09:05:29

iOS11iOS蘋果

2009-11-30 09:55:16

阿爾法v6路由器

2014-08-08 13:40:53

AngularJS模塊

2022-03-17 13:07:02

物聯(lián)網(wǎng)網(wǎng)絡(luò)攻擊
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)