آموزش اجزای سازنده در انگولار 7

3 سال پیش

امتیاز دهید post

آموزش اجزای سازنده در انگولار 7

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

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

ساختار فایل دارای جزء برنامه است و از فایل های زیر تشکیل شده است –

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

و اگر مسیریابی انگولار را در حین راه اندازی پروژه خود انتخاب کرده باشید، فایل های مربوط به مسیریابی نیز اضافه می شوند و فایل ها به شرح زیر هستند –

app-routing.module.ts

فایل های بالا به طور پیش فرض زمانی ایجاد می شوند که پروژه جدید را با استفاده از دستور angular-cli ایجاد کنیم.

اگر فایل app.module.ts را باز کنید، تعدادی کتابخانه دارد که وارد شده و همچنین یک دکلره است که به صورت زیر به appcomponent اختصاص داده می شود –

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

اعلان‌ها شامل متغیر AppComponent است که قبلاً آن را وارد کرده‌ایم. این جزء اصلی می شود.

اکنون angular-cli دستوری برای ایجاد کامپوننت خود دارد. با این حال، مؤلفه برنامه که به طور پیش فرض ایجاد می شود، همیشه به عنوان والد باقی می ماند و مؤلفه های بعدی ایجاد شده مؤلفه های فرزند را تشکیل می دهند.

اجازه دهید اکنون دستور ایجاد کامپوننت را با خط کد زیر اجرا کنیم

ng g component new-cmp

1	ng g component new-cmp

هنگامی که دستور بالا را در خط فرمان اجرا می کنید، خروجی زیر را دریافت خواهید کرد

C:\projectA7\angular7-app&gt;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:\projectA7\angular7-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)

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

فایل های زیر در پوشه new-cmp – ایجاد می شوند

new-cmp.component.css – فایل css برای جزء جدید ایجاد می شود.
new-cmp.component.html − فایل html ایجاد می شود.
new-cmp.component.spec.ts – این می تواند برای آزمایش واحد استفاده شود.
new-cmp.component.ts – در اینجا، ما می توانیم ماژول، ویژگی ها و غیره را تعریف کنیم.

تغییرات به شرح زیر به فایل 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() { }

}

اگر فایل new-cmp.component.ts بالا را مشاهده کردید، یک کلاس جدید به نام NewCmpComponent ایجاد می کند که OnInit را پیاده سازی می کند که در آن یک سازنده و متدی به نام ()ngOnInit وجود دارد. ngOnInit به طور پیش فرض زمانی که کلاس اجرا می شود فراخوانی می شود.

اجازه دهید بررسی کنیم که جریان چگونه کار می کند. اکنون کامپوننت برنامه که به طور پیش فرض ایجاد می شود به مولفه والد تبدیل می شود. هر مؤلفه ای که بعداً اضافه شود به مؤلفه فرزند تبدیل می شود.

وقتی در مرورگر “http://localhost:4200/” آدرس URL را می زنیم، ابتدا فایل index.html را اجرا می کند که در زیر نشان داده شده است –

&lt;html lang = "en"&gt;
 
   &lt;head&gt; 
      &lt;meta charset = "utf-8"&gt; 
      &lt;title&gt;Angular7App&lt;/title&gt; 
      &lt;base href = "/"&gt; 
      &lt;meta name = "viewport" content = "width = device-width, initial-scale = 1"&gt; 
      &lt;link rel = "icon" type = "image/x-icon" href = "favicon.ico"&gt; 
   &lt;/head&gt; 
   &lt;body&gt; 
      &lt;app-root&gt;&lt;/app-root&gt;
   &lt;/body&gt; 

&lt;/html&gt;

<head>

<title>Angular7App</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

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

&lt;app-root&gt;&lt;/app-root&gt;

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

این تگ ریشه است که توسط Angular به طور پیش فرض ایجاد شده است. این تگ دارای مرجع در فایل 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 =&gt; 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 از برنامه ماژول والد اصلی وارد می شود و به ماژول بوت استرپ نیز داده می شود که باعث بارگیری appmodule می شود.

