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

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

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

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

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

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

به طور کوتاه Directive ها در واقع دستورات یا Marker هایی هستند که بر روی Element های DOM قرار میگیرند و به AngularJS می گویند که یک رفتار خاص را به آن Element ها بچسباند یا حتی آن ها را و Child های آن ها را به نوعی تغییر دهد. به طور خیلی کوتاه در قالب یک جمله  Directive ها اقدام به گسترش دادن یا extend کردن  Element های HTML می کنند. تقریبا تمامی Directive ها درAngularJS  با کلمه ng- آغاز می شوند که ng مخفف کلمه Angular می باشد. درAngularJS  تعداد زیادی از Directive های Built-In وجود دارد علاوه بر این شما می توانید Directive های سفارشی یا Custom خود را نیز برای یک برنامه خاص پیاده سازی کنید. جدولی که در زیر مشاهده می کنید، لیستی از Directive های مهم که به صورت Built-in در AngularJS وجود دارند را برای شما نشان می دهد.

بررسی ng-app

همان طور که در قسمت های قبلی نیز گفتیم این Directive به عنوان مهم ترین دستور در AngularJS می باشد که وظیفه آن Initialize  کردن فریم ورک AngularJS و انتخاب کردن یک Element به عنوان Root Element مربوط به برنامه است.

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

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

بررسی ng-init

یک Directive دیگر در AngularJS که بسیار هم مهم می باشد، ng-init است که به منظور تعریف کردن و مقدار دهی کردن به متغیرهایی است که در برنامه AngularJS مورد استفاده قرار خواهند گرفت. کدی که در قسمت زیر می بینید، نحوه استفاده کردن از این Directive را برای تعریف کردن متغیرهایی از Data Type های مختلف مثل string ،number ،array و همچنین object را نشان می دهد.

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

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

همان طور که در کد بالا مشاهده می کنید ما اقدام به تعریف کردن متغیرهایی از Data Type های string ،number ،array و همچنین object کرده ایم. این متغیرها را می توان در Element ای که تعریف شده اند و همچنین تمامی Child های مربوط به آن Element مورد استفاده قرار داد. به عبارت دیگر نمی توان از این متغیرها در بیرون از آن <div> ای که تعریف شده اند، مورد استفاده قرار داد.

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

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

بررسی ng-model

یکی دیگر از Directive های بسیار مهم ng-model نام دارد که به منظور پیاده سازی Data Binding دو طرفه و یا اصطلاحاً Two-Way Data Binding در AngularJS مورد استفاده قرار می گیرد.

با استفاده از ng-model می توانیم Element های مختلف HTML از قبیل <input>, <select>  و <textarea>  را به یک Property خاص که بر روی $scope  تعریف شده اند، Bind کرد، این موضوع باعث می شود که مقدار درون این متغیرها در درون Element های تعریف شده قرار بگیرند و همچنین Value درون این Element ها به درون متغیرهای تعریف شده منتقل شوند. این موضوع در کد زیر نشان داده شده است.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    <input type="text" ng-model="name" />
    <div>
       Hello {{name}}
    </div>
</body>
</html>

موضوع مهم دیگر این که Property هایی که توسط دستور ng-model مقدار گرفته اند، می توانند در درون یک Controller با استفاده از $scope مورد دسترسی قرار بگیرند. در رابطه با این موضوع در قسمت های بعدی مفصلاً صحبت خواهیم کرد.

نکته بسیار مهم این که متغیرهایی که توسط دستور ng-init تعریف شده اند، نسبت به Property هایی که توسط دستور ng-model تعریف شده اند، بسیار متفاوتند. در واقع متغیرهایی که توسط دستور  ng-init تعریف شده اند، به $scope متصل یا اصطلاحاً  Attach نمی شوند، در حالی که Property هایی که توسط دستور ng-model تعریف شده اند، به $scope متصل یا اصطلاحاً Attach می شوند.

بررسی  ng-bind

با استفاده از این Directive می توانیم Property های درون Model را که با استفاده از $scope و یا توسط ng-model تعریف شده اند به یک Element در HTML اصطلاحاً  Bind کنیم. علاوه بر این می توان نتیجه یک Expression را نیز به سادگی توسط دستور ng-bind مورد Bind کردن قرار داد. در رابطه با Expression ها در قسمت های قبلی از این آموزش صحبت کرده ایم. مکانیزم Bind کردن باعث می شود که اگر مقدار مربوط به یک Expression تغییر کرد، آن مقدار جدید نیز در درون Element مورد نظر قرار بگیرد، این موضوع در کد زیر نشان داده شده است.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="">
    <div>
        5 + 5 = <span ng-bind="5 + 5"></span> <br />

        Enter your name: <input type="text" ng-model="name" /><br />
        Hello <span ng-bind="name"></span>
    </div>
</body>
</html>

همان طور که در کد بالا مشاهده می کنید، با استفاده از دستور ng-bind نتیجه یک Expression که همان 5+5 است را در یک <span> قرارداده ایم. به همین ترتیب مقدار یک Property از مدل را که “name” نام دارد را در <span>  اصطلاحاً  Bind کرده ایم. مقدار درون این Property در واقع همان مقداری است که در درون Textbox  وارد می شود.

