آموزش ساخت فرم ساده توسط Angularjs

برای دستیابی به ویژگی های برابر با jQuery اصلی با نمونه ی ASP.NET Web API ، احتیاج به قابلیت ایجاد یک ویدیوی جدید داریم. نمونه ی اصلی رویداد ثبت فرم را دریافت میکند و داده های فرم را برای ثبت به صورت AJAX در Web Server سریالی میکند. با Angularjs فقط لازم است که تعدادی از المان های فرم را با استفاده از ( ng-model مستقیم) به مدل و یک رویداد کلیک را با استفاده از (ng-click مستقیم) Bind کنیم.

Angularjs

<form>
<input type="hidden" ng-model="editableVideo.Id"/>
<label>Title:</label>
<input type="text" ng-model="editableVideo.Title" required />
<label>Length</label>
<input type="number" ng-model="editableVideo.Length" min="1" max="360" />
<input type="submit" value="Save" ng-click="saveVideo()" />
</form>

یاداشت: یک ngSubmit مستقیم نیز وجود دارد، اما اگر نوع دیگری داشته باشیم Angularjs ، از ثبت فرم پیش فرض جلوگیری می کند. وقتی کاربر روی save کلیک کند، فقط لازم است که اطلاعات ویدئو جدید را به Web API اضافه کنیم.

کد controller به صورت زیر خواهد شد:

var VideoController = function ($scope, $http) {
 
    var serviceUrl = "/api/videos";
 
    var blankVideo = {
        Id: "",
        Title: "",
        Length: 75
    };
 
    var refreshVideos = function() {
        $http.get(serviceUrl).success(function (data) {
            $scope.videos = data;
        });                
    };
 
    $scope.isEditVisible = false;
 
    $scope.showEdit = function () {
        $scope.isEditVisible = true;
        $scope.editableVideo = angular.copy(blankVideo);
    };
 
    $scope.saveVideo = function() {
        $scope.isEditVisible = false;
        $http.post(serviceUrl, $scope.editableVideo)
             .success(function (video) {
                 $scope.videos.push(video);
             });
    };
 
    refreshVideos();
};

به یاد داشته باشید که نگهداری متود ها و داده های محلی در داخل یک کنترلر آسان تر است.

در مرحله بعد توانایی حذف و ویرایش کردن ویدئو های موجود لازم است، و سپس نمونه دقیقا مانند jQuery اصلی که میخواستیم ، رفتار می کند.

موفق باشید !