آموزش معماری در انگولار ۸

erfan molaei
3 سال پیش

 آموزش معماری در انگولار ۸

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش معماری در انگولار ۸ خواهیم پرداخت.

چارچوب انگولار بر چهار مفهوم اصلی استوار است و آنها به شرح زیر هستند –

  • مولفه ها
  • الگوهایی با داده های الزام آور و دستورالعمل ها.
  • ماژول ها
  • سرویس ها و تزریق وابستگی.

مولفه

هسته معماری فریمورک انگولار،   Angular Component است. Angular Component بلوک سازنده هر برنامه Angular است. هر برنامه زاویه ای از یک کامپوننت زاویه ای دیگر تشکیل شده است. این اساسا یک کلاس جاوا اسکریپت / تایپ اسکریپت ساده به همراه یک قالب HTML و یک نام مرتبط است.

قالب HTML می تواند به داده ها از کلاس جاوا اسکریپت / تایپ اسکریپت مربوطه خود دسترسی داشته باشد. قالب HTML کامپوننت ممکن است شامل اجزای دیگری با استفاده از مقدار انتخابگر آن (نام) باشد. کامپوننت زاویه ای ممکن است دارای یک سبک CSS اختیاری مرتبط با آن باشد و الگوی HTML ممکن است به سبک های CSS نیز دسترسی داشته باشد.

Component
اجازه دهید جزء AppComponent را در برنامه ExpenseManager خود تجزیه و تحلیل کنیم. کد AppComponent به شرح زیر است –

// src/app/app.component.ts 
import { Component } from '@angular/core'; @Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Expense Manager'; 
}

 

@Component یک دکوراتور است و برای تبدیل کلاس Typescript معمولی به Angular Component استفاده می شود.

app-root انتخابگر / نام کامپوننت است و با استفاده از متای داده های انتخابگر دکوراتور کامپوننت مشخص می شود. app-root می تواند توسط سند ریشه برنامه، src/index.html همانطور که در زیر مشخص شده است استفاده شود

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8"> 
      <title>ExpenseManager</title> 
      <base href="/"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="icon" type="image/x-icon" href="favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

 

app.component.html سند الگوی HTML مرتبط با مؤلفه است. الگوی کامپوننت با استفاده از داده‌های متا templateUrl دکوراتور @Component مشخص می‌شود.

app.component.css سند سبک CSS مرتبط با کامپوننت است. سبک کامپوننت با استفاده از متا داده های styleUrls دکوراتور @Component مشخص می شود.

ویژگی AppComponent (عنوان) را می توان در قالب HTML همانطور که در زیر ذکر شده استفاده کرد

{{ title }}

 

تمپلیت

تمپلیت در اصل یک مجموعه فوق العاده از HTML است. الگو شامل تمام ویژگی های HTML است و قابلیت های اضافی را برای اتصال داده های مؤلفه به HTML و تولید پویا عناصر HTML DOM ارائه می دهد.

مفهوم اصلی قالب را می توان به دو مورد طبقه بندی کرد و آنها به شرح زیر هستند –

اتصال داده ها

برای اتصال داده ها از مؤلفه به الگو استفاده می شود.

{{ title }}

 

در اینجا، عنوان یک ویژگی در AppComponent است و با استفاده از Interpolation به قالب متصل می شود.

دستورالعمل ها

برای گنجاندن منطق و همچنین فعال کردن ایجاد عناصر پیچیده HTML DOM استفاده می شود.

<p *ngIf="canShow">
   This sectiom will be shown only when the *canShow* propery's value in the corresponding component is *true* </p> 
<p [showToolTip]='tips' />

 

در اینجا، ngIf و showToolTip (فقط یک مثال) دستورالعمل هستند. ngاگر عنصر DOM پاراگراف را فقط زمانی ایجاد کنید که canShow درست باشد. به طور مشابه، showToolTip Attribute Directives است که عملکرد tooltip را به عنصر پاراگراف اضافه می کند.

هنگامی که کاربر ماوس را روی پاراگراف قرار می دهد، یک راهنمای ابزار نشان داده می شود. محتوای راهنمای ابزار از ویژگی tips مؤلفه مربوطه آن می آید.

ماژول ها

Angular Module اساساً مجموعه ای از ویژگی ها / عملکردهای مرتبط است. Angular Module چندین مؤلفه و خدمات را در یک زمینه واحد گروه بندی می کند.

برای مثال، قابلیت‌های مرتبط با انیمیشن‌ها را می‌توان در یک ماژول گروه‌بندی کرد و Angular قبلاً یک ماژول برای عملکرد مرتبط با انیمیشن، ماژول BrowserAnimationModule ارائه می‌دهد.

