بررسی دستور ng-app در فریم ورک AngularJS

بررسی دستور ng-app در فریم ورک AngularJS

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

یکی از directive های AngularJS که بسیار هم مهم می باشد، ng-app نام دارد. در فریم ورک AngularJS این directive وظیفه شروع کردن یا Initialize کردن برنامه را دارد. به عبارت دیگر فریم ورک AngularJS ابتدا به دنبال این directive در درون یک فایل HTML میگردد و پس از پیدا کردن این directive، فریم ورک AngularJS را اصطلاحاً  Bootstrap کرده و HTML  نهایی را تولید خواهد کرد.

به طور معمول این directive در ریشه یک فایل HTML  قرار میگیرد. منظور از ریشه در واقع بیرونی ترین Element مربوط به یک فایل HTML است، برای مثال دستور <HTML> یا <body>. این موضوع باعث میشود تا AngularJS بتواند کل DOM را کنترل کند. البته مجبور نیستید که این directive را در درون دستور <HTML> یا <body> قرار دهید، بلکه می توانید در هر Element ای آن را قرار بدهید. با اضافه کردن این directive، فریم ورک AngularJS فقط Element هایی را مدیریت و پردازش میکند که فرزند Element ای باشند که این directive بر روی آن قرار گرفته است.

کد زیر مثالی از اضافه کردن این directive در یک دستور div می باشد.

<!DOCTYPE html>
<html>
<head>
    <title>ng-app Directive</title>
    <script src="../Scripts/angular.min.js"></script>    
</head>
<body >
    <div>
        {{2/2}}
    </div>
    <div id="myDiv" ng-app>
        {{5/2}}
        <div>
            {{10/2}}
        </div>
    </div>
    <div>
        {{2/2}}
    </div>
</body>
</html>

همان طور که در کد بالا مشاهده می کنید، id مربوط به این div را با مقدار “myDiv” تنظیم کرده ایم، بنابراین فریم ورک AngularJS فقط این div و تمامی Element هایی که به عنوان فرزند های این Element تعریف شده اند را مدیریت کرده و از کامپایل کردن Parent و Sibling این Element خودداری می کند. منظور از Parent همان Element ای است که یک Element در درون آن قرار گرفته است و منظور از Sibling دو Element هایی هستند که در کنار هم از یک Parent یکسان استفاده می کنند. در زبان فارسی به آنها، همزاد هم می گویند.

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

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

علاوه بر این می توانید به تصویر زیر نیز برای تکمیل شدن این توضیحات نگاهی بیاندازید.

موضوع مهم این که نمی توانید از دستور ng-app در چندین جای مختلف از یک فایل HTML  استفاده کنید.

استفاده از دستور ng-app و نام یک ماژول

با استفاده از دستور ng-app می توانیم نام یک اپلیکیشن ماژول را نیز مشخص کنید. در واقع اپلیکیشن ماژول به منظور تفکیک کردن قسمت های مختلف یک اپلیکیشن از قبیل کنترلرها، سرویس ها و فیلترها استفاده می شود. لطفاً به کد زیر نگاهی بیاندازید.

<!DOCTYPE html><!DOCTYPE html>
<html>
<head>
    <title>ng-app Directive</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myAngularApp">
    <div>
        {{2/2}}
    </div>
    <div>
        {{5/2}}
        <div>
            {{10/2}}
        </div>
    </div>
    <script>
        var app = angular.module('myAngularApp', []);
    </script>
</body>
</html>

همان طور که در مثال بالا می بینید ما علاوه بر استفاده از دستور  ng-app با دستور ng-app = ‘myAngularApp’  توانسته ایم در درون body مربوط به این فایل HTML  یک Module Name را تعریف کنیم، سپس با استفاده از یک Function به نام angular.module() که در قسمت <script> تعریف کرده ایم، این ماژول را با نام ‘myAngularApp’ ساخته ایم. در رابطه با ماژول ها و اهمیت استفاده از آن ها در قسمت های بعدی از این آموزش به طور کامل صحبت خواهیم کرد. نکته مهم این است که نام یک ماژول که در درون دستور  ng-app آن را ذکر میکنید باید با نام آن ماژول که با دستور angular.module() اقدام به ایجاد کردن آن می کنید یکسان باشد.

انجام عملیات Bootstrap کردن به صورت دستی

همان طور که در قسمت های قبلی گفتیم با استفاده از دستور ng-app به عنوان یک directive می توانیم فریم ورک AngularJS را Initialize و یا اصطلاحاً Bootstrap کنیم. منظور از Bootstrap به معنی راه اندازی به صورت خودکار می باشد. البته شما می توانید به صورت دستی نیز فریم ورک AngularJS را راه اندازی کنید و این کار نیز با استفاده از دستور ng-app انجام میشود. کدی که در قسمت زیر قرار گرفته است، این موضوع را نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <title>Angular Bootstrap</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    <div>
         {{2/2}}
    </div>
    <div>
        {{5/2}}
        <div>
            {{10/2}}
        </div>   
    </div>
<script>       
     angular.element(document).ready(function () {
         angular.bootstrap(document);
     });
</script>
 </body>
 </html>


همان طور که در کد بالا مشاهده می کنید ما با استفاده از یک Function با نام angular.bootstrap() و سپس مشخص کردن Root Element مربوط به این فایل HTML اقدام به Initialize کردن فریم ورک AngularJS کرده ایم. این موضوع باعث می شود که نه تنها فریم ورک AngularJS شروع به کار کند بلکه تمامی Element های درون Root Element نیز توسط AngularJS کامپایل بشود.

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

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

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

ارسال نظر

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