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

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

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

در این قسمت از این آموزش از وب سایت پرووید در رابطه با Expression ها در فریم ورک AngularJS صحبت خواهیم کرد. به طور خیلی ساده  Expression ها شبیه به همان Expression های جاوااسکریپت هستند که در AngularJS در درون {} قرار میگیرند. اتفاقی که در AngularJS می افتد این است که Expression نوشته شده، محاسبه شده و نتیجه آن به یک Element از HTML منتسب یا اصطلاحاً Bind می شود. نکته جالبی که در رابطه با Expression ها باید بدانید این است که آن ها می توانند حاوی Operator ها یا همان عملگرها و متغیرها و حتی Literal ها باشند.

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

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

این موضوع دقیقا در جاوااسکریپت نیز اتفاق می افتد. ضمناً یک آموزش جامع از جاوااسکریپت را به زودی بر روی وب سایت پرووید منتشر خواهیم کرد. علاوه بر این می توانید از بسته ی آموزش ویدئویی جاوا اسکریپ نیز استفاده کنید.

یک مثال ساده از یک Expression در جاوااسکریپت {{2/2}}  خواهد بود که نتیجه آن عدد 1 می باشد که در درون یک Element از HTML قرار خواهد گرفت. در قسمت زیر مثال هایی از Expression های AngularJS را مشاهده می کنید.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <h1>AngularJS Expression Demo:</h1>
    <div ng-app>
        2 + 2 = {{2 + 2}} <br />
        2 - 2 = {{2 - 2}} <br />
        2 * 2 = {{2 * 2}} <br />
        2 / 2 = {{2 / 2}}
    </div> 
</body>
</html>

خروجی این کد شبیه به تصویر زیر خواهد بود.

همان طور که قبلا نیز گفتیم Expression ها در AngularJS شبیه به Expression ها در جاوااسکریپت هستند، با این وجود تفاوت هایی نیز وجود دارد.

  • Expression ها در AngularJS نمی توانند حاوی جملات شرطی، حلقه های تکرار، Exception ها و عبارات با قاعده باشند.
  • در Expression های AngularJS نمی توان Function تعریف نمود.
  • در Expression های AngularJS نمی توان از کاما و یا void استفاده کرد.
  • در Expression های AngularJS نمی توان از کلمه کلیدی return استفاده کرد.

همان طور که گفتیم Expression ها در AngularJS می توانند حاوی Literal هایی باشند که از هر Data Type ای باشند.

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

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

منظور از Data Type نوع داده ای یک Literal است. برای مثال number و یا string دو Data Type ای هستند که مورد استفاده قرار می گیرند. کد زیر این موضوع را نشان می دهد.

<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <h1>AngularJS Expression Demo:</h1>
    <div ng-app>
        {{"Hello World"}}<br />
        {{100}}<br />
        {{true}}<br />
        {{10.2}}
    </div>
</body>
</html>

خروجی این کد شبیه به تصویر زیر خواهد بود.

نکته دیگر این که Expression های AngularJS می توانند دارای عملگرهای محاسباتی یا اصطلاحاً Arithmetic Operator باشند که نتیجه آن ها بر اساس نوع داده مربوط به عملوندها و یا اصطلاحاً Operand ها محاسبه می شود.

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

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <div ng-app>
        {{"Hello" + " World"}}<br />
        {{100 + 100 }}<br />
        {{true + false}}<br />
        {{10.2 + 10.2}}<br />
    </div>
</body>
</html>

خروجی این کد شبیه به تصویر زیر خواهد بود.

علاوه بر این در Expression های AngularJS می توانیم متغیرهایی را با استفاده از دستور ng-init تعریف کنیم.

دستور ng-init برای تعریف کردن متغیرهایی استفاده می شود که از  Data Type های مختلف خواهند بود، این موضوع در کد زیر نشان داده شده است.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <div ng-app ng-init="greet='Hello World!'; amount= 10000;rateOfInterest = 10.5; duration=10;  myArr = [100, 200]; person = { firstName:'Steve', lastName :'Jobs'}">
        {{ (amount * rateOfInterest * duration)/100 }}<br />
        {{myArr[1]}} <br />
        {{person.firstName + " " + person.lastName}}
    </div>
</body>
</html>

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

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

خروجی این کد نیز شبیه به تصویر زیر خواهد بود.

در قسمت بعدی از این آموزش در رابطه با directive  ها در AngularJS صحبت خواهیم کرد.

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

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

ارسال نظر

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