دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۹
  • مرداد

جلسه ۰۳ : آشنایی با ماژول ها در AngularJS

  • دسته‌بندی‌ها :
جلسه ۰۳ : آشنایی با ماژول ها در AngularJS
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در بخش قبلی با چگونگی به کار بردن مقادیر در کد HTML ، و انتخاب مقدار مورد نظر ، آشنا شدید. حال قصد داریم در بخش آشنایی با module یا ماژول ها در AngularJS ، چگونگی کار با داده ها و مقادیر را در فریم ورک و کدهای AngularJS، بررسی کنیم.

      همانطور که در بخش قبلی نیز اشاره شد. Expressions یا مقادیر، در واقع داده های عددی ، رشته ها یا آرایه هایی هستند که بین کد html و AngularJS مبادله می شود. در ادامه ی بخش، به چگونگی کار با این داده ها در کد AngularJS می پردازیم.

      آشنایی با module یا ماژول ها در AngularJS

      یک ماژول AngularJS یک برنامه را تعریف می کند.

      این ماژول یک ظرف برای قسمت های مختلف یک برنامه است.

      این ماژول یک ظرف برای کنترل کننده های برنامه است.

      کنترل کننده ها، همیشه به یک ماژول متعلق هستند.

      ایجاد یک ماژول

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

      مثال : 

      پارامتر “myApp” به عنصر HTML اشاره دارد که در آن برنامه اجرا می شود.

      حالا شما می توانید کنترل کننده ها، دستورالعمل ها، فیلتر ها و موارد دیگر را به برنامه AngularJS اضافه کنید.

      افزودن یک کنترلر

      افزودن کنترلر به یک برنامه، با دستور ng-controller امکان پذیر است:

      مثال: تعریف ماژول

      خودتان امتحان کنید »   

      مثال : 

      افزودن یک دستورالعمل

      AngularJS مجموعه ای از دستورات ساخته شده است که می توانید از آن برای اضافه کردن قابلیت به برنامه خود استفاده کنید.

      علاوه بر این شما می توانید از ماژول برای اضافه کردن دستورات خود به برنامه های خود استفاده کنید:

      مثال: تعریف دستورالعمل با استفاده از ماژول:

      خودتان امتحان کنید »

      مثال : 

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

      در برنامه های AngularJS رایج است. که ماژول و کنترل کننده ها را در فایل های جاوا اسکریپت قرار دهد.

      در این مثال، myApp.js شامل یک تعریف ماژول برنامه است، در حالی که myCtrl.js حاوی کنترل کننده است:

       

      مثال: تعریف کنترلر در فایل:

      خودتان امتحان کنید »

      مثال : 

      کد مربوط به مثال فوق در AngularJS:

      مثال : 

      پارامتر [] در تعریف ماژول می تواند برای تعریف ماژول های وابسته استفاده شود.

      بدون پارامتر [] شما یک ماژول جدید ایجاد نمی کنید، اما بازیابی یک داده موجود را ایجاد می کنید:

      مثال : 

      توابع و اشغال Namespace

      توابع عمومی باید در جاوا اسکریپت اجتناب شود. آنها می توانند به آسانی توسط اسکریپت های دیگر رونویسی یا نابود شوند.

      ماژول های AngularJS این مسئله را با نگه داشتن همه توابع محلی به ماژول کاهش می دهد.

      زمانیکه کتابخانه بارگزاری می شود

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

      این به این دلیل است که فراخوانی  angular.module می تواند پس از بارگذاری کتابخانه کامپایل شود.

       

      مثال: بارگزاری کتابخانه:

      خودتان امتحان کنید »

      مثال : 

      کلام آخر

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

      QR:  جلسه ۰۳ : آشنایی با ماژول ها در AngularJS
      به اشتراک بگذارید