یک برنامه Angular می تواند هر تعداد ماژول داشته باشد، اما فقط یک ماژول را می توان به عنوان ماژول ریشه تنظیم کرد، که برنامه را بوت استرپ می کند و سپس در صورت لزوم ماژول های دیگر را فراخوانی می کند. یک ماژول را می توان برای دسترسی به عملکرد از ماژول های دیگر نیز پیکربندی کرد. به طور خلاصه، اجزای هر ماژول می توانند به مؤلفه و خدمات از هر ماژول دیگری دسترسی داشته باشند.

نمودار زیر تعامل بین ماژول ها و اجزای آن را نشان می دهد.

Module
اجازه دهید ماژول ریشه برنامه Expense Manager خود را بررسی کنیم.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; @NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

 

 

  • دکوراتور NgModule برای تبدیل کلاس Typescript / JavaScript ساده به ماژول Angular استفاده می شود.
  • گزینه declarations برای گنجاندن اجزا در AppModulemodule استفاده می شود.
  • گزینه bootstrap برای تنظیم مولفه ریشه AppModulemodule استفاده می شود.
  • گزینه providers برای گنجاندن خدمات AppModulemodule استفاده می شود.
  • گزینه imports برای وارد کردن ماژول های دیگر به AppModulemodule استفاده می شود.

نمودار زیر رابطه بین ماژول، مؤلفه و خدمات را نشان می دهد

سرویس ها

سرویس ها کلاس Typescript / JavaScript ساده هستند که عملکرد بسیار خاصی را ارائه می دهند. خدمات یک کار واحد را انجام می دهند و آن را به بهترین شکل انجام می دهند. هدف اصلی این سرویس قابلیت استفاده مجدد است. به جای نوشتن یک قابلیت در داخل یک کامپوننت، تفکیک آن به یک سرویس، آن را در سایر مؤلفه ها نیز قابل استفاده می کند.

همچنین، Services توسعه دهنده را قادر می سازد تا منطق تجاری برنامه را سازماندهی کند. اصولا کامپوننت از خدمات برای انجام کار خود استفاده می کند. Dependency Injection برای مقداردهی اولیه صحیح سرویس در کامپوننت استفاده می شود تا کامپوننت بتواند در صورت لزوم و بدون هیچ گونه راه اندازی به سرویس ها دسترسی داشته باشد.

Angular application
ما مفاهیم اصلی برنامه Angular را یاد گرفته ایم. اجازه دهید جریان کامل یک برنامه Angular معمولی را ببینیم.

کاربرد زاویه ای
src/main.ts نقطه ورود برنامه Angular است.

src/main.ts AppModule (src/app.module.ts) را بوت استرپ می کند که ماژول ریشه برای هر برنامه Angular است.

platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));

 

AppModule AppComponent (src/app.component.ts) را بوت استرپ می کند که جزء اصلی هر برنامه انگولار است.

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
      imports: [ 
   BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

 

AppModule ماژول ها را از طریق گزینه import بارگیری می کند.

AppModule همچنین تمام سرویس های ثبت شده را با استفاده از چارچوب تزریق وابستگی (DI) بارگذاری می کند.

AppComponent الگوی خود را رندر می کند (src/app.component.html) و از سبک های مربوطه (src/app.component.css) استفاده می کند. نام AppComponent، app-root برای قرار دادن آن در داخل src/index.html استفاده می شود.

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8"> 
      <title>ExpenseManager</title> 
      <base href="/"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="icon" type="image/x-icon" href="favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

 

AppComponent می تواند از هر مؤلفه دیگری که در برنامه ثبت شده است استفاده کند.

@NgModule({ 
   declarations: [ 
      AppComponent 
      AnyOtherComponent
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

 

مؤلفه با استفاده از نام انتخابگر مؤلفه هدف، از مؤلفه دیگر از طریق دستورالعمل در قالب خود استفاده می کند.

<component-selector-name></component-selector-name>

 

همچنین، تمامی سرویس‌های ثبت‌شده از طریق چارچوب تزریق وابستگی (DI) برای تمام اجزای انگولار قابل دسترسی هستند.

 

منبع.

 

لیست جلسات قبل آموزش انگولار ۸

  1. آموزش انگولار ۸
  2. آموزش معرفی انگولار ۸
  3. آموزش نصب انگولار ۸
  4. آموزش ایجاد اولین برنامه در انگولار ۸
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه