آموزش کامپوننت ها در انگولار 2

saber

3 سال پیش

امتیاز دهید post

آموزش کامپوننت ها در انگولار 2

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

کامپوننت ها یک قطعه کد منطقی برای برنامه Angular JS هستند. یک جزء شامل موارد زیر است –

الگو – این برای نمایش نمای برنامه کاربرد دارد. این شامل HTML است که باید در برنامه ارائه شود. این بخش همچنین شامل الزام آور و دستورالعمل ها است.
کلاس – این مانند یک کلاس تعریف شده در هر زبانی مانند C. این شامل ویژگی ها و روش ها است. این کد دارای کد است که برای پشتیبانی از نمای استفاده می شود. در TypeScript تعریف شده است.
متا دیتا – این داده های اضافی تعریف شده برای کلاس انگولار را دارد. با تزئین کننده تعریف شده است.

بیایید اکنون به فایل app.component.ts برویم و اولین جزء Angular خود را ایجاد کنیم.

First Angular Component
بیایید کد زیر را به فایل اضافه کنیم و هر جنبه را با جزئیات بررسی کنیم.

کلاس

کلاس دکوراسیون، کلاس در TypeScript تعریف شده است. کلاس معمولاً نحو زیر را در TypeScript دارد.

class classname {
   Propertyname: PropertyType = Value
}

class classname {

Propertyname: PropertyType = Value

}

مولفه های کلاس

نام کلاس – این نامی است که باید به کلاس داده شود.
نام ویژگی – این نامی است که باید به دارایی داده شود.
PropertyType – از آنجا که TypeScript به شدت تایپ می شود، باید یک نوع به ویژگی بدهید.
مقدار – این مقداری است که باید به دارایی داده شود.

مثال

export class AppComponent {
   appTitle: string = 'Welcome';
}

export class AppComponent {

appTitle: string = 'Welcome';

}

در مثال موارد زیر باید توجه شود –

ما در حال تعریف کلاسی به نام AppComponent هستیم.
کلمه کلیدی export به گونه ای استفاده می شود که کامپوننت بتواند در سایر ماژول ها در برنامه Angular JS استفاده شود.
appTitle نام ویژگی است.
خاصیت نوع رشته داده می شود.
مقدار “Welcome” به ویژگی داده می شود.

قالب

این نمایی است که باید در برنامه ارائه شود.

Template: '
   &lt;HTML code&gt;
   class properties
'

Template: '

class properties

مولفه های قالب

کد HTML – این کد HTML است که باید در برنامه ارائه شود.
ویژگیهای کلاس – اینها خصوصیات کلاس هستند که می توان در قالب به آنها اشاره کرد.

مثال

template: '
   &lt;div&gt;
      &lt;h1&gt;{{appTitle}}&lt;/h1&gt;
      &lt;div&gt;To Tutorials Point&lt;/div&gt;
   &lt;/div&gt;
'

template: '

<div>

<h1>{{appTitle}}</h1>

<div>To Tutorials Point</div>

</div>

در مثال موارد زیر باید توجه شود –

ما در حال تعریف کد HTML هستیم که در برنامه ما ارائه می شود
ما همچنین به ویژگی appTitle از کلاس خود اشاره می کنیم.

متا دیتا

این برای دکوراسیون کلاس Angular JS با اطلاعات اضافی استفاده می شود.

بیایید نگاهی به کد تکمیل شده با کلاس، الگو و متا دیتا بیندازیم.

مثال

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: ` &lt;div&gt;
      &lt;h1&gt;{{appTitle}}&lt;/h1&gt;
      &lt;div&gt;To Tutorials Point&lt;/div&gt;
   &lt;/div&gt; `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

import { Component } from '@angular/core';

@Component ({

selector: 'my-app',

template: ` <div>

<h1>{{appTitle}}</h1>

<div>To Tutorials Point</div>

</div> `,

})

export class AppComponent {

appTitle: string = 'Welcome';

}

در مثال بالا موارد زیر باید مورد توجه قرار گیرد –

ما از کلمه کلیدی import برای وارد کردن دکوراتور “Component” از ماژول angular/core استفاده می کنیم.
سپس از دکوراتور برای تعریف یک کامپوننت استفاده می کنیم.
کامپوننت دارای یک انتخاب کننده به نام “my-app” است. این چیزی نیست جز تگ html سفارشی ما که می تواند در صفحه اصلی html ما استفاده شود.

اکنون اجازه دهید به فایل index.html در کد خود برویم.

Demo App

بیایید مطمئن شویم که تگ بدنه اکنون حاوی مرجع تگ سفارشی ما در کامپوننت است. بنابراین در مورد بالا، ما باید مطمئن شویم که برچسب بدن شامل کد زیر است –

&lt;body&gt;
   &lt;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt;

<body>

<my-app></my-app>

</body>

حال اگر به مرورگر برویم و خروجی را ببینیم ، خواهیم دید که خروجی همانطور که در کامپوننت است ارائه می شود.

Output

منبع.

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

امتیاز دهید post

برچسب ها : آموزش انگولار 2 آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش کامپوننت ها در انگولار 2

آموزش کامپوننت ها در انگولار 2

کلاس

مولفه های کلاس

مثال

قالب

مولفه های قالب

مثال

متا دیتا

مثال

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

دیدگاه شما

بدون دیدگاه

آموزش کامپوننت ها در انگولار 2

کلاس

مولفه های کلاس

مثال

قالب

مولفه های قالب

مثال

متا دیتا

مثال

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه