با سلام در این قسمت از آموزش‌های کدپز به بررسی چگونگی ایجاد دستورالعمل‌ها در AngularJS خواهیم پرداخت.
پیشنهاد می‌شود قبل از ورود به قسمت از آموزش AngularJS قسمت‌های زیر را مطالعه کنید:
اتصال داده‌ها دستورالعمل‌ها رشته‌ها و شی‌ءها در انگولار
ماژول‌ها چگونه در انگولار ایجاد می‌شوند؟
تعریف دستورالعمل‌های انگولار
AngularJS به شما اجازه میدهد که HTML را با ویژگی‌های جدید به نام دستورالعمل‌ها گسترش دهید.
AngularJS دارای مجموعه‌ای از دستورات ساخته‌شده است که قابلیت برنامه‌های کاربردی شمارا فراهم می‌کند.
AngularJS همچنین به شما اجازه میدهد دستورات خود را تعریف کنید.
دستورالعمل‌های انگولار چگونه ایجاد می‌شوند؟
دستورالعمل AngularJS ویژگی‌های HTML را با پیشوند ng- تمدید می‌کنند.
دستور ng-app یک برنامه AngularJS را راه‌اندازی می‌کند.
دستور ng-init مقدار داده ی اولیه به متغییر ها میدهد. دستورالعمل ng-model مقدار کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="" ng-init="firstName='مرتضی'"> <p>لطفا نامی در کادر زیر وارد کنید :</p> <p>نام: <input type="text" ng-model="firstName"></p> <p>نامی که نوشته اید برابر است با : {{ firstName }}</p> </div> </body> </html> |
دستور ng-app این را تعیین می‌کند که المان
شروع‌کننده‌ی برنامه است.
اتصال داده در انگولار
در مثال قبل {{firstName}} نمایشگر یک اتصال داده خواهد بود.
اتصال داده در AngularJS عبارات AngularJS را با داده‌های AngularJS متصل می‌کند.
{{firstName}} با ng-model = “firstName” محدودشده است. در مثال بعدی، دو فیلد متنی همراه با دو دستورالعمل ng-model هستند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div data-ng-app="" data-ng-init="quantity=1;price=5"> <h2>محاسبه قیمت کالا</h2> مقدار: <input type="number" ng-model="quantity"> قیمت: <input type="number" ng-model="price"> <p><b>محاسبه ی قیمت به تومان:</b> {{quantity * price}}</p> </div> </body> </html> |
استفاده از ng-init بسیار رایج نیست شما خواهید آموخت که چگونه داده‌های اولیه را در فصل مربوط به کنترل‌کننده‌ها را اولویت‌بندی کنید.
تکرار عناصر HTML
دستورالعمل ng-repeat برای ایجاد حلقه‌ی تکرار یک المان HTML است به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="" ng-init="names=['morteza','poriya','sajjad']"> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div> </body> </html> |
دستورالعمل ng-repeat یک المان HTML را به دفعات تکرار می‌کند.
دستورالعمل ng-repeat در آرایه‌ای از اشیاء استفاده می‌شود به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="" ng-init="names=[ {name:'Morteza',country:'Afzali'}, {name:'Poriya',country:'Moradi'}, {name:'Sajjad',country:'Hossienzadeh'}]"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> </body> </html> |
AngularJS برای پایگاه داده CRUD (Create Read Update Clean) مناسب است.
فقط این نکته را به یاد داشته باشید اگر این اشیاء از یک پایگاه داده ثبت‌شده باشند.
دستورالعمل ng-app
دستور ng-app عناصر ریشه یک برنامه AngularJS را تعریف می‌کند.
دستورالعمل ng-application بوت استرپ خودکار (به‌طور خودکار مقداردهی اولیه) برنامه را هنگامی‌که یک صفحه وب بارگذاری می‌شود.
دستورالعمل ng-init
همان‌طور که اشاره کردیم دستورالعمل ng-init مقادیر اولیه برای یک برنامه AngularJS را تعریف می‌کند.
استفاده از ng-init معمولاً رایج نیست بلکه استفاده از یک کنترل‌کننده یا ماژول رایج است.
بعداً در مورد کنترل‌کننده‌ها و ماژول‌ها بیشتر خواهید دانست.
دستورالعمل ng-model
دستورالعمل ng-model مقدار کنترل‌های HTML (ورودی، انتخاب، متن منطقه) را به داده‌های برنامه متصل می‌کند.
دستورالعمل ng-model همچنین می‌تواند:
- ارائه تأییدیه نوع داده‌های برنامه (شماره، ایمیل، موردنیاز).
- وضعیت داده‌های برنامه را ارائه دهید (نامعتبر، کثیف، لمس شده، خطا).
- ارائه کلاس CSS برای عناصر HTML.
- عناصر HTML را به فرم HTML متصل کنید.
ایجاد دستورالعمل جدید
علاوه بر تمام دستورالعمل‌های داخلی AngularJS، شما می‌توانید دستورات خود را ایجاد کنید.
دستورالعمل‌های جدید با استفاده از عملکرد.directive ایجاد می‌شوند.
برای فراخوانی دستور جدید، یک عنصر HTML با همان نام برچسب به‌عنوان دستور جدید ایجاد کنید.
هنگام نام‌گذاری یک عنصر شما باید نام عنصر اول را با حروف کوچک و تمام کلمات را کاملاً به هم چسبیده بنویسید و ابتدای باقی کلمات را با حروف بزرگ را نمایش دهید برای مثال testCodepaz نام یک دستورالعمل خواهد بود و برای فراخوانیان باید به‌صورت test-codepaz نوشت.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app="myApp"> <test-codepaz></test-codepaz> <script> var app = angular.module("myApp", []); app.directive("testCodepaz", function() { return { template : "<h1>ساخته شده با دستورالعمل!</h1>" }; }); </script> </body> </html> |
جالب است که شما می‌توانید یک دستور را با استفاده از مورد زیر ایجاد کنید:
نام عنصر
صفت
کلاس
اظهار نظر (کامنت)
مثال‌های زیر همه نتیجه‌ی مشابهی تولید خواهند کرد:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- نام عنصر --> <test-codepaz></test-codepaz> <!-- صفت --> <div test-codepaz=""></div> <!-- کلاس --> <div class="test-codepaz"></div> <!-- کامنت --> <!-- directive: test-codepaz --> |
محدودیت‌ها برای استفاده‌ی خاص از دستورالعمل‌ها
شما می‌توانید دستورات خود را تنها با برخی از روش‌ها محدود کنید.
با اضافه کردن یک دارایی محدود با مقدار “A”، دستورالعمل تنها می‌تواند توسط صفات مورداستفاده قرار گیرد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app="myApp"> <div test-codepaz></div> <script> var app = angular.module("myApp", []); app.directive("testCodepaz", function() { return { restrict : "A", template : "<h1>ساخته شده توسط دستورالعمل!</h1>" }; }); </script> </body> </html> |
مقادیر محدود قانونی عبارت‌اند از:
E برای نام عناصر
A برای صفت
C برای کلاس
M برای اظهار نظر (کامنت)
نکته: به‌طور پیش‌فرض مقدار EA است، به این معنی که هر دو عنصر نام و نام ویژگی می‌توانند از دستور استفاده کنند.
شما می‌توانید با مراجعه به سایت w3schools اطلاعات بیشتری درباره‌ی انگولار کسب کنید!
با کدپز همراه باشید.
