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

پنجشنبه ۲۷ تیر ۱۳۹۸
بازدید ۳,۱۴۴ نفر
یعثوب سیفی زاده
(28 امتیاز از 6 رای)
Loading...

تصویر angular7-components_6603 کامپوننت ها (Components) در انگولار 7 - آموزش انگولار 7

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

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

در زیر فایل های موجود در کامپوننت app را مشاهده می کنید:

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

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

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

import { AppRoutingModule } from './app-routing.module';

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

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

ng g component new-cmp

1	ng g component new-cmp

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

C:projectA7angular7-app>ng g 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 (477 bytes)

C:projectA7angular7-app>ng g 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 (477 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 { AppRoutingModule } from './app-routing.module';
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,
      AppRoutingModule
   ],
   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 { AppRoutingModule } from './app-routing.module';

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,

AppRoutingModule

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', // selector to be used inside .html file.
   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', // selector to be used inside .html file.

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 که شامل کدهای زیر است اجرا می شود.

<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular7App</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>

<head>

<title>Angular7App</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).catch(err => console.error(err));

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).catch(err => console.error(err));

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

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

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

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

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

import { AppRoutingModule } from './app-routing.module';

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

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

@NgModule({

declarations: [

AppComponent,

NewCmpComponent

imports: [

BrowserModule,

AppRoutingModule '

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 7';
}

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

title = 'Angular 7';

}

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.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>

همانطور که می بینید یک تگ ساده html را بدون استایل خاصی تعریف شده است. اما اگر پروژه را اجرا کنید هیچ چیزی که مربوط به این کامپوننت باشد نخواهید دید.

تصویر angular7-components_6603_1 کامپوننت ها (Components) در انگولار 7 - آموزش انگولار 7

در ادامه دلیل نمایش داده نشدن محتوای کامپوننت جدید را بررسی میکنیم.

محتوای فایل 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() { }

}

همانطور که مشاهده می کنید، selector این کامپوننت با نام app-new-cmp تنظیم شده است.

برای اینکه محتوای کامپوننت جدید در برنامه نمایش داده شود باید تگ را به فایل 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>
<app-new-cmp></app-new-cmp>

<h1>

Welcome to {{title}}.

</h1>

</div>

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

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

تصویر angular7-components_6603_2 کامپوننت ها (Components) در انگولار 7 - آموزش انگولار 7

در ادامه جزئیات بیشتری را به کامپوننت 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 {
   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() { }

}

در کلاس فوق ما یک متغیر جدید با نام newcomponent و مقدار “Entered in new component created” ایجاد کرده ایم.

حال در بخش html آن متغیر را فراخوانی میکنیم:

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

<p>

</p>

<p>

new-cmp works!

</p>

همچنین یک استایل ساده نیز برای آن مشخص می کنیم:

p {
   color: blue;
   font-size: 25px;
}

p {

color: blue;

font-size: 25px;

}

خروجی پروژه بعد از اجرا:

تصویر angular7-components_6603_3 کامپوننت ها (Components) در انگولار 7 - آموزش انگولار 7

به طور مشابه ما می توانیم کامپوننت های دیگری نیز ایجاد کنیم و در صورت نیاز از آن ها در کامپوننت اصلی استفاده کنیم.

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

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

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

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

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

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

فیلم آموزش WPF در سی شارپ به صورت پروژه محور | مدیریت بخشنامه تحت شبکه

فیلم آموزش WPF در سی شارپ از مقدماتی تا پیشرفته

آموزش سی شارپ به صورت پروژه محور (مدیریت فروشگاه)

آموزش Angular 7

مباحث پایه Angular 7

مثال های کاربردی Angular 7

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

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

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

سورس سیستم مدیریت هتل با زبان C++

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

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

سورس بازوی ربات سه بعدی با OpenGL به زبان C++

سورس مسابقه ماشین ها با OpenGL به زبان C++

سورس ایستگاه اتوبوس با OpenGL به زبان C++

سورس پنکه سه بعدی با OpneGL به زبان C++

سورس قلعه با OpenGL به زبان C++