با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در بخش قبلی با چگونگی به کار بردن مقادیر در کد HTML ، و انتخاب مقدار مورد نظر ، آشنا شدید. حال قصد داریم در بخش آشنایی با module یا ماژول ها در AngularJS ، چگونگی کار با داده ها و مقادیر را در فریم ورک و کدهای AngularJS، بررسی کنیم.
همانطور که در بخش قبلی نیز اشاره شد. Expressions یا مقادیر، در واقع داده های عددی ، رشته ها یا آرایه هایی هستند که بین کد html و 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 = "John"; $scope.lastName = "Doe"; }); </script> |
AngularJS مجموعه ای از دستورات ساخته شده است که می توانید از آن برای اضافه کردن قابلیت به برنامه خود استفاده کنید.
علاوه بر این شما می توانید از ماژول برای اضافه کردن دستورات خود به برنامه های خود استفاده کنید:
1 2 3 4 5 6 7 8 9 10 11 | <div ng-app="myApp" w3-test-directive></div> <script> var app = angular.module("myApp", []); app.directive("w3TestDirective", function() { return { template : "I was made in a directive constructor!" }; }); </script> |
در برنامه های AngularJS رایج است. که ماژول و کنترل کننده ها را در فایل های جاوا اسکریپت قرار دهد.
در این مثال، myApp.js شامل یک تعریف ماژول برنامه است، در حالی که myCtrl.js حاوی کنترل کننده است:
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> |
کد مربوط به مثال فوق در AngularJS:
1 | var app = angular.module("myApp", []); |
پارامتر [] در تعریف ماژول می تواند برای تعریف ماژول های وابسته استفاده شود.
بدون پارامتر [] شما یک ماژول جدید ایجاد نمی کنید، اما بازیابی یک داده موجود را ایجاد می کنید:
1 2 3 4 | app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName= "Doe"; }); |
توابع عمومی باید در جاوا اسکریپت اجتناب شود. آنها می توانند به آسانی توسط اسکریپت های دیگر رونویسی یا نابود شوند.
ماژول های 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 | <!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 = "John"; $scope.lastName = "Doe"; }); </script> </body> </html> |
شما در این بخش با کاربرد ماژول ها و ساختار کلی آن ها در کد AngularJS تا حدودی آشنا شدید. امیدواریم که از مطالب بخش آشنایی با module یا ماژول ها در AngularJS ، بخوبی استفاده کرده باشید.