بررسی Event ها در فریم ورک AngularJS

بررسی Event ها در فریم ورک AngularJS

در این پست از وبسایت پرووید، در رابطه با بررسی Event ها در فریم ورک AngularJS صحبت خواهیم کرد. به ادامه ی مطلب بروید.

در این قسمت از سری آموزش AngularJS از وب سایت پرووید در رابطه با Event ها و یا همان رویدادها صحبت می کنیم. در AngularJS رویدادها در قالب Directive هایی تعریف می شوند که برای اضافه کردن Behavior های Custom و یا سفارشی در زمان رخ دادن Event های مختلف مربوط به DOM وارد عمل می شوند. در رابطه با ماهیت Event ها در برنامه نویسی توصیه می کنیم که از آموزش ویدئویی Event ها در سی شارپ استفاده کنید. برای مثال شما می توانید در زمان رخ دادن Event هایی از قبیل Click و DblClick و MouseEnter اقدام به اجرا کردن کدهای مورد نظر خود کنید. در جدولی که در قسمت زیر می بینید، Event Directive های مختلف مربوط به AngularJS را برای شما قرار داده ایم.

بیایید در ادامه در رابطه با مهم ترین Event Directive ها در AngularJS صحبت کنیم.

بسته ی آموزش ویدئویی شروع به کار با Angular 2

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 دیدن کنید.

بررسی ng-click

همان طور که از نام این Directive مشخص است، از ng-click به منظور اضافه کردن یک Event Handler برای رویداد کلیک استفده می کنیم. این موضوع در کد زیر نشان داده شده است.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Enter Password: <input type="password" ng-model="password" /> <br />
            
        <button ng-click="DisplayMessage(password)">Show Password</button
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope, $window) {
            
            $scope.DisplayMessage = function (value) {
                $window.alert(value)
            }
        });
    </script>
</body>
</html>

همان طور که در کد بالا مشاهده می کنید، با استفاده از ng-click به عنوان یک Event Directive، اقدام به ایجاد کردن یک Function به نام DisplayMessage() کرده ایم که یک پارامتر ورودی با عنوان password را دریافت می کند. این Function با استفاده از ng-click زمانی اجرا می شود که کاربر بر روی یک Button کلیک کند.

علاوه بر این password یک Model Property است که با استفاده از ng-model به عنوان یک Directive در درون یک Input Box تعریف شده است. نکته دیگر این که DisplayMessage() به عنوان یک Function به $scope اضافه شده است و این $scope مربوط به MyController می باشد. بنابراین در زمان کلیک شدن بر روی Button این تابع قابل اجرا شدن است چرا که Button مورد نظر در myController  وجود دارد. نکته آخر این که از $window به عنوان یک سرویس برای نشان دادن یک MessageBox استفاده کرده ایم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

رویدادهای مربوط به Mouse

در مثالی که در قسمت زیر مشاهده می کنید، دو مورد از Directive های بسیار مهم و پرکاربرد در هندل کردن Mouse Event ها که ng-mouseenter و ng-mouseleave نام دارند، مورد بررسی قرار گرفته اند.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        .redDiv {
            width: 100px;
            height: 100px;
            background-color: red;
            padding:2px 2px 2px 2px;
        }

        .yellowDiv {
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding:2px 2px 2px 2px;
        }
    </style>
</head>
<body ng-app>
        <div ng-class="{redDiv: enter, yellowDiv: leave}" ng-mouseenter="enter=true;leave=false;" ng-mouseleave="leave=true;enter=false">
            Mouse <span ng-show="enter">Enter</span> <span ng-show="leave">Leave</span>
        </div>
</body>
</html>

همان طور که در مثال بالا مشاهده می کنید، با استفاده از ng-mouseleave و ng-mouseenter اقدام به تعیین مقدار درون Enter کرده ایم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core دیدن کنید.

این مقدار می تواند True و یا False باشد، زمانی که مقدار True انتخاب می شود کلاس redDiv به Div مورد نظر اعمال شده و زمانی که این مقدار False می شود، کلاس yellowDiv به Div مورد نظر اعمال می شود.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک Angular استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل برنامه نویسی تحت وب با Angular مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت