آموزش Angular 2

آموزش Angular 2 – معماری

دراین بخش راجع به استایلِ معماری فریم ورکِ Angular 2 برای پیاده سازی برنامه های کاربر، صحبت خواهیم کرد. نمودار زیر معماری Angular 2 را نشان میده:

angular arch

معماریِ Angular 2 حاوی ماژول های زیره:

  • Module (ماژول)
  • Component (مؤلفه)
  • Template (الگو)
  • Metadata
  • Data Binding (اتصال داده)
  • Service (سرویس)
  • Directive (دستور)
  • Dependency Injection (تزریق وابستگی)

Madule (ماژول)

مؤلفه ی ماژول، توسط بلاکی از کد که می تواند یک وظیفه ی (task) واحد را انجام بده، تعریف میشه. می توانید خروجی مقادیرِ چیزی مثل یک کلاس را با آن به دست بیاورید. برنامه های Angular توسط ماژول ها فراخوانی میشن و برنامه با تعداد زیادی ماژول ساخته می شه. ساختمان اصلی بلاکِ Angular 2 یک کلاسِ component است که از یک ماژول استخراج میشه.

بعضی از برنامه ها، یک کلاسِ component به نامِ AppComponent دارن که می توانید آن را در فایلی به نام app.component.ts پیدا کنین. برای استخراج کلاسِ component بصورت زیر از عبارت export استفاده کنین:

export class AppComponent { }

عبارت export مشخص می کنه که این یک ماژوله و کلاسِ AppCompnent آن بصورتِ عمومی (public) تعریف شده و توسط بقیه ی ماژول های کلاس قابل دسترسِه.

Component (مؤلفه)

مؤلفه، یک کلاس controller است با الگویی که بیش تر با viewیِ برنامه و لایه ی منطقِ (logic) صفحه در ارتباطه. مؤلفه قسمتی از کده که توسط برنامه استفاده میشه. مؤلفه نحوه ی تفسیرِ خودش را بلده و تزریقِ وابستگی (dependency injection) را پیکربندی می کنه. می توانید با استفاده از مؤلفه های داخلیِ استایل ها، urlهای استایل؛ و الگوی داخلیِ استایل ها (template inline styles)، به یک مؤلفه، استایلِ CSS بدین.

از @Component annotation برای ثبت مؤلفه استفاده میشه و برای شکستن برنامه به بخش های کوچک تر هم به کار میره. در هر عنصرِ DOM، فقط یک مؤلفه وجود داره.

Template (الگو)

viewیِ مؤلفه ها، توسطِ template که نحوه ی نمایشِ مؤلفه را به Angular میگه، تعریف میشه. برای نمونه، الگوی ساده ی زیر، نحوه ی نمایش نام را نشان میده:

<div>
Your name is : {{name}}
</div>

برای نمایش مقادیر، عبارتِ الگو (template) را در دو آکولادِ تو در تو قرار بدین.

Metadata

Metadata، روشی برای پردازش کلاسِه. در نظر داشته باشین که یک مؤلفه به نامِ MyComponent داریم که تا زمانی که به Angular بگیم که این یک مؤلفه ست، بعنوان کلاس در نظر گرفته میشه. می توانید از metadata در کلاس استفاده کنین تا به Angular بگین که MyComponent یک مؤلفه ست. metadata با استفاده از decorator به TypeScript متصل میشه.

برای نمونه:

@Component({
   selector : 'mylist',
   template : '<h2>Name is Harry</h2>'
   directives : [MyComponentDetails]
})
export class ListComponent{...}

@Component یک decorator است که از شیءِ configuration برای ایجادِ مؤلفه و view مربوطه اش  استفاده می کنه. selector در تگِ <mylist>ای که در HTML پدر پیدا می کنه، یک نمونه از مؤلفه را ایجاد می کنه. این الگو (template)، نحوه ی نمایش مؤلفه را به Angular میگه. decorator دستور (directive)، برای نمایش آرایه ای از مؤلفه ها یا دستورات (derectives) استفاده میشه.

Data Binding (اتصال داده)

اتصال داده فرآیندِ هماهنگ سازیِ مقادیرِ داده های برنامه توسطِ اعلان اتصال میان منابع و عناصرِ HTML هدف است. اتصال داده، بخش های الگو را با بخش های مؤلفه ترکیب می کنه و HTML الگو، برای اتصال هر دو سمت، به نشانه (markup) متصل میشه. در ادامه چهار نوع اتصال داده را میبینین:

  •  Interpolation (الحاق) : این روش مقادیرِ مؤلفه را میان تگ های div نمایش میده.
  •  Property Binding (اتصال پراپرتی): این روش، پراپرتیِ والد را به پراپرتیِ فرزند پاس میده.
  •  Event Binding (اتصال رویداد): زمانی که روی نامِ متدِ مؤلفه ها کلیک کنین اجرا میشه.
  •  Tow-way Binding: با استفاده از دستور ngModel در یک notation واحد، پراپرتی (property) و رویداد (event) را به هم اتصال میدیم.

سرویس (Service)

سرویس ها، توابع جاوا اسکریپتی هستن که مسئول انجام فقط یک وظیفه (task) هستن. سرویس هایِ Angular، با مکانیسمِ تزریق وابستگی (dependency injection) تزریق میشن. سرویس شامل مقدار (value)، تابع یا ویژگی است که مورد نیاز برنامه است. عموماً سرویس، کلاسیِه که یک چیز را اجرا می کنه، مثل، ورود (logging) به سرویس، سرویس داده، سرویس پیام، پیکربندیِ برنامه و ... . چیزی بیش تر از این راجع به سرویس ها در  Angular نیست و هیچ کلاس ServiceBaseای وجود نداره، با این حال، سرویس ها هنوز هم برای برنامه ی Angular، مهم هستن.

Directive (دستور)

directive، کلاسیِه که metadata را نمایش میده. سه نوع directive وجود داره:

  • Component Directive (دستور مؤلفه): با استفاده از view و controller، یک controller سفارشی ایجاد می کنه و بعنوان یک عنصرِ HTML به کار میره.
  • Decorator Directive (دستور زینتی): این دستورات، با استفاده از حالت های (behavior) مختلف، عناصر را زینت می دن.
  • Template Directive (دستور الگو): این دستور HTML را به الگویی با قابلیت استفاده ی مجدد تبدیل می کنه.

Dependency Injection (تزریق وابستگی)

تزریق وابستگی، یک الگوی طراحیِه که شیءای را بعنوان وابسته در مؤلفه های مختلف، به برنامه پاس میده و با استفاده از وابسته های مورد نیازش، نمونه ای جدید از کلاس ایجاد می کنه.

باید هنگام استفاده از تزریق وابستگی، نکات زیر را به یاد داشته باشین:

  •  تزریق وابستگی در فریم ورک شبیه سازی شده و همه جا قابل استفاده ست.
  •  مکانیسمِ تزریق، نمونه ی سرویس را نگه میداره و می تواند توسط یک provider ایجاد بشه.
  •  provider، راهی برای ایجاد سرویس هاست.
  •  می توانید provider را همراه با تزریق کننده ها (injectors) ، ثبت کنین.
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش Angular 2

Learn Angular 2

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...