ماژول AngularJS چگونه تعریف میشود؟
با عرض سلام
در قسمت سوم از آموزش‌های AngularJS قصد داریم تا ماژول AngularJS را تعریف کنیم.
پیشنهاد میشود قبل از ورود به این آموزش قسمت‌های قبلی این آموزش را مطالعه فرمایید.
برای ورود به هرکدام از قسمت‌های بالا روی آنها کلیک کنید!
ماژول AngularJS چیست؟
ماژول در AngularJS یک برنامه را تعریف میکند.
ماژول یک ظرف برای قسمت‌های مختلف یک برنامه است.
ماژول یک ظرف برای کنترل‌کننده برنامه است.
کنترل‌کننده‌ها همیشه به یک ماژول متعلق هستند.
ساخت یک ماژول AngularJS
ماژول‌ها در AngularJS به‌وسیله‌ی تابع angular.module ساخته می‌شوند.
|
1 2 3 4 5 6 7 |
<div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> |
پارامتر “myApp” به عنصر HTML اشاره دارد که در آن برنامه اجرا میشود.
حالا شما می‌توانید کنترل‌کننده‌ها، دستورالعمل‌ها، فیلترها و موارد دیگر را به برنامه AngularJS اضافه کنید.
افزودن کنترل‌کننده
برای افزودن کنترل‌کننده به برنامه‌ی خود باید از عبارت ng-controller استفاده کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Morteza"; $scope.lastName = "Afzali"; }); </script> |
در ادامه‌ی این آموزش با کنترل‌کننده بیشتر آشنا خواهید شد.
اضافه کردن یک دستورالعمل
AngularJS مجموعه‌ای از دستورات ساخته‌شده است که می‌توانید از آن برای اضافه کردن قابلیت به برنامه خود استفاده کنید.
برای داشتن اطلاعات بیشتر دراین‌باره می‌توانید به پستی که درباره‌ی اصطلاحات بود مراجعه فرمایید.
علاوه بر این شما می‌توانید از ماژول برای اضافه کردن دستورات خود به برنامه‌های خود استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" codepaz></div> <script> var app = angular.module("myApp", []); app.directive("codepaz", function() { return { template : "کدپز من را در یک سازنده دستور العمل ساخته است!" }; }); </script> </body> </html> |
بعداً در این آموزش بیشتر در مورد دستورالعمل‌ها خواهید آموخت.
ماژول‌ها و کنترل‌کننده‌ها در فایلها
در برنامه‌های AngularJS رایج است که ماژول و کنترل‌کننده‌ها را در فایل‌های جاوا اسکریپت قرار دهد.
در این مثال، myApp.js شامل یک تعریف ماژول برنامه است، درحالی‌که myCtrl.js حاوی کنترل‌کننده است:
محتویات صفحه‌ی اصلی که معمولاً index.html نام‌گذاری میشود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script src="myApp.js"></script> <script src="myCtrl.js"></script> </body> </html> |
محتویات فایل myApp.js :
|
1 |
var app = angular.module("myApp", []); |
پارامتر [] در تعریف ماژول می‌تواند برای تعریف ماژول‌های وابسته استفاده شود.
بدون پارامتر [] شما یک ماژول جدید ایجاد نمی‌کنید، اما فراخوانی یک موجود را ایجاد می‌کنید.
محتویات فایل myCtrl.js :
|
1 2 3 4 |
app.controller("myCtrl", function($scope) { $scope.firstName = "Morteza"; $scope.lastName= "Afzali"; }); |
توابع می‌توانند فضای نامی جهانی را آلوده کنند!
توابع جهانی باید در جاوا اسکریپت اجتناب شود. آنها می‌توانند به‌آسانی توسط اسکریپت‌های دیگر رونویسی یا نابود شوند.
ماژول‌های AngularJS این مسئله را با نگه‌داشتن همه توابع محلی به ماژول کاهش می‌دهد.
بارگذاری کتابخانه
درحالی‌که در برنامه‌های HTML معمولی برای قرار دادن اسکریپت در انتهای عنصر <body> رایج است، توصیه میشود که کتابخانه AngularJS را در <head> یا در ابتدای <body> بارگذاری کنید.
به این دلیل که angular.module می‌تواند پس از بارگذاری کتابخانه کامپایل شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Morteza"; $scope.lastName = "Afzali"; }); </script> <p>توصیه می شود کتابخانه AngularJS را در HEAD یا در ابتدای BODY بارگذاری کنید.</p> </body> </html> |
درصورت سؤال داشتن می‌توانید از طریق فرم نظرات سایت با ما در ارتباط باشید!
برای داشتن اطلاعات بیشتر درباره‌ی انگولار می‌توانید به سایت w3schools مراجعه فرمایید.
منتظر ادامه‌ی آموزش‌ها از کدپز باشید!
