ورود / ثبت نام
0
0

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

382 بازدید
Angularjs

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 اصلی که میخواستیم ، رفتار می کند.

موفق باشید !

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=16929
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

هیچ دیدگاهی نوشته نشده است.