کامپوننت ها (Components) در انگولار 6 – آموزش Angular 6

چهارشنبه ۲۶ دی ۱۳۹۷
بازدید ۲,۰۷۱ نفر
آرتین
(14 امتیاز از 3 رای)
Loading...

تصویر angular-6-components_5584 کامپوننت ها (Components) در انگولار 6 - آموزش Angular 6

کامپوننت ها (Components) در انگولار 6

بخش اصلی توسعه یک برنامه در انگولار 6 با استفاده از کامپوننت ها (Components) انجام می شود. اساس کامپوننت ها کلاس هایی هستند که با فایل های html که در مرورگر نمایش داده می شوند، ارتباط برقرار می کنند. در زیر فایل های موجود در کامپوننت app را مشاهده می کنید:

component.css
component.html
component.spec.ts
component.ts
module.ts

همانطور که در بخش قبلی نیز گفته شد، فایل های فوق توسط CLI و در هنگام ایجاد پروژه ساخته می شوند. اگر فایل app.module.ts را با ویرایشگر باز کنید، ماژول های استفاده شده در این کامپوننت را مشاهده خواهید کرد.

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 { }

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 { }

بخش declarations شامل AppComponent است که قبلا import شده است و به عنوان کامپوننت والد (parent) شناخته می شود. شما می توانید با استفاده از CLI کامپوننت جدید ایجاد کنید. توجه داشته باشید که هر کامپوننتی که ایجاد می شود، به عنوان فرزند کامپوننت app محسوب می شود.

دستور زیر به منظور ایجاد یک کامپوننت جدید استفاده می شود (new-cmp نام کامپوننت را مشخص می کند):

ng generate component new-cmp

1	ng generate component new-cmp

زمانی که دستور فوق را اجرا کنید، خروجی زیر را دریافت خواهید کرد:

CREATE src/app/new-cmp/new-cmp.component.html (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (398 bytes)

CREATE src/app/new-cmp/new-cmp.component.html (26 bytes)

CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)

CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)

CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)

UPDATE src/app/app.module.ts (398 bytes)

حال اگر به مسیر src/app بروید، یک دایرکتوری جدید با نام new-cmp را مشاهده خواهید کرد که شامل فایل های زیر است:

new-cmp.component.css
new-cmp.component.html
new-cmp.component.spec.ts
new-cmp.component.ts

بعد از ایجاد شدن کامپوننت new-cmp، محتوای فایل app.module.ts به صورت زیر تغییر می یابد:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';

// includes the new-cmp component we created

