بررسی ماژول ها در فریم ورک AngularJS

بررسی ماژول ها در فریم ورک AngularJS

در این پست از وبسایت پرووید، در رابطه با بررسی ماژول ها در فریم ورک AngularJS صحبت خواهیم کرد. به ادامه ی مطلب بروید.

به بیان بسیار ساده نقش یک ماژول در AngularJS شبیه به یک ظرف و یا Container است که در آن قسمت های مختلف یک برنامه ی AngularJS از قبیل فیلترها، سرویس ها، Controller ها، Directive ها و Factory ها قرار می گیرند.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

در AngularJS با استفاده از ماژول ها می توانیم Separation of Concerns که یکی از موضوعات مهم در توسعه نرم افزار هست را به دست بیاوریم. با استفاده از ماژول ها Global Scope برنامه آلوده نمی شود و قسمت های مختلف برنامه در ماژول قرار میگیرند.

بررسی Application Module

در یک برنامه AngularJS باید یک ماژول سطح  بالا به نام Application Module ساخته بشود. در یک برنامه AngularJS این Application Module می تواند شامل دیگر Module ها، Controller ها، Filter ها و غیره باشند.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core دیدن کنید.

کدی که در قسمت زیر می بینید، نحوه تعریف یک Application Module را نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    @* HTML content *@
    <script>
        var myApp = angular.module('myApp', []); 

    </script>
</body>
</html>

همان طور که در کد بالا مشاهده می کنید، متد angular.module() به منظور ساختن یک Application Module مورد استفاده قرار گرفته است. پارامتر اول این متد نام ماژول مورد نظر است که باید با نام مشخص شده توسط ng-app به عنوان یک Directive برابر باشد. پارامتر دوم متد angular.module()  یک آرایه از ماژول ها می باشند که در مثال بالا فعلاً این آرایه خالی است. به عبارت دیگر Application Module در این مثال حاوی هیچ ماژول دیگری نیست.

بسته ی آموزش ویدئویی شروع به کار با Angular 2

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 دیدن کنید.

نکته بسیار مهم این که از آن جایی که متد angular.module() یک Object برمی گرداند، حتی اگر هیچ ماژول دیگری در Application Module قرار نگرفته باشد، باید به عنوان پارامتر دوم یک آرایه خالی به آن تحویل بدهید. حال می توانیم در Application Module تعریف شده که myApp نام دارد، ماژول های دیگری اضافه کنیم.

کدی که در قسمت زیر مشاهده می کنید، نحوه ایجاد یک Controller Module در ماژول myApp را نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        {{message}}
    </div>
    <script>
        var myApp = angular.module("myApp", []); 

        myApp.controller("myController", function ($scope) {
            $scope.message = "Hello Angular World!";
        });
    </script>
</body>
</html>

همان طور که در کد بالا مشاهده می کنید، ما یک Controller با نام myController با استفاده از متد myApp.controller() ایجاد کرده ایم. دراین مثال myApp یک ماژول می باشد و متد Controller به منظور ایجاد یک Controller در درون این ماژول استفاده شده است. بنابراین myController در Global Scope برنامه قرار نخواهد گرفت، بلکه در Application Module تعریف شده که myApp نام دارد قرار خواهد گرفت.

قراردادن ماژول ها در فایل های مجزا

همان طور که در مثال های بالا دیدید ما اقدام به ایجاد کردن Application Module و سپس Controller مربوطه در یک فایل HTML یکسان کرده ایم. اگر بخواهیم می توانیم ماژول های مختلف را در فایل های JavaScript  مختلف قرار بدهیم. این موضوع در کد زیر نشان داده شده است.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        {{message}}
    </div>
<script src="app.js" ></script>
<script src="myController.js" ></script>
</body>
</html>

علاوه بر این کد زیر فایل app.js را نشان می دهد.

var myApp = angular.module("myApp", []);

همچنین کد زیر محتویات myController.js را نشان می دهد.

myApp.controller("myController", function ($scope) {
    $scope.message = "Hello Angular World!";
});

این آموزش را در این قسمت به پایان می رسانیم و در قسمت بعدی از این آموزش در رابطه با فرم ها صحبت خواهیم کرد.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک Angular استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل برنامه نویسی تحت وب با Angular مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت