آموزش کار ماژول AngularJS Module

آموزش کار با ماژول ها در AngularJS Modeles

یک ماژول AngularJS Modeles برنامه یا Application را تعریف می کند. به عبارت دیگر هر ماژول (Modules) یک ظرف یا نگهدارنده (Container) برای بخش های مختلف برنامه است.
همچنین ماژول ها دربرگیرنده کنترلرهای برنامه (Application Controllers) هستند.
کنترلرها همواره متعلق به یک ماژول هستند.

آموزش ایجاد یک ماژول در AngualrJS

یک ماژول با استفاده از تابع angular.module در AngularJS، همانند کد مثال عملی زیر، ایجاد می شود.

کد مثال عملی
کد	<div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script>

پارامتر “myApp” به عنصر HTML ای اشاره دارد که برنامه (application) درون آن اجرا خواهد شد.
پس از تعریف ماژول مورد نظر، می توانید کنترلرها، اعلان ها (directives)، فیلترها (filters) و سایر بخش ها را به برنامه AngularJS اضافه کنید.

آموزش اضافه کردن یک کنترلر به برنامه AngularJS

یک کنترلر با نام مورد نظر درون برنامه تعریف کرده و سپس توسط اعلان ng-controller، در هر المنت HTML ای که می خواهید، به آن اشاره کنید.
مثال عملی : در کد مثال عملی زیر، یک کنترلر به نام “myCtrl” را ایجاد کرده و سپس در تگ

ابتدایی، از آن استفاده کرده ایم :

کد مثال عملی

کد

<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 Directive

AngularJS دارای مجموعه ای از اعلان های درون ساخته است که می توانید از آن ها جهت اضافه کردن قابلیت های کاربردی به برنامه خود، استفاده کنید.
AngularJS دارای مجموعه ای از اعلان های درون ساخته است که می توانید از آن ها جهت اضافه کردن قابلیت های کاربردی به برنامه خود، استفاده کنید.
برای مشاهده لیست کامل این اعلان ها، به بخش مرجع آموزش اعلان ها (AngularJS Directives) در این مجموعه آموزشی بروید.
علاوه بر این، از ماژول می توانید جهت تعریف اعلان (directive) های خاص و مورد نظر خودتان در برنامه، استفاده کنید. مثال عملی : در کد مثال عملی زیر، یک اعلان جدید به نام “w3TetDirective” را ایجاد کرده و سپس در تگ ابتدایی کد از آن استفاده کرده ایم :

کد مثال عملی

کد

<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 directive خواهیم پرداخت.

آموزش قرار دادن ماژول و کنترلر درون فایل

یک روش معمول در تعریف برنامه های AngularJS Application، قرار دادن کدهای ماژول ها و کنترلرها در فایل های مجزا جاوا اسکریپت و سپس لینک کردن آن ها به صفحه مورد نظر است. مثال عملی : در کد مثال عملی زیر، فایل “myApp.js” حاوی تعریف یک ماژول و فایل “myCtrl.js” دربرگیرنده کد مربوط به کنترلر برنامه است :

کد مثال عملی

کد

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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>

خروجی

کد مثال عملی
کد	var app = angular.module("myApp", []);

نکته :

پارامتر [] در کد فوق، جهت تعریف یک ماژول جدید و مستقل به کار رفته است. بدون استفاده از [ ]، شما در واقع یک ماژول جدید ایجاد نمی کنید، بلکه یک ماژول آماده را فراخوانی خواهید کرد.

کد مثال عملی
کد	app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName= "Doe"; });

تابع ها می توانند Global Namespace برنامه را تخریب کنند

بهتر است از توابع عمومی (Global Functions) در جاوا اسکریپت پرهیز کنید. این توابع به راحتی می توانند توسط سایر اسکریپت ها تخریب شده یا کد آن ها را تغییر دهند.
ماژول های AngularJS می توانند این مشکل را برطرف کنند. به این صورت که کلیه توابع را به صورت محلی و مختص ماژول تعیین می کنند.

چه زمانی بهتر است کتابخانه های کد AngularJS فراخوانی شوند

با وجود این که رایج است اسکریپت های جاوا اسکریپت را در انتهای المنت در فایل های HTML قرار می دهند، اما توصیه می شود کتابخانه های کد AngularJS را یا در تگ صفحه تولید کرده و یا حداقل در ابتدای تگ ، آن ها را فراخوانی نمایید.
علت این کار، این است که ماژول های angular.module فقط پس از این که به طور کامل لود شوند، امکان کامپایل و اجرا دارند. مثال عملی : در کد مثال عملی زیر، اسکریپت و کدهای ماژول AngularJS را جهت اطمینان از اجرا شدن صحیح، در ابتدای تگ تعریف کرده ایم.

کد مثال عملی

کد

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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>

خروجی

درس 3 : آموزش کار ماژول AngularJS Module

آموزش کار با ماژول ها در AngularJS Modeles

آموزش ایجاد یک ماژول در AngualrJS

آموزش اضافه کردن یک کنترلر به برنامه AngularJS

آموزش اضافه کردن اعلان AngularJS Directive

آموزش قرار دادن ماژول و کنترلر درون فایل

تابع ها می توانند Global Namespace برنامه را تخریب کنند

چه زمانی بهتر است کتابخانه های کد AngularJS فراخوانی شوند