ورود / ثبت نام
0
0

آموزش ساخت Modules در AngularJS

279 بازدید
Modules در AngularJS

Modules در AngularJS

در این مقاله به سراغ آموزش Modules در AngularJS رفتیم،با استفاده از ماژول های AngularJS می توانید عملکرد ها و رفتارهای برنامه AngularJS خود را کنترل کنید؛ با کمک از کنترلرها و دایرکتیوها(directives).در ابتدای کار، این کلمات شاید نامفهوم باشند ولی مباحثی مهمی هستند که در آینده به معرفی Controllers و directives مفصل خواهیم پرداخت.

وقت آن رسیده که ماژول ها را بررسی کنیم:

Modules در AngularJS

معمولا از ماژول ها برای تعریف اپلیکیشن ها استفاده می شود. بهتر است همیشه به یاد داشته باشید که اپلیکیشن های AngularJS  همیشه با تگ های HTML  که شامل AngularJS directive ng-app است، آغاز می شوند. ماژول ها، ظرف هایی برای بخش های مختلف اپلیکیشن و کنترلرهای اپلیکیشن هستند. نکته مهمی که باید در نظر گرفت، AngularJS Controllers ها همیشه به  AngularJS Modules وابسته هستند.

در ادامه با موارد زیر به طور کامل آشنا خواهیم شد:

  • نحوه ایجاد یک ماژول جدید
  • استفاده از کنترلر با استفاده از ماژول ها
  • استفاده از دایرکتیوها با استفاده از ماژول ها
  • ماژول ها و کنترلرها در دو فایل js مجزا
  • توصیه هایی برای استفاده از کتابخانه های JavaScript و AngularJS

 

نحوه ایجاد یک ماژول جدید

Modules در AngularJS

در اینجا متغیر ” angularJSApp” به یک عنصر HTML  وابسته است که این عنصر، با کمک directive ng-app به اپلیکیشن AngularJS  ارجاع داده شده است. برای تعریف ماژول می توان از API استفاده کرد مانند آنچه در کدهای بالا نمایش داده شده است.


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

متغیر ” app” برای کار با بخش های مختلف AngularJS application در قسمت های بعدی، تعریف می کنیم.

 

استفاده از کنترلر با استفاده از ماژول ها

Modules در AngularJS

بعد از ایجاد ارجاع دادن(reference ) به ماژول، می توانیم با متغیرهای داخلی اپلیکیشن AngularJS  کار کنیم. در مثال بالا “نام” و “نام خانوادگی” به وسیله AngularJS Controller مقداردهی اولیه شدند.

خروجی برنامه:

Modules در AngularJS

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

Modules در AngularJS

همچنین امکان ایجاد دایرکتیوهای دلخواه در وجود دارد. در مثال بالا یک دایرکتیو سفارشی شده ” sm-directive-test” پیاده سازی شده است.

 خروجی برنامه:

Modules در AngularJS

و در ادامه مثال دیگری در مورد استفاده از کنترلر ها را بررسی می کنیم:

Modules در AngularJS

در مثال بالا، عنصر <div> از  AngularJS HTML ، تکست داخلی دارد و سازنده بی نام(anonymous) از دایرکیتو سفارشی شده فقط یک پیغام (“”سلام”) دارد . بیاید نگاهی به AngularJS  رفتار در این نمونه بینداریم.

به محض اجرای این اپلیکیشن، صفحه خروجی به شکل زیر خواهد بود. تکست داخلی نمایش داده می شود و پیغام مدنظرمان در صفحه ظاهر می شود.

Modules در AngularJS

وقتی روی از پنجره OK  کلیک کنیم، صفحه تغییر خواهد کرد و شبیه تصویری که در زیر آمده می شود(خروجی توسط در سازنده دایرکتیو بازنویسی شده است)

Modules در AngularJS

ماژول ها و کنترلرها در دو فایل js مجزا

فایل های جاوا اسکریپت در AngularJS را می توان جدا کرد بهترین دلیل برای این کار، افزایش امنیت برنامه است. در کدهای زیر نمونه از این جداسازی نشان داده شده است:

Modules در AngularJS

smApp.js,

Modules در AngularJS

smCtrl.js,

Modules در AngularJS

خروجی برنامه:

Modules در AngularJS

 

توصیه هایی برای استفاده از کتابخانه های JavaScript و  AngularJS

از تعریف توابع سراسری باید پرهیز کنیم زیرا به راحتی قابل تخریب یا حتی بازنویسی توسط جاوا اسکریپت های دیگر هستند. AngularJS  با نگه داشتن قسمت منطقی برنامه(logics ) در ماژول محلی، این آسیب را به نوعی کاهش داده است.

برای برنامه های مبتی بر HTML  ، کدهای جاوا اسکریپت در انتهای تگ body قرار می گیرند ولی در AngularJS توصیه می شود کتابخانه های AngularJS   در شروع تگ head یا ابتدا تگ body بارگذاری شوند. ماژل های angular می توانند بعد از بارگذاری کتابخانه های AngularJS ، کامپایل شوند.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=21550
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
پویا قربانی
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد آموزش ساخت Modules در AngularJS

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.