با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که
دوره کامل
آموزش AngularJS را دنبال می کنند. اگر بخش های قبلی این دوره را دنبال کرده باشید. حتما تا حدودی با دستورالعمل ها آشنایی پیدا کرده اید. می دانیم که دستورالعمل ها در قالب تگ های HTML استفاده می شود و داده هایی که بین کد html و AngularJS مبادله می شود را نگه داری می کند.
اگر بخش های قبلی را مرور نکرده اید. و با مبحث دستورالعمل ها در AngularJS ، آشنایی ندارید. پیشنهاد می کنیم که آموزش بخش آشنایی
بیشتر با AngularJS را جهت آشنایی مقدماتی با دستورالعمل ها، بررسی کنید.
AngularJS به شما اجازه می دهد که HTML را با ویژگی های جدید به نام Directives یا دستورالعمل، گسترش دهید.
AngularJS دارای مجموعه ای از دستورات ساخته شده است. که قابلیت برنامه های کاربردی شما را فراهم می کند.
AngularJS همچنین به شما اجازه می دهد دستورات خود را تعریف کنید.
دستورالعمل AngularJS ویژگیهای HTML را با پیشوند ng-
تمدید می کنند.
دستور ng-app
یک برنامه AngularJS را راه اندازی می کند.
دستور ng-init
مقدار داده های برنامه را اولویت بندی می کند.
دستورالعمل مدل ng
مقدار کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.
1 2 3 4 5 6 | <div ng-app="" ng-init="firstName='John'"> <p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p> </div> |
دستور ng-app
همچنین به AngularJS اعلام می کند. که عنصر <div>
صاحب برنامه AngularJS است.
بیان {{firstName}}
، در مثال بالا، بیانگر اتصال داده AngularJS است.
اتصال داده در AngularJS عبارات AngularJS را به داده های AngularJS متصل می کند.
{{firstName}}
معادلng-model = "firstName"
است.
در این مثال، دو فیلد متنی همراه با دو دستورالعمل مدل ng
هستند:
1 2 3 4 5 6 7 8 | <div ng-app="" ng-init="quantity=1;price=5"> Quantity: <input type="number" ng-model="quantity"> Costs: <input type="number" ng-model="price"> Total in dollar: {{ quantity * price }} </div> |
دستورالعمل ng-repeat
یک عنصر HTML را تکرار می کند:
1 2 3 4 5 6 7 | <div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div> |
دستورالعملng-repeat
یک بار برای هر یک از اجزای یک مجموعه، یک عنصر HTML را تمیز می کند.
دستورالعملng-repeat
در آرایه ای از اشیاء استفاده می شود:
1 2 3 4 5 6 7 8 9 10 11 12 | <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> |
دستور Ng-app
عناصر ریشه یک برنامه AngularJS را تعریف می کند.
دستورالعمل ng-application
بوت استرپ خودکار (به طور خودکار مقداردهی اولیه) برنامه را هنگامی که یک صفحه
وب بارگذاری می شود، انجام می دهد.
دستورالعمل ng-init
مقادیر اولیه برای یک برنامه AngularJS را تعریف می کند.
به طور معمول شما از ng-init
استفاده نمی کنید. شما از یک کنترل کننده یا ماژول استفاده می کنید.
دستورالعمل ng-model
مقدار کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.
دستورالعمل ng-model
همچنین شامل موارد زیر است:
علاوه بر تمام دستورالعمل های داخلی AngularJS، شما می توانید برحسب نیاز، دستورات جدیدی نیز، اضافه کنید.
دستورالعمل های جدید با استفاده از عملکرد .directive
ایجاد می شوند.
برای فراخوانی دستور جدید، یک عنصر HTML را با همان نام برچسب به عنوان دستور جدید ایجاد کنید.
هنگام نامگذاری یک دستور، شما باید از نام w3TestDirective
استفاده کنید، اما هنگام فراخوانی، باید از نام
جدا شده، w3-test-directive
استفاده کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body ng-app="myApp"> <w3-test-directive></w3-test-directive> <script> var app = angular.module("myApp", []); app.directive("w3TestDirective", function() { return { template : "<h1>Made by a directive!</h1>" }; }); </script> </body> |
شما می توانید یک دستور را با استفاده از موارد زیر ایجاد کنید:
مثالهای زیر همه نتیجه ی مشابهی تولید خواهند کرد:
1 | <w3-test-directive></w3-test-directive> |
1 | <div w3-test-directive></div> |
1 | <div class="w3-test-directive"></div> |
1 | <!-- directive: w3-test-directive --> |
شما می توانید دستورات خود را تنها با برخی از روش ها محدود کنید.
با اضافه کردن یک خصوصیت restrict
با مقدار “A”، دستورالعمل تنها می تواند توسط صفات مورد استفاده
قرار گیرد:
1 2 3 4 5 6 7 | var app = angular.module("myApp", []); app.directive("w3TestDirective", function() { return { restrict : "A", template : "<h1>Made by a directive!</h1>" }; }); |
خصوصیت restrict شامل مقادیر زیر است:
E
برای نام عنصرA
برای مشخصهC
برای کلاسM
برای نظرکه به طور پیش فرض مقدار EA
است، به این معنی که هر دو عنصر نام و نام ویژگی می توانند از دستور استفاده کنند.
در پایان این بخش یاد گرفتید که چه طور از دستورالعمل های مختلف AngularJS و کاربردهای آن ها در کد html، استفاده کنید. همچنین با چگونگی تعریف کردن یک دستورالعمل جدید نیز، آشنا شدید. امیدوارم که آموزش
آشنایی با دستورالعمل ها در AngularJS ، برای شما مفید بوده باشد.