帶你進入AngularJS的大門

跡憶發表於2016-02-25
AngularJS

介紹

這是我寫的第一篇關於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; }
}

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

相關文章