دستور ng-repeat

با استفاده از دستور ng-repeat می توانیم یک دستور HTML خاص را به ازای عناصر درون یک آرایه در خروجی قرار بدهیم. این موضوع در کد زیر نشان داده شده است.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            border: 1px solid green;
            width: 100%;
            height: 50px;
            display: block;
            margin-bottom: 10px;
            text-align:center;
            background-color:yellow;
        }
    </style>
</head>
<body ng-app="" ng-init="students=['Bill','Steve','Ram']">
    <ol>
        <li ng-repeat="name in students">
            {{name}}
        </li>
    </ol>
    <div ng-repeat="name in students">
        {{name}}
    </div>
</body>
</html>

همان طور که در این مثال مشاهده می کنید، با استفاده از دستور ng-repeat اقدام به ایجاد کردن عناصری از نوع <li> به ازای تک تک عناصر درون آرایه students کرده ایم. این موضوع باعث تکرار شدن <div>  ای که تعریف کرده ایم، می شود.

دستور ng-if

با استفاده از دستور ng-if می توانیم یک Element را در درون HTML با توجه به یک شرط رندر و یا مخفی کنید. به عبارت دیگر بر اساس مقدار بازگشت داده شده از یک Expression خاص که طبیعتاً باید از نوع boolean باشد، می توانیم اقدام به ساختن یک Element در HTML کرده یا آن Element را از HTML حذف کنیم.

دستور ng-readonly

با استفاده از دستور ng-readonly می توانیم یک Element را در HTML به صورت read-only یا فقط خواندنی تعریف کنیم. این موضوع نیز بر اساس یک مقدار Boolean که از یک Expression بازگشت داده می شود، انجام می شود. اگر یک Expression مقدار True برگرداند، آن Element تعریف شده به صورت read-only تعریف می شود و اگر مقدار False را بازگشت دهد از حالت read-only خارج خواهد شد.

دستور ng-disabled

دستور ng-disabled نیز به منظور غیر فعال کردن یک Element در HTML مورد استفاده قرار میگیرد. این موضوع بر اساس یک Value  که از نوع Boolean است، انجام می شود.

این Value می تواند از یک Expression بازگشت داده شود. به عبارت دیگر اگر یک Expression مقدار True برگرداند، آن Element غیر فعال می شود و در غیر این صورت Element مورد نظر فعال خواهد شد. کدی که در قسمت زیر مشاهده می کنید مثال هایی از دستورات ng-if و ng-readonly و ng-disabled را برای شما به تصویر می کشد.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            width: 100%;
            height: 50px;
            display: block;
            margin: 15px 0 0 10px;
        }
    </style>
</head>
<body ng-app ng-init="checked=true" >
    Click Me: <input type="checkbox" ng-model="checked" /> <br />
    <div>
        New: <input ng-if="checked" type="text" />
    </div>
    <div>
        Read-only: <input ng-readonly="checked" type="text" value="This is read-only." />
    </div>
    <div>
        Disabled: <input ng-disabled="checked" type="text" value="This is disabled." />
    </div>
</body>
</html>

بررسی Syntax مربوط به Directive ها

در فریم ورک AngularJS به سادگی می توانیم Directive ها را به روش های مختلف به Element های DOM متصل کنیم. به عبارت دیگر مجبور نیستید که فقط از دستورات ng- استفاده کنید. در AngularJS می توانید Directive ها را با هر پیشوندی مثل x- و یا data- آغاز کنید. برای مثال می توانید به جای استفاده کردن از ng-model به عنوان یک Directive از data-ng-model یا x-ng-model استفاده کنید. علاوه بر این می توانیم “-” را در Directive ها با علائم دیگری از قبیل  “:” یا “_” جایگزین کنیم. برای مثال می توانیم دستور ng-model را به صورت ng_model یا ng:model تعریف کنیم. همچنین می توانیم از “:” یا “_” در کنار data و یا x هم استفاده کنیم. کدی که در قسمت زیر مشاهده می کنید تمامی قوانین مربوط به Syntax استفاده از Directive ها را به شما نشان می دهد.

<!DOCTYPE html>
<html >
<body ng-app>
    Enter Name:  <input type="text" ng-model="name" /> 
    data-ng-bind: <span data-ng-bind="name"></span>
    data-ng:bind: <span data-ng:bind="name"></span>
    data:ng:bind: <span data:ng:bind="name"></span>
    x:ng:bind:    <span x:ng:bind="name"></span>
    ng:bind:      <span ng:bind="name"></span>
    x-ng-bind:    <span x-ng-bind="name"></span>
    x_ng_bind:    <span x_ng_bind="name"></span>
    ng_bind:      <span ng_bind="name"></span>
</body>
</html>

به شما توصیه می کنیم که به منظور دیدن تمامی Directive هایی که به صورت Built-in در AngularJS  وجود دارند حتما سری به مستندات AngularJS  بزنید. در قسمت بعدی از این آموزش در رابطه با Controller ها در AngularJS صحبت خواهیم کرد.

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

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

ارسال نظر

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