@NgModule({

declarations: [

AppComponent,

NewCmpComponent // here it is added in declarations and will behave as a child component

imports: [

BrowserModule

providers: [],

bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.

})

export class AppModule { }

اگر فایل new-cmp.component.ts را باز کنید، محتویات زیر را مشاهده خواهید کرد:

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .
@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html',
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .

@Component({

// this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.

selector: 'app-new-cmp', //

templateUrl: './new-cmp.component.html',

// reference to the html file created in the new component.

styleUrls: ['./new-cmp.component.css'] // reference to the style file.

})

export class NewCmpComponent implements OnInit {

constructor() { }

ngOnInit() {}

}

اگر به کد فوق دقت کنید، یک کلاس با نام NewCmpComponent ایجاد شده است که OnInit را پیاده سازی می کند. همچنین شامل یک سازنده و متدی به نام ngOnInit است. متد ngOnInit زمانی که کلاس اجرا شود، به طور خودکار فراخوانی می شود.

نحوه کار برنامه

همانطور که در بالا نیز گفته شد، کامپوننت app که به صورت پیشفرض ایجاد شده است، به عنوان والد است و سایر کامپوننت های ایجاد شده به عنوان فرزند این کامپوننت هستند. اگر در مرورگر خود آدرس http://localhost:4200 را باز کنید، ابتدا فایل index.html که شامل کدهای زیر است اجرا می شود.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 6 Application</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>

<!doctype html>

<head>

<title>Angular 6 Application</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

به جزء تگ زیر همه کدهای فوق به طور معمول در اکثر اسناد html موجود هستند:

<app-root></app-root>

1	<app-root></app-root>

این تگ توسط انگولار ایجاد شده است و به عنوان تگ ریشه (root) عمل می کند. مرجع این تگ در فایل main.ts مشخص شده است.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

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

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule);

AppModule از کامپوننت app وارد (import) شده و به ماژول bootstrap که برنامه را لود می کند، ارسال می شود.

حال به محتوای فایل app.module.ts توجه کنید:

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

export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({

declarations: [

AppComponent,

NewCmpComponent

imports: [

BrowserModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

در کد فوق یک متغیر به نام AppComponent که app.Component.ts را در خود نگه می دارد تعریف شده است. همان متغیر به bootstrap نیز داده می شود.

محتوای فایل app.component.ts:

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

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 6 Project!';

}

angular core به کامپوننت اضافه شده و در متغیری به نام Component که در Declarator استفاده می شود، قرار گرفته است.

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

در بخش declaratory به selector، templeateUrl و styleUrl ارجاع داده می شود. selector تگی که در فایل index.html بود (همان app-root) را اعلان می کند، templeateUrl قالب کامپوننت و stylesUrl استایل های مربوط به این کامپوننت را مشخص می کند. همچنین کلاس AppComponent شامل یک متغیر به نام title است که در مرورگر نمایش داده می شود.

محتوای فایل app.component.html که قالب کامپوننت را تعریف می کند، به صورت زیر است:

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<h1>

Welcome to {{title}}.

</h1>

</div>

آن فقط شامل چند خط کد html به همراه یک متغیر title که در داخل {{}} قرار دارد، است. زمانی که برنامع اجرا شود، مقدار متغیر title که در داخل کلاس AppComponent تعریف شده بود، با {{title}} جایگزین خواهد شد. به این کار بایند کردن (Binding) گفته می شود که در بخش های بعدی بررسی می کنیم. در ادامه محتوای فایل های کامپوننت new-cmp را بررسی می کنیم.

محتوای فایل new-cmp.component.ts:

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

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

@Component({

selector: 'app-new-cmp',

templateUrl: './new-cmp.component.html',

styleUrls: ['./new-cmp.component.css']

})

export class NewCmpComponent implements OnInit {

constructor() { }

ngOnInit() {}

}

در کد فوق دو import از angular core وجود دارد که اولی در declaratory استفاده می شود و دومی در کلاس NewCmpComponent پیاده سازی می شود. در declaratory یک selector با نام app-new-cmp، یک قالب، و یک فایل استایل مشخص شده است.

به طور پیشفرض فایل new-cmp.component.html شامل محتوای زیر است:

<p>
   new-cmp works!
</p>

<p>

new-cmp works!

</p>

فایل new-cmp.component.css هیچ محتوایی ندارد.

زمانی که برنامه اجرا کنید، هیچ چیزی از کامپوننت new-cmp نمایش داده نخواهد شد. زیرا باید آن را به کامپوننت والد (app) اضافه کنید. مانند نمونه زیر:

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<app-new-cmp></app-new-cmp>

<h1>

Welcome to {{title}}.

</h1>

</div>

<app-new-cmp></app-new-cmp>

حال زمانی که برنامه اجرا شود، محتوای فایل new-cmp.component.html به جای تگ <app-new-cmp></app-new-cmp> قرار می گیرد و در مرورگر نمایش داده می شود.

فایل new-cmp.component.ts باز کرده و مانند نمونه زیر یک متغییر با نام newcomponent و مقدار “Entered in new component created” به آن اضافه کنید:

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

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

@Component({

selector: 'app-new-cmp',

templateUrl: './new-cmp.component.html',

styleUrls: ['./new-cmp.component.css']

})

export class NewCmpComponent implements OnInit {

newcomponent = "Entered in new component created";

constructor() {}

ngOnInit() { }

}

حال در فایل new-cmp.component.html می توانید به آن متغیر دسترسی داشته باشید مانند نمونه زیر از آن استفاده کنید:

<p>
   {{newcomponent}}
</p>
<p>
   new-cmp works!
</p>

<p>

</p>

<p>

new-cmp works!

</p>

حال اگر برنامه را اجرا کنید خروجی زیر را مشاهده خواهید کرد:

تصویر angular-6-components_5584_1 کامپوننت ها (Components) در انگولار 6 - آموزش Angular 6

انگولار 6 - ماژول ها (Module) انگولار 6 - ایجاد پروژه جدید

دسته ها: آموزش ها - زبان برنامه نویسی Angular

آشنایی با کامپوننت های کاربردی Vue

آموزش ساخت اپلیکیشن های مدرن لاراول با Inertia.js

آموزش توسعه وب اپلیکیشن با بلاک چین اتریوم (Ethereum Blockchain)

آموزش مقدماتی فریم ورک ReactJS به صورت فیلم آموزشی

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

آموزش پروژه محور سی شارپ (سیستم ثبت نام و انتخاب واحد دانشجویان)

فیلم آموزش AngularJS (انگولار جی اس) به زبان فارسی

آموزش Angular 6

مباحث پایه Angular 6

کامپوننت ها (Components) در انگولار 6 – آموزش Angular 6

کامپوننت ها (Components) در انگولار 6

نحوه کار برنامه

سورس سیستم مدیریت داروخانه به زبان سی شارپ

سورس سیستم مدیریت حقوق و دستمزد به زبان سی شارپ

سورس آلبوم عکس به زبان جاوا

سورس مسئله برج هانوی به زبان سی شارپ

آموزش ساخت برنامه دسکتاپ با React و Electron

سورس نرم افزار پیام رسان به زبان سی شارپ

سورس فروشگاه آنلاین با اندروید استودیو (Android Studio) به همراه پنل مدیریت

سورس تاکسی آنلاین با اندروید استودیو (Android Studio) به همراه پنل مدیریت