Directives ها در AngularJS

Directives ها در AngularJS

Angular یک چارچوب کاری یا کتابخانه ی جاوا اسکریپت هست که به کمک خصیصه های نوینی به نام Directive ها(دستور ها)، به برنامه نویس یا طراح وب این اجازه را می دهد که HTML را بسط داده و قابلیت های آن را گسترش دهد.

Angular Directives

Directive ها با استفاده از پیشوند ng ، خصیصه های HTML را بسط می دهند. دستور ng-app یک برنامه ی AngularJS را مقدار دهی اولیه (آغاز و تعریف) می کند. دستور ng-init داده های برنامه (app data) را مقدار دهی اولیه می کند.

دستور ng-model مقدار کنترل های دریافت ورودی HTML از قبیل input و select و textarea را به داده های برنامه مقید (bind) می کنند.

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="" ng-init="firstName='John'"> <p>Input something in the input box:</p> <p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p> </div> </body> <html>

دستور ng-app همچنین به AngularJS اطلاع می دهد که المان div>> صاحب برنامه ی AngularJS می باشد.

اتصال داده (Data Binding)

عبارت {{ firstName}} که در مثال بالا مشاهده کردید، یک عبارت اتصال داده AngularJS است.

اتصال داده یا data binding عبارت های AngularJS را با داده های AngularJS هماهنگ و منطبق (synchronize) می سازد.

به طور مثال، {{ firstName}} با ng-model="firstName" برابر می باشد.

در مثال زیر مشاهده می کنید که دو فیلد دریافت متن text field با دستور ng-model مساوی و برابر شده اند:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div data-ng-app="" data-ng-init="quantity=1;price=5"> <h2>Cost Calculator</h2> Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> <p><b>Total in dollar:</b> {{quantity * price}}</p> </div> </body> </html>

همان طور که در مبحث پیشین مطرح شد، استفاده از دستور ng-init برای مقداردهی زیاد توصیه نمی شود. در مباحث آینده با روش بهتری برای مقدار دهی اولیه ی آشنا خواهیم شد.

تکرار کردن المان های HTML

دستور ng-repeat به منظور تکرار کردن المان HTML بکار رفته و عملکردی مشابه حلقه را دارد:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']"> <p>Looping with ng-repeat:</p> <ul> <li data-ng-repeat="x in names"> {{ x }} </li> </ul> </div> </body> </html>

در زیر از دستور ng-repeat بر روی یک آرایه از اشیا استفاده شده است:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>Looping with objects:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> </body> </html>

AngualarJS برای آن دسته از برنامه های کاربردی که نیاز به پیاده کردن عملیات Create ، Update ، Read ، Delete ()ایجاد، خواندن، آپدیت، حذف) بر روی پایگاه داده دارند بسیار مناسب می‌باشد.

کافی است فرض کنید که این اشیا سطرهایی از یک پایگاه داده می باشند.

دستور ng-app

این directive در واقع عنصر آغازین (root element) یک برنامه ی کاربردی را تعریف می کند. Directive app- ng زمانی که صفحه بارگذاری می شود، به صورت خودکار راه اندازی (auto-bootstrap) و مقدار دهی اولیه می شود.

دستور in-init

این دستور مقادیر اولیه‌ی برنامه را مشخص می کند.

استفاده از in-init برای مقداردهی اولیه چندان متداول نیست، اغلب از یک کنترلر یا ماژول برای initialization استفاده می‌کنیم.

در مباحث بعدی درک بهتری نسبت به کنترلر ها و ماژول ها بدست خواهید آورد.

دستور ng-model

دستور ng-model مقادیر کنترل های دریافت کننده ورودی HTML همچون input ، select و textarea را به داده‌های برنامه‌ی کاربردی متصل (bind) می‌کند.

دستور ng-model همچنین قادر به انجام عملیات زیر می‌باشد:

اعتبار سنجی داده های برنامه‌ی کاربردی از جمله عدد، ایمیل و اطلاعات لازم را بر عهده می‌گیرد.

وضعیت داده‌های برنامه را مشخص می‌کند: نامعتبر، dirty )دستخوش تغییر قرار گرفته)خطا ودستکاری شده ( touched ) و غیره ... .

کلاس‌های css را برای المان‌های HTML فراهم می‌نماید.

المان‌های HTML را به فرم‌های HTML مقید (bind) می‌کند.

دستور ng-repeat

دستور ng-repeat به ازای هر آیتم موجود در یک مجموعه یا آرایه، عناصر HTML را clone (تکثیر) می‌کند.

دایرکتیو AngularJS ng-model

دایرکتیو ng-mode مقادیر کنترلی HTML (textarea ، select ، input) را به داده های برنامه پیوند می‌دهد.

دایرکتیو ng-model

شما با استفاده از دایرکتیو ng-model می‌توانید مقدار یک input را به متغیری که در AngularJS ساخته شده است، پیوند دهید.

<div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="name"> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.name = "John Doe"; }); </script> <p>Use the ng-model directive to bind the value of the input field to a property made in the controller.</p>

پیوند دو طرفه

پیوند می‌تواند دو طرفه باشد یعنی اگر کاربر مقدار ورودی را در input تغییر دهد، مقدار نظیر آن در AngularJS نیز تغییر کند:

<div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="name"> <h1>You entered: {{name}} </h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.name = "John Doe"; }); </script> <p>Change the name inside the input field, and you will see the name in the header changes accordingly.</p>

اعتبارسنجی مقدار input کاربر

دایرکتیو ng-model می‌تواند مقدار ورودی یک برنامه را اعتبارسنجی کند. به عنوان مثال مقدار ورودی یک input را صرفا از نوع number یا email قرار دهد و یا مقدار ورودی را الزامی required کند.

<form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span> </form> <p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

در مثال بالا،اگر عبارت داخل اتربیوت ng-show مقدار true برگرداند، span نمایش داده خواهد شد.

نکته:اگر اتربیوت ng-model وجود نداشته باشد، AngularJS به صورت پیش فرض یک ng-model برای خود می‌سازد.

وضعیت یک برنامه کاربردی (Application Status)

دایرکتیو ng-model می‌تواند وضعیت داده‌های یک برنامه را به صورت invalid ، dirty، touched یا error مشخص کند.

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required> <p>Edit the e-mail address, and try to change the status.</p> <h1>Status</h1> <p>Valid: {{myForm.myAddress.$valid}} (if true, the value meets all criteria).</p> <p>Dirty: {{myForm.myAddress.$dirty}} (if true, the value has been changed).</p> <p>Touched: {{myForm.myAddress.$touched}} (if true, the field has been in focus).</p> </form>

کلاس های CSS

دایرکتیو ng-model با در نظر گرفتن وضعیت المان‌های HTML می‌تواند خاصیت کلاس‌های Css را به آنها اضافه کند.

<form ng-app="" name="myForm"> Enter your name: <input name="myName" ng-model="myText" required> </form> <p>Edit the text field and it will get/lose classes according to the status.</p> <p><b>Note:</b> A text field with the "required" attribute is not valid when it is empty.</p>

دایرکتیو ng-model با توجه با وضعیت فیلدهای فرم می‌تواند کلاس های زیر را اضافه و یا حذف کند.

•ng-empty •ng-not-empty •ng-touched •ng-untouched •ng-valid •ng-invalid •ng-dirty •ng-pending •ng-pristine



نظرات کاربران



عبارت امنیتی : حاصل 7 × 5 می شود :
متن پیام :