معرفی
در این پست با کانتینر و ارتباط اجزای ارائه در انگولار با نمونه پروژه ها آشنا می شویم. برای درک اجزای Container و Presentation، لطفاً به پست زیر مراجعه کنید.
اضافه کردن ماژول ها و کامپوننت ها
پیش نیازها
- کد ویژوال استودیو
- Node JS و NPM
- زاویه ای 8 یا بالاتر
- CLI زاویه ای
ما باید ماژول ها و کامپوننت های زیر را ایجاد کنیم. به مسیر اصلی پروژه بروید و دستورات زیر را در Angular CLI اجرا کنید.
- ng g m employee
- ng g c employee
- ng g c employee/employee-list
- ng g c employee/employee-detail
دستور بالا ماژول و کامپوننت "Employee" را ایجاد می کند. همچنین مؤلفههای «فهرست کارکنان» و «جزئیات کارمند» را ایجاد میکند.
یک مدل رابط ایجاد کنید
ما باید یک مدل رابط "کارمند" ایجاد کنیم تا بتوانیم از این مدل در قطعات و خدمات خود استفاده کنیم.
- export interface Employee {
- id: number;
- name: string;
- email: string;
- }
یک سرویس داده ایجاد کنید
ما یک سرویس "EmployeeData" ایجاد می کنیم که از آن در کامپوننت ها استفاده می کنیم و دستور زیر را برای ایجاد سرویس داده اجرا می کنیم.
- ng g s core/services/employeedata
کد زیر را در سرویس "EmployeeData" اضافه کنید. ما مقادیر سخت کد شده را برای داده های کارمندان اضافه کرده ایم و بعداً برای خواندن آن از سرویس دیگری تغییر خواهیم کرد. همچنین، من روش "getEmployees" را برای برگرداندن داده ها اضافه کردم.