آموزش فارسی Angular

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

• ایجاد Components در Angular | بخش دوم

در این مقاله از آموزش فارسی انگولار، درباره کامپوننت های موجود در Angular و کاربرد آنها توضیح خواهیم داد قبل از شروع کار با Angular components، می توانید از طریق این لینک مروری بر اصول اولیه Angular داشته باشید.

Components

کامپوننت ها در انگولار

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

آموزش صفر تا صد Angular

• ایجاد Components در آنگولار| بخش دوم

در این مقاله از آموزش فارسی انگولار، درباره کامپوننت های موجود در Angular و کاربرد آنها توضیح خواهیم داد قبل از شروع کار با Angular components، می توانید از طریق این لینک مروری بر اصول اولیه Angular داشته باشید.

Components

کامپوننت ها در انگولار

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

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app. module.ts
• app-routing.module.ts

پرونده app-routing.module.ts یک استثناست. اگر کاربر Angular routing را در تنظیم پروژه انتخاب کند، پرونده ها ایجاد می شوند و به پوشه پرونده ها اضافه می شوند.
این پرونده ها همانطور که در بالا گفته شد، کامپوننت  پیش فرض را خواهند داشت. بیایید نگاهی به کاربردهای پوشه پرونده ها بیندازیم.

app.component.css: پرونده CSS برای اهداف یک UI طراحی شده.
app-cmp.component.html: ایجاد فایل html
app -cmp.component.spec.ts: این فایل برای unit testing استفاده می شود.

این مطلب را هم بخوانید: نوشتن Unit Test در #C

app -cmp.component.ts: در این فایل می توانیم module، properties را تعریف کنیم.

ایجاد یک کامپوننت جدید

• ایجاد Component در انگولار

ابتدا باید یک برنامه جدید Angular ایجاد کنیم. Angular CLI دستور ایجاد یک مؤلفه تعریف شده توسط کاربر را دارد. مؤلفه ای که به طور پیش فرض ایجاد شده است به عنوان parent شناخته می شود و مؤلفه های بعدی که توسط ما ایجاد می شوند ، کامپوننت های  child هستند. اکنون، یک برنامه جدید Angular و یک کامپوننت جدید child ایجاد خواهیم کرد. برای ایجاد یک برنامه جدید Angular ، می توان از دستور زیر استفاده کرد. 

ng new component

برای ایجاد یک child component می توانیم از دستور زیر استفاده کنیم:

ng g c child

دستور فوق برای ایجاد یک کامپوننت کودک استفاده می شود. می توانیم پرونده app.module.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 { ChildComponent } from './child/child.component';  
@NgModule({  
   declarations: [  
      AppComponent,  
      ChildComponent  
   ],  
   imports: [  
      BrowserModule,  
      AppRoutingModule  
   ],  
   providers: [],  
      bootstrap: [AppComponent]  
   })  
export class AppModule { }  

همانطور که می بینیم فایل app.component.html دارای کد HTML و متغیر در داخل براکت است.

<!--The content below is only a placeholder and can be replaced.-->  
<div style="text-align:center">  
    <h1>  
Welcome to {{ title }}!  
</h1>  
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">  
    </div>  
    <h2>Here are some links to help you start: </h2>  
    <ul>  
        <li>  
            <h2>  
                <a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a>  
            </h2>  
        </li>  
        <li>  
            <h2>  
                <a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a>  
            </h2>  
        </li>  
        <li>  
            <h2>  
                <a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a>  
            </h2>  
        </li>  
    </ul>  
    <router-outlet></router-outlet>  

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

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

اکنون، ما پروژه را کامپایل می کنیم و اجازه می دهیم که خروجی در مرورگر مشاهده شود. از دستور زیر در ترمینال استفاده کرده و خروجی موجود در مرورگر را مشاهده کنید.

ng s –o

اکنون می توانیم خروجی و اطلاعات ارائه شده در مؤلفه parent را مشاهده کنیم. اکنو ، اجازه دهید پرونده child.component.html را باز کنیم. ما می توانیم خطی از كد را مشاهده كنیم كه به صورت یک تگ می گوید ، کامپوننت child كار می كند.

در اینجا ، ما باید اجزای انتخاب کننده child را در داخل کامپوننت ریشه قرار دهیم تا محتوای کامپوننت child پس از مؤلفه parent نمایش داده شود، برای آنکه کامپوننت child انتخاب کننده همانند موارد ذکر شده در داخل جزء والدین گنجانده شده است که نشان می دهد که عنصر child اکنون کار می کند.

<!--The content below is only a placeholder and can be replaced.-->  
<div style="text-align:center">  
    <h1>  
Welcome to {{ title }}!  
</h1>  
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">  
    </div>  
    <h2>Here are some links to help you start: </h2>  
    <ul>  
        <li>  
            <h2>  
                <a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a>  
            </h2>  
        </li>  
        <li>  
            <h2>  
                <a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a>  
            </h2>  
        </li>  
        <li>  
            <h2>  
                <a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a>  
            </h2>  
        </li>  
    </ul>  
    <app-child></app-child>  
    <router-outlet></router-outlet>  

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

 اگر راجع به این مقاله نظری دارید، لطفاً نظر خود را عنوان کنید تا ما بتوانیم مقالات خود را از موضوعات بعدی بهبود بخشیم. با تشکر – مجموعه ABLY

منبع: c-sharpcorner