آموزش گام به گام AngularJS قسمت هفتم: ویرایش درجای اطلاعات درجدول به کمک ng-include و ng-template

بازدید کنندگان : 1428 دسته بندی برنامه نویسی , برنامه نویسی سمت کلاینت , شروع کار با AngularJS
در مقاله قبل عملیات اصلی بر روی بانک اطلاعاتی را توسط Angular AJAX پیاده سازی کردیم ، در این مقاله کنترل ها را در 
فایل js جداگانه ذخیره میکنیم ، با ng-include آشنا میشویم وکمی کد هایمان را مرتب می کنیم ودرنهایت ویرایش درجا در جدول را 
توسط ng-template انجام میدهیم . 
ابتدا کد هایی که در تگ script نوشته بودیم را در یک فایل به نام GridController.js ذخیره کرده و در تگ Head فایل را 
اضافه می کنیم ، سپس کد های استایل را هم وارد یک فایل css اضافه کرده  و در تگ Head لینک میکنیم تا صفحه کمی مرتب 
شود . 
اکنون میخواهیم بخش جدول نمایش اطلاعات و فرم ثبت و ویرایش را در فایل های جداگانه قرار بدهیم ، یک فایل به نام 
Grid.Html ایجاد کرده و کدهایمان را در آن ذخیره میکنیم سپس از طریق ng-include این  فایل را به صفحه اضافه می کنیم ، 
در نهایت کد های ما به شکل زیر خواهد بود :
<html> 
<head> 
    <title>Angular CRUD</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="Controllers/GridController.js"></script> 
 
    <link href="Css/tables.css" rel="stylesheet" /> 
</head> 
 
<body ng-app="myApp" > 
 
    <div ng-include="'/Models/Grid.html'"></div> 
 
 </body> 
</html> 
همانطور که ملاحظه میکنیم به شکل قابل توجهی کدها خوانا تر و مرتب تر شده است  
دقت کنید که بنده برای منظم تر بودن فایل های مربوط به مدل را در پوشه Models و فایل کنترلر را در پوشه Controllers قرار 
دادم  ( در مقالات بعدی خواهید دید که ما میتوانیم چندین کنترل خواهیم داشت ) 
نکته دیگری که باید به آن توجه کنید بحث کنترلر هست ، ng-controller ما به داخل Grid.Html منتقل شده ، ما برای هر 
ng-include یک کنترلر جداگانه ایجاد می نماییم 
 
برای آشنایی بیشتر با ng-include،  ویدیئوی آموزشی کار با ng-include و UserControl های ASP.NET را ملاحظه نمایید 
 
خاطرتان هست که ویرایش جدول را در همان فرم درج انجام داده بودیم ، اکنون میخواهیم کمی سیاست کار را تغییر دهیم و عملیات 
ویرایش را داخل همان جدول انجام دهیم ، برای اینکار میتوانیم از template های AngularJS استفاده کنیم 
به سراغ فایل Grid.Html رفته و برای نمایش اطلاعات از ng-template به شکل زیر استفاده می کنیم :
<script type="text/ng-template" id="display"> 
    <td>{{row.name}}</td> 
    <td>{{row.family}}</td> 
    <td> 
        <input type="button" ng-click="delete($index)" value="Delete" /> 
        <input type="button" ng-click="edit($index)" value="Edit" /> 
    </td> 
</script> 
 محتویات داخل tr که ng-repeat شده بود را داخل یک تگ script از نوع text/ng-template ریختیم و یک id برای این 
template انتخاب کردیم ، اکنون کافیست از طریق ng-include این template را معرفی کنیم :
  <table> 
        <tr> 
            <th ng-click="sortOrder='name'">Name</th> 
            <th ng-click="sortOrder='family'">Family</th> 
            <th>Actions</th> 
        </tr> 
        <tr ng-repeat="row in myData | filter:search | orderBy:sortOrder" ng-include="'display'"></tr> 
    </table>
همانطور که ملاحظه می کنید ng-include="'display'"  باعث میشود محتویات داخل تمپلیت با آیدی display وارد ng-repeat 
شود . 
اکنون یک template دیگر برای ویرایش ایجاد می نماییم که input ها مدل شده باشند :
    <script type="text/ng-template" id="edit"> 
        <td><input type="text" ng-model="row.name" /></td> 
        <td><input type="text" ng-model="row.family" /></td> 
        <td> 
            - 
        </td> 
    </script> 
برای داینامیک کردن کافیست یک متغیر به نام مثلا myTemplate در کنترلر ایجاد کرده و مقدار پیشفرض آن را display قرار دهیم 
:
$scope.myTemplate = 'display';
سپس ng-includ را به این متغیر بایند کنیم :
<tr ng-repeat="row in myData | filter:search | orderBy:sortOrder" ng-include="myTemplate"></tr> 
 
به این نکته دقت کنید که اگر مقدار داخل ng-include داخل ' ' باشد به یک صفحه یا template اشاره میکند و اگر همانند 
myTemplate داخل کوتیشن نباشد به یک متغیر یا تابع اشاره میکند ( تابع باید دارای () باشد ) 
 
کار تقریبا تمام است کافیست متد های edit و update و cancel را کمی تغییر بدهیم :
    $scope.edit = function () { 
        $scope.isEditing = true; 
        $scope.myTemplate = 'edit'; 
    } 
 
    $scope.update = function () { 
        $scope.myTemplate = 'display'; 
        $scope.isEditing = false; 
 
 
        $http({ method: "POST", url: "/UserData/Update/", data: $scope.myData }); 
    } 
 
    $scope.cancel = function () { 
        $scope.myTemplate = 'display'; 
        $scope.isEditing = false; 
    } 
مشاهده میکنید که کار ساده تر هم شد ، یعنی فقط با مقدار دهی myTemplate وضعیت از نمایش به ویرایش و بالعکس تغییر میکند
نکته دیگر در مورد $http مربوط به update است ، از آنجایی که input ها مدل شده اند با تغییر مقدار داخل input مقادیر داخل myData نیز تغییر میکند بنابراین کافیست $scope.myData به عنوان مقدار data به آدرس مورد نظر به صورت AJAX پاس شود تا اطلاعات جدید در بانک اطلاعاتی ذخیره گردد :
 
فایل پروژه :
https://www.dropbox.com/s/4t4uh24w7q8kafl/Angular-7.rar?dl=0

در مقالعه بعدی به آشنایی با Service و Factory می پردازیم.

منابع :

نظرات کاربران