آموزش انگولارجی اس – قسمت5- event های انگولارجی اس

event های انگولارجی اس

event های انگولارجی اس – آموزش انگولارapi – دستور include در angularjs 

لیست مقاله :

  • مقدمه
  • event های انگولارجی اس
  • رخ داد یا event نشانگر ( موس)
  • دستورالعمل ng-click
  • شی event$
  • آموزش انگولارapi
  • API سراسری انگولارجی اس
  • angular.uppercase
  • angular.lowercase
  • angular.isString
  • angular.isNumber
  • دستور include در angularjs
  • افزودن فایل از ادرس دیگر

 

دراین قسمت از آموزش انگولارجی اس به بررسی event های انگولارجی اس یا رخ داد ها خواهیم پرداخت.

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

 

انگولارجی اس هم دستورالعمل مخصوص خود برای event ها یا رخ داد ها را دارد.

 

event های انگولارجی اس

برای فعالسازی دستورالعمل event یا رخ داد ها در انگولارجی اس میتوانید از یک یا چند دستورالعمل زیر استفاده کنید :

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

 

استفاده از دستورالعمل های بالا در رخ دادهای html باعث میشود که تابع خاص شما اجرا شود.

یکی از event های انگولارجی اس یک رخ داد HTML را بازنویسی نخواهد کرد، هر دو رویداد اجرا خواهند شد.

 

رخ داد یا event نشانگر ( موس)

رخ داد نمایشگر هنگامی اجرا میشود که نشانگر یا موس شما روی المنت قرار بگیرد برای استفاده از این دستورالعمل باید از کد های زیر استفاده کنید :

 

  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave

 

رخ دادهای زیر هنگامی اجرا میشوند که بر روی المنت خاصی کلیک کنید:

  • ng-mousedown
  • ng-mouseup
  • ng-click
  •  

شما میتوانید از رخ داد های موس بر روی هر تگ html استفاده کنید برای درک بهتر این موضوع به مثال زیر توجه کنید.

 

<div ng-app=”myApp” ng-controller=”myCtrl”>

<h3 ng-mousemove=”count = count + 1″>موس را روی من بکش!</h3>

<h2>{{ count }}</h2>

</div>

< script >

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.count = 0;

});

</script>

با کشیدن موس بر روی المنت بالا میبینید که عدد ۰ داده شده تغییر میکند.

 

دستورالعمل ng-click

همانطور که از تیتر این موضوع مشخص است این دستورالعمل هنگامی اجرا میشود که بر روی المنت خاصی کلیک شود ، برای درک بهتر این موضوع به مثال زیر توجه کنید:

<div ng-app=”myApp” ng-controller=”myCtrl”>

<button ng-click=”count = count + 1″>Click me!</button>

<p>{{ count }}</p>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

  $scope.count = 0;

});

</script>

همچنین برای اجرا شدن کد فوق میتوانید از تابعی استفاده کنید ، به مثال زیر توجه کنید :

<div ng-app=”myApp” ng-controller=”myCtrl”>

<button ng-click=”myFunction()”>Click me!</button>

<p>{{ count }}</p>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

  $scope.count = 0;

  $scope.myFunction = function() {

    $scope.count++;

  }

});

</script>

Toggle, True/False

اگر می خواهید یک بخش از کد اچ تی ام ال را هنگامی که یک دکمه روی آن کلیک می کنید نشان می دهد و هنگامی که دکمه دوباره کلیک می شود، مانند یک منوی کشویی پنهان می شود، دکمه را مانند یک سوئیچ تغییر دهید:

<div ng-app=”myApp” ng-controller=”myCtrl”>

<button ng-click=”myFunc()”>بر روی من کلیک کن!</button>

<div ng-show=”showMe”>

    <h3>منو:</h3>

    <div>زیر مجموعه</div>

    <div>زیر مجموعه</div>

    <div>زیر مجموعه</div>

</div>

</div>

< script >

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.showMe = false;

    $scope.myFunc = function() {

        $scope.showMe = !$scope.showMe;

    }

});

</script>

متغیر showMe به عنوان مقدار بولین اشتباه شروع می شود.

تابع myFunc متغیر showMe را با مخالف بودن آن با استفاده از! (نقیض) استفاده میکند.

 

شی event$

هنگام فراخوانی تابع می توانید از شی event$ به عنوان یک پارامتر عبور کنید.

شی event$ حاوی رویداد مرورگر است:

<div ng-app=”myApp” ng-controller=”myCtrl”>

<h3 ng-mousemove=”myFunc($event)”>موس را روی من قرار ده!</h3>

<p>موقعیت موس: {{x + ‘, ‘ + y}}</p>

</div>

< script >

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.myFunc = function(myE) {

        $scope.x = myE.clientX;

        $scope.y = myE.clientY;

    }

});

</script>

 

 

آموزش انگولارapi

واژه ی API سرنام واژگان Application Programming Interface می باشد.

 

API سراسری انگولارجی اس

API سراسری انگولار، یک مجموعه از توابع جاوااسکریپت می باشد که از آن برای انجام وظایفی از قبیل زیر استفاده می شود:

  • مقایسه ی اشیاء
  • تکرار اشیاء
  • تبدیل داده ها

توابع API سراسری انگولار دسترسی استفاده از شیء انگولار را دارا می باشند.

در زیر یک لیست از توابع API متداول nv آموزش انگولارapi را مشاهده می نمایید:

 

APIتوضیحات
()angular.lowercase

تبدیل یک رشته به حروف کوچک

()angular.uppercase

تبدیل یک رشته به حروف بزرگ

()angular.isString

در صورتی که مرجع مورد نظر یک رشته باشد، true را برمی گرداند. 

()angular.isNumber

در صورتی که مرجع مورد نظر یک عدد باشد، true را برمی گرداند. 

 

angular.uppercase()

 

<!DOCTYPE html>

<html>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

<body>

<div ng-app=”myApp” ng-controller=”myCtrl”>

<p>{{ x1 }}</p>

<p>{{ x2 }}</p>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.x1 = “John”;

    $scope.x2 = angular.uppercase($scope.x1);

});

</script>

</body>

</html>

خروجی:

John

JOHN

angular.lowercase()

<!DOCTYPE html>

<html>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

<body>

<div ng-app=”myApp” ng-controller=”myCtrl”>

<p>{{ x1 }}</p>

<p>{{ x2 }}</p>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.x1 = “JOHN”;

    $scope.x2 = angular.lowercase($scope.x1);

});

</script>

 

</body>

</html>

 

خروجی :

JOHN

John

 

angular.isString()

<!DOCTYPE html>

<html>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

<body>

<div ng-app=”myApp” ng-controller=”myCtrl”>

<p>{{ x1 }}</p>

<p>{{ x2 }}</p>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.x1 = “JOHN”;

    $scope.x2 = angular.isString($scope.x1);

});

</script>

</body>

</html>

خروجی :

JOHN

True

angular.isNumber()

<!DOCTYPE html>

<html>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

<body>

<div ng-app=”myApp” ng-controller=”myCtrl”>

<p>{{ x1 }}</p>

<p>{{ x2 }}</p>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.x1 = “JOHN”;

    $scope.x2 = angular.isNumber($scope.x1);

});

</script>

</body>

</html>

خروجی :

JOHN

False

 

اضافه کردن فایل با دستور include

دستور include در angularjs

همانطور که اشاره شد شما با استفاده از انگولارجی اس و دستورالعمل ng-include میتوانید یک فایل html به صفحه ی خود اضافه کنید برای درک بهتر این موضوع به مثال زیر توجه کنید.

<body ng-app=””>

<div ng-include=”‘myFile.htm'”></div>

</body>

در بالا شما به سادگی توانستید یک فایل html را بصورت فایل جاگانه به فایل اصلی خود اضافه کنید.

 

کدهای فایل include

هر فایلی را که توسط دستورالعمل ng-include به صفحه اضافه میکنید خود نیز میتواند شامل کدهای angularjs باشد. برای مثال فایل myTable.html را بصورت زیر مینویسیم.

<table>

  <tr ng-repeat=”x in names”>

    <td>{{ x.Name }}</td>

    <td>{{ x.Country }}</td>

  </tr>

</table>

هنگامی که شما فایل myTabel.html را به صفحه ی خود اضافه میکنید ، تمامی کدها به درستی اجرا خواهند شد ، حتی کدهای انگولاری که در داخل فایل اضافه(myTabel.html) شده قرار دارند.

قطعه کد بالا نمایانگر یک جدول و تکرار ستون های ان در angularjs می باشد . وقتی شما قطعه کد بالا را به کدهای زیر اضافه کنید دستورات هر دو فایل بصورت کاملا صحیح اجرا خواهند شد.

<body>

<div ng-app=”myApp” ng-controller=”customersCtrl”>

  <div ng-include=”‘myTable.htm'”></div>

</div>

< script >

var app = angular.module(‘myApp’, []);

app.controller(‘customersCtrl’, function($scope, $http) {

  $http.get(“customers.php”).then(function (response) {

    $scope.names = response.data.records;

  });

});

</script>

برای درک بهتر اینکه کدهای customers.php را چگونه به صفحه اضافه کنید باید اموزش api انگولار جی اس را مطالعه کنید.

افزودن فایل از ادرس دیگر

درحالت پیش فرض انگولار جی اس به شما این اجازه را نخواهد داد که از ادرس دیگری خارج از دامین اصلی خود ادرسی را ثبت کنید. برای افزودن فایل از دامنه ی دیگر باید قانونی بودن ان دامین را با تابع زیر به اثبات برسانید و ان را در لیست سفید خود قرار دهید.

<body ng-app=”myApp”>

<div ng-include=”‘https://codepaz.com/angular_include.php'”></div>

< script >

var app = angular.module(‘myApp’, [])

app.config(function($sceDelegateProvider) {

  $sceDelegateProvider.resourceUrlWhitelist([

    ‘https://codepaz.com/**’

  ]);

});

</script>

</body>

اطمینان حاصل کنید که سرور در مقصد اجازه دسترسی به پرونده دامنه را متوقف می کند.

در اینجا به پایان این قسمت از آموزش انگولارجی اس رسیدیم.

برای اطلاعات بیشتر در زمینه event های انگولارجی اس میتوانید به این سایت w3schools مراجعه کنید.

درصورت داشتن هرگونه سوال میتوانید از قسمت کامنت های سایت و یا سایر راه های ارتباطی با ما در تماس باشید.

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

2 × سه =