در این مقاله به سراغ آموزش Modules در AngularJS رفتیم،با استفاده از ماژول های AngularJS می توانید عملکرد ها و رفتارهای برنامه AngularJS خود را کنترل کنید؛ با کمک از کنترلرها و دایرکتیوها(directives).در ابتدای کار، این کلمات شاید نامفهوم باشند ولی مباحثی مهمی هستند که در آینده به معرفی Controllers و directives مفصل خواهیم پرداخت.
وقت آن رسیده که ماژول ها را بررسی کنیم:
Modules در AngularJS
معمولا از ماژول ها برای تعریف اپلیکیشن ها استفاده می شود. بهتر است همیشه به یاد داشته باشید که اپلیکیشن های AngularJS همیشه با تگ های HTML که شامل AngularJS directive ng-app است، آغاز می شوند. ماژول ها، ظرف هایی برای بخش های مختلف اپلیکیشن و کنترلرهای اپلیکیشن هستند. نکته مهمی که باید در نظر گرفت، AngularJS Controllers ها همیشه به AngularJS Modules وابسته هستند.
در ادامه با موارد زیر به طور کامل آشنا خواهیم شد:
- نحوه ایجاد یک ماژول جدید
- استفاده از کنترلر با استفاده از ماژول ها
- استفاده از دایرکتیوها با استفاده از ماژول ها
- ماژول ها و کنترلرها در دو فایل js مجزا
- توصیه هایی برای استفاده از کتابخانه های JavaScript و AngularJS
نحوه ایجاد یک ماژول جدید
در اینجا متغیر ” angularJSApp” به یک عنصر HTML وابسته است که این عنصر، با کمک directive ng-app به اپلیکیشن AngularJS ارجاع داده شده است. برای تعریف ماژول می توان از API استفاده کرد مانند آنچه در کدهای بالا نمایش داده شده است.
var app = angular.module("angularJSApp",[]);
متغیر ” app” برای کار با بخش های مختلف AngularJS application در قسمت های بعدی، تعریف می کنیم.
استفاده از کنترلر با استفاده از ماژول ها
بعد از ایجاد ارجاع دادن(reference ) به ماژول، می توانیم با متغیرهای داخلی اپلیکیشن AngularJS کار کنیم. در مثال بالا “نام” و “نام خانوادگی” به وسیله AngularJS Controller مقداردهی اولیه شدند.
خروجی برنامه:
استفاده از دایرکتیوها با استفاده از ماژول ها
همچنین امکان ایجاد دایرکتیوهای دلخواه در وجود دارد. در مثال بالا یک دایرکتیو سفارشی شده ” sm-directive-test” پیاده سازی شده است.
خروجی برنامه:
و در ادامه مثال دیگری در مورد استفاده از کنترلر ها را بررسی می کنیم:
در مثال بالا، عنصر <div> از AngularJS HTML ، تکست داخلی دارد و سازنده بی نام(anonymous) از دایرکیتو سفارشی شده فقط یک پیغام (“”سلام”) دارد . بیاید نگاهی به AngularJS رفتار در این نمونه بینداریم.
به محض اجرای این اپلیکیشن، صفحه خروجی به شکل زیر خواهد بود. تکست داخلی نمایش داده می شود و پیغام مدنظرمان در صفحه ظاهر می شود.
وقتی روی از پنجره OK کلیک کنیم، صفحه تغییر خواهد کرد و شبیه تصویری که در زیر آمده می شود(خروجی توسط در سازنده دایرکتیو بازنویسی شده است)
ماژول ها و کنترلرها در دو فایل js مجزا
فایل های جاوا اسکریپت در AngularJS را می توان جدا کرد بهترین دلیل برای این کار، افزایش امنیت برنامه است. در کدهای زیر نمونه از این جداسازی نشان داده شده است:
smApp.js,
smCtrl.js,
خروجی برنامه:
توصیه هایی برای استفاده از کتابخانه های JavaScript و AngularJS
از تعریف توابع سراسری باید پرهیز کنیم زیرا به راحتی قابل تخریب یا حتی بازنویسی توسط جاوا اسکریپت های دیگر هستند. AngularJS با نگه داشتن قسمت منطقی برنامه(logics ) در ماژول محلی، این آسیب را به نوعی کاهش داده است.
برای برنامه های مبتی بر HTML ، کدهای جاوا اسکریپت در انتهای تگ body قرار می گیرند ولی در AngularJS توصیه می شود کتابخانه های AngularJS در شروع تگ head یا ابتدا تگ body بارگذاری شوند. ماژل های angular می توانند بعد از بارگذاری کتابخانه های AngularJS ، کامپایل شوند.
هیچ دیدگاهی نوشته نشده است.