介紹

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

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

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

背景

如果你沒有使用angular js或者其它的和angular js有相似功能的類庫，比如knockout.js，那么當我們編寫代碼的時候將會寫更多更復雜的代碼。所以說使用angular js編寫應用程序更快更高效，并且比其它的類庫更容易管理。

代碼使用

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

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

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

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

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

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

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

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

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

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

data-ng-repeat——用來指定循環的數據

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

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

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

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

$index——表示循環中的索引

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

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

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

<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) {})

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

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

下面是所有HTML代碼

<div id="divUserList" data-ng-app="userApp" data-ng-controller="userAppCtrl"> 
    <table class="table-striped table-hover" style="width:100%;"> 
        <colgroup> 
            <col style="width:15%;"/> 
            <col style="width:25%;" /> 
            <col style="width:10%;" /> 
            <col style="width:10%;" /> 
            <col style="width:15%;" /> 
            <col style="width:10%;" /> 
            <col style="width:7%;" /> 
            <col style="width:7%;" /> 
        </colgroup> 
        <thead> 
            <tr> 
                <th>User Name</th> 
                <th>Address</th> 
                <th>Email</th> 
                <th>Salary</th> 
                <th>Is Married</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr data-ng-repeat="x in UserData | limitTo:20"  > 
                <td> 
                    <strong data-ng-bind="x.UserName"></strong> 
                </td> 
                <td><span data-ng-bind="x.Address"></span></td> 
                <td><span data-ng-bind="x.Email"></span></td> 
                <td><span data-ng-bind="x.Salary"></span></td> 
                <td><span data-ng-bind="x.IsMarried"></span></td> 
                <td><input type="button" id="btnEdit" value="Edit" data-ng-click="EditRow(x)" /> </td> 
                <td><input type="button" id="btnDelete" value="Delete" data-ng-click="DeleteRow($index)" /> </td> 
            </tr> 
        </tbody> 
    </table> 
    <br /> 
    <br /> 
    <form name="myform" novalidate> 
        <h3> Edit User Information </h3> 
        <table class="table-striped table-hover" style="width:100%;"> 
            <tr> 
                <td> 
                    User Name : 
                </td> 
                <td> 
                    <input type="text" data-ng-model="UserName" required /> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                    Address : 
                </td> 
                <td> 
                    <input type="text" data-ng-model="Address" required /> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                    Email : 
                </td> 
                <td> 
                    <input type="email" data-ng-model="Email" /> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                    Salary : 
                </td> 
                <td> 
                    <input type="number" data-ng-model="Salary" /> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                    Is Married : 
                </td> 
                <td> 
                    <input type="checkbox" data-ng-model="IsMarried" /> 
                </td> 
            </tr> 
            <tr> 
                <td colspan="2"> 
                    <input type="button" id="btnSaveAll" value="Save" data-ng-click="SaveRecord()" data-ng-disabled="CheckRecord()" /> 
                    <input type="button" id="btnClear" value="Clear" data-ng-click="ClearRecord()" data-ng-disabled="CheckRecord()" /> 
                </td> 
 
            </tr> 
        </table> 
    </form> 
</div> 
<script> 
    var angularuserApp = angular.module("userApp", []); 
    angularuserApp.controller("userAppCtrl", function ($scope, $http, $interval, $window, $timeout) { 
        //==Intit Value================ 
        $scope.UserName = ""; 
        $scope.Address = ""; 
        $scope.Email = ""; 
        $scope.Salary = null; 
        $scope.IsMarried = null; 
        //==Intit Value================ 
        $scope.LoadIntialData = function () { 
            var routeurl = '@Url.Action("GetData", "User")'; 
            $http.get(routeurl).success(function (data) { 
                $scope.UserData = data; 
            }).error(function (e) { 
                // error handling 
            }); 
        } 
        $scope.LoadIntialData(); 
        $scope.DeleteRow = function (index) { 
            $scope.UserData.splice(index, 1); 
            //==================if you use real time application then need to call to conroller from remove record from db======= 
        } 
        $scope.EditRow = function (ele) { 
            $scope.UserName = ele.UserName; 
            $scope.Address = ele.Address; 
            $scope.Email = ele.Email; 
            $scope.Salary = ele.Salary; 
            $scope.IsMarried = ele.IsMarried; 
        } 
        $scope.SaveRecord = function () { 
            var invalidfiled = ""; 
            if (!$scope.myform.$valid) { 
                return; 
            } 
            else { 
                var IsItemUpdate = false; 
                $.each($scope.UserData, function (i, n) { 
                    if (n.UserName == $scope.UserName && n.Address == $scope.Address) { 
                        IsItemUpdate = true; 
                        n.Email = $scope.Email; 
                        n.Salary = $scope.Salary; 
                        n.IsMarried = $scope.IsMarried; 
                    } 
                }); 
                if (IsItemUpdate == false) { 
                    var obj = new Object(); 
                    obj.UserName = $scope.UserName; 
                    obj.Address = $scope.Address; 
                    obj.Email = $scope.Email; 
                    obj.Salary = $scope.Salary; 
                    obj.IsMarried = $scope.IsMarried; 
                    $scope.UserData.unshift(obj); 
                } 
                $scope.ClearRecord(); 
                //==================if you use real time application then need to call to conroller from save record from db======= 
            } 
        } 
        $scope.CheckRecord = function () { 
            if ($scope.UserName != "" && $scope.Address != "") 
                return false; 
            else 
                return true; 
        } 
        $scope.ClearRecord = function () { 
            $scope.UserName = ""; 
            $scope.Address = ""; 
            $scope.Email = ""; 
            $scope.Salary = null; 
            $scope.IsMarried = null; 
        } 
    }); 
</script> 

下面是控制器的實現代碼

public class UserController : Controller 
   { 
       // 
       // GET: /User/ 
 
       public ActionResult Users() 
       { 
           return View(); 
       } 
 
       public JsonResult GetData() 
       { 
           List<User> objList = new List<User>(); 
 
           //==Create the test data for in view  ============================ 
           User objuser = new User(); 
           objuser.UserName = "Pragnesh Khalas"; 
           objuser.Address = "B-25 Swaminarayan Park Naroda Ahmedabad"; 
           objuser.Email = "pragnesh@gmail.com"; 
           objuser.Salary = 9000; 
           objuser.IsMarried = true; 
           objList.Add(objuser); 
 
           objuser = new User(); 
           objuser.UserName = "Rahul Patel"; 
           objuser.Address = "A-40 Navkar Soci. Ahmedabad"; 
           objuser.Email = "rahul@gmail.com"; 
           objuser.Salary = 8000; 
           objuser.IsMarried = true; 
           objList.Add(objuser); 
 
           objuser = new User(); 
           objuser.UserName = "Bhavin Patel"; 
           objuser.Address = "D-10 Bharat Soci. Ahmedabad"; 
           objuser.Email = "bhavin@gmail.com"; 
           objuser.Salary = 6000; 
           objuser.IsMarried = true; 
           objList.Add(objuser); 
 
           return Json(objList, JsonRequestBehavior.AllowGet); 
       } 
 
   } 

下面是模型代碼

public class User 
{ 
    [Required] 
    public string UserName { get; set; } 
 
    [Required] 
    public string Address { get; set; } 
 
    [EmailAddress] 
    public string Email { get; set; } 
 
    public double? Salary { get; set; } 
    public bool? IsMarried { get; set; } 
} 

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