اجازه دهید اکنون فایل 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';

}

هسته انگولار وارد می‌شود و به عنوان 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']

})

در مرجع اعلام کننده به انتخابگر، templateUrl و styleUrl آورده شده است. انتخابگر در اینجا چیزی نیست جز برچسبی که در فایل index.html که در بالا دیدیم قرار داده شده است.

کلاس AppComponent دارای متغیری به نام title است که در مرورگر نمایش داده می شود. @Component از templateUrl به نام app.component.html استفاده می کند که به شرح زیر است –

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

<h1> Welcome to {{ title }}! </h1>

</div>

فقط کد html و عنوان متغیر را در براکت های مجعد دارد. با مقدار موجود در فایل app.component.ts جایگزین می شود. به این کار الزام آور می گویند. در فصل بعدی به مفهوم الزام آور بودن خواهیم پرداخت.

اکنون که یک کامپوننت جدید به نام new-cmp ایجاد کرده ایم. هنگامی که فرمان برای ایجاد یک کامپوننت جدید اجرا می شود، همین مورد در فایل app.module.ts گنجانده می شود.

app.module.ts به مؤلفه جدید ایجاد شده اشاره دارد.

اجازه دهید اکنون فایل های جدید ایجاد شده در 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() { }

}

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

اعلام کننده دارای انتخابگر به نام app-new-cmp و templateUrl و styleUrl است.

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

&lt;p&gt; 
   new-cmp works!
&lt;/p&gt;

<p>

new-cmp works!

</p>

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

مرورگر صفحه زیر را نشان می دهد –

Screen

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

&lt;p&gt;
   new-cmp works!
&lt;p&gt;

<p>

new-cmp works!

<p>

اما ما در مرورگر همان را دریافت نمی کنیم. اکنون اجازه دهید تغییرات مورد نیاز برای نمایش محتویات اجزای جدید در مرورگر را ببینیم.

انتخابگر ‘app-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() { }

}

انتخابگر، یعنی app-new-cmp باید در app.component.html اضافه شود، یعنی والد اصلی به صورت پیش‌فرض به شرح زیر ایجاد شده است –

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

<h1>

Welcome to {{ title }}!

</h1>

</div>

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

هنگامی که تگ <app-new-cmp></app-new-cmp> اضافه می شود، تمام آنچه در فایل html وجود دارد، یعنی new-cmp.component.html کامپوننت جدید ایجاد شده در صفحه نمایش داده می شود. مرورگر به همراه داده های مؤلفه والد.

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 create” است.

متغیر فوق به صورت زیر در فایل new-cmp.component.html اضافه می شود

&lt;p&gt; 
   {{newcomponent}} 
&lt;/p&gt;
&lt;p&gt; 
   new-cmp works! 
&lt;/p&gt;

<p>

</p>

<p>

new-cmp works!

</p>

اکنون از آنجایی که انتخابگر <app-new-cmp></app-new-cmp> را در app.component.html که .html جزء والد است قرار داده ایم، محتوای موجود در new-cmp.component. فایل html روی مرورگر نمایش داده می شود. همچنین مقداری css برای کامپوننت جدید در فایل new-cmp.component.css به شرح زیر اضافه می کنیم –

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

p {

color: blue;

font-size: 25px;

}

بنابراین ما رنگ آبی و اندازه فونت را 25 پیکسل برای تگ های p اضافه کرده ایم.

صفحه زیر در مرورگر نمایش داده می شود –

Color Font
به همین ترتیب، می‌توانیم طبق نیاز خود، مؤلفه‌هایی ایجاد کرده و با استفاده از انتخابگر در فایل app.component.html، آن‌ها را پیوند دهیم.

منبع.

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

امتیاز دهید post

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

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

آموزش اجزای سازنده در انگولار 7

آموزش اجزای سازنده در انگولار 7

new-cmp.component.ts

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

دیدگاه شما

بدون دیدگاه

آموزش اجزای سازنده در انگولار 7

new-cmp.component.ts

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

دیدگاه شما

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

بدون دیدگاه