Component های Angular و آماده سازی پروژه - آموزش برنامه نويسی و طراحی سايت اكسپرت ماركت

آماده سازی پروژه Angular می تواند از پروژه ای به پروژه دیگر و از نسخه ای به نسخه دیگر متفاوت باشد و این مقاله به آن موضوع اختصاص دارد.

ایجاد قسمت سرور (قسمت NET Core Web API.) تنها نیمی از کاری است که می خواهیم انجام دهیم. از این مرحله به بعد، ما قصد داریم وارد بحث در سمت client برنامه شویم تا قسمت Web API را استفاده کرده و با استفاده از component های Angular و بسیاری از ویژگی های دیگر، نتایج را به کاربر نمایش دهیم.

اگر می خواهید تمام آموزشهای لازم و پایه مربوط به آموزش گام به گام Angular را ببینید ، لطفاً روی این لینک کلیک کنید: مقدمه آموزش گام به گام Angular.

نصب Angular CLI و شروع پروژه جدید

ابتدا، ما قصد داریم Angular CLI (Angular Command Line Interface) را نصب کنیم که به طور کلی، به ما در تهیه پروژه Angular و توسعه پروژه Angular کمک می کند.

برای نصب Angular CLI باید Command Prompt را باز کنیم (بهترین گزینه باز کردن آن این است که به عنوان administrator آن را باز کنید) و از دستور install استفاده کنیم:

npm install -g @angular/cli

1	npm install -g @angular/cli

اگر قبلا Angular CLI را نصب کرده اید، می توانید بررسی کنید که آیا آخرین نسخه را دارید یا خیر:

ng --version

1	ng --version

اگر آخرین نسخه (13 برای این مقاله) را ندارید، می توانید آن را uninstall کنید:

npm uninstall -g @angular/cli
npm cache clean --force

1 2	npm uninstall -g @angular/cli npm cache clean --force

و پس از آن، می توانیم از دستور install (که در بالا ذکر شد) برای نصب مجدد آن استفاده کنیم.

پس از اتمام نصب، می‌خواهیم یک پروژه جدید در همان پنجره فرمان ایجاد کنیم:

ng new AccountOwnerClient --strict false

1	ng new AccountOwnerClient --strict false

اینجا دو سوال پیش می آید. اولین سوال این است که آیا می‌خواهیم پروژه ما routing را ایجاد کند یا خیر، و سوال دوم این است که چه نوع سبک style دهی را در پروژه خود می‌خواهیم داشته باشیم. ما برای سوال اول بله (Y) را انتخاب کرده و برای سوال دوم (CSS – فقط کافیست اینتر را فشار دهید) را پاسخ می دهیم.

حال ایجاد پروژه کمی زمان خواهد برد.

پس از اتمام فرآیند ایجاد، می‌خواهیم پوشه پروژه را در editor خود باز کنیم. ما از Visual Studio Code استفاده خواهیم کرد.

کتابخانه های Third-Party به عنوان قسمتی از آماده سازی پروژه Angular

ما می خواهیم از کتابخانه ngx-bootstrap (angular bootstrap) برای دادن style استفاده کنیم، بنابراین اجازه دهید آن را با استفاده از پنجره ترمینال در VS Code نصب کنیم:

ng add ngx-bootstrap

1	ng add ngx-bootstrap

پس از شروع نصب، به ما اطلاع می دهد که در حال نصب بسته ngx-bootstrap@8.0.0 (در پروژه ما) هستیم و اینکه آیا مایلیم ادامه دهیم یا خیر. آن را تأیید کرده و نصب را تمام می کنیم.

با نصب این کتابخانه، ما در حال نصب هر دوی bootstrap و ngx-bootstrap هستیم و همچنین فایل های package.json، angular.json و app.module ما به روز نیز می شوند:

 ✅️ Added "bootstrap
 ✅️ Added "ngx-bootstrap
UPDATE package.json (1140 bytes)
UPDATE angular.json (3160 bytes)
UPDATE src/app/app.module.ts (502 bytes)

✅️ Added "bootstrap

✅️ Added "ngx-bootstrap

UPDATE package.json (1140 bytes)

UPDATE angular.json (3160 bytes)

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

در این مرحله، ما می توانیم برنامه خود را اجرا کنیم:

ng serve -o

1	ng serve -o

با این دستور، برنامه خود را اجرا می کنیم و همچنین آن را به صورت خودکار در یک مرورگر باز می کنیم (-0 flag).

اگر اکنون با خطا مواجه شدید (این ممکن است به دلیل نسخه جدید ngx-bootstrap رخ دهد)، تنها کاری که باید انجام دهید این است که فایل angular.json را باز کرده و آرایه style ها را تغییر دهید:

"styles": [
  "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

"styles": [

"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",

"./node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css"

]

ما باید مسیر ngx-bootstrap را تغییر دهیم زیرا به طور پیش فرض اشتباه است.

پس از این اصلاح، ما می توانیم برنامه خود را اجرا کنیم و پس از چند ثانیه، صفحه اولیه را مشاهده می کنیم:

مرحله بعدی، اضافه کردن component های ما به پروژه است.

ایجاد Component های Angular

اجازه دهید کمی در مورد Angular صحبت کنیم. Angular چارچوبی برای ساخت برنامه های SPA (Single Page Application) است. بنابراین، ما قصد داریم تمام صفحات خود را در یک صفحه تولید کنیم. به همین دلیل است که ما فقط صفحه index.html را در داخل پوشه src داریم. در فایل index.html، تمام محتوا در <app-root></app-root> selector که از فایل app.component.ts می آید، تولید می شود.

با این اوصاف، نگاهی به داخل فایل src/app/app.component.ts بیندازیم:

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

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

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

title = 'AccountOwnerClient';

}

هر component باید Component را از پکیج import @angular/core کند. ما در صورت نیاز چیزهای بیشتری import خواهیم کرد. همچنین باید به @Component decorator در داخل کد نیز توجه کنیم.

این جایی است که selector خود را ایجاد می کنیم (همان تگ app-root در فایل index.html است). علاوه بر این، ما HTML template این component را با templateUrl و فایل‌های CSS را با استفاده از styleUrls تنظیم میکنیم. StyleUrls آرایه ای از رشته ها است که با کاما از هم جدا میشوند.

در نهایت، ما کلاس exported را برای component داریم.

حالا بیایید نگاهی به فایل app.module.ts بیندازیم که برای آماده سازی پروژه Angular و اصلاً برای توسعه بسیار مهم است:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

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

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

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

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

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

BrowserAnimationsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

در این فایل قصد داریم module ها، component ها و service های لازم را import کنیم. ما از آرایه declarations برای import کردن component های خود و از آرایه imports برای import کردن module های خود استفاده می کنیم. همچنین، ما قصد داریم از آرایه providers برای ثبت service های خود استفاده کنیم.

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

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

ng g component home --skip-tests

1	ng g component home --skip-tests

با این دستور، کامپوننت Home را با سه فایل (ts, .html, .css) ایجاد می کنیم و فایل app.module را به روز می کنیم:

CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.ts (267 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (576 bytes)

CREATE src/app/home/home.component.html (19 bytes)

CREATE src/app/home/home.component.ts (267 bytes)

CREATE src/app/home/home.component.css (0 bytes)

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

همچنین با افزودن --skip-tests flag از ایجاد فایل تست جلوگیری می کنیم.

پس از ایجاد، می توانیم کامپوننت Home را بررسی کنیم:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

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

@Component({

selector: 'app-home',

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

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

})

export class HomeComponent implements OnInit {

constructor() { }

ngOnInit(): void {

}

در اینجا اینترفیس OnInit را import می کنیم که تابع ngOnInit را تعریف می کند. این تابع به محض اینکه component مقداردهی اولیه شود، هر logic را در داخل آن اجرا می کند.

ما می توانیم اینجا به constructor نیز دقت کنیم. constructor فقط برای تزریق service به component در نظر گرفته شده است. برای هر action که باید با مقداردهی اولیه component اجرا شود، باید از تابع ngOnInit استفاده کنیم.

در مورد App.Module

اگر فایل app.module.ts را بررسی کنیم، خواهیم دید که component جدید ما با دستور قبلی importe شده است:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './home/home.component';

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

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

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

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

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

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

import { HomeComponent } from './home/home.component';

@NgModule({

declarations: [

AppComponent,

HomeComponent

imports: [

BrowserModule,

AppRoutingModule,

BrowserAnimationsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

بنابراین، همانطور که می بینیم، Angular CLI همه اینها را برای ما ایجاد می کند.

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

چرا؟

زیرا به این صورت، نگهداری module ها راحت تر است و همچنین module های بیشتر، مزیت بارگذاری محتوای lazy را به ما می دهد. این بدان معناست که برنامه ما فقط محتوای مربوط به آن ماژول خاصی را که به آن اشاره می کنیم را load می کند و نه کل برنامه را.

محتوای اضافی در کامپوننت Home

اجازه دهید فایل home.component.ts را اصلاح کنیم:

export class HomeComponent implements OnInit {

  public homeText: string;

  constructor() { }

  ngOnInit(): void {
    this.homeText = "WELCOME TO ACCOUNT-OWNER APPLICATION";
  }
}

export class HomeComponent implements OnInit {

public homeText: string;

constructor() { }

ngOnInit(): void {

this.homeText = "WELCOME TO ACCOUNT-OWNER APPLICATION";

}

سپس یک کلاس جدید به فایل home.component.css اضافه میکنیم:

.homeText{ 
    font-size: 35px; 
    color: red; 
    text-align: center; 
    position: relative; 
    top:30px; 
    text-shadow: 2px 2px 2px gray; 
}

.homeText{

font-size: 35px;

color: red;

text-align: center;

position: relative;

top:30px;

text-shadow: 2px 2px 2px gray;

}

در ادامه، فایل home.component.html را تغییر می دهیم:

<p class="homeText">{{homeText}}</p>

1	<p class="homeText">{{homeText}}</p>

در نهایت، فایل app.component.html را با حذف تمام محتوا و اضافه کردن یک محتوای جدید، فقط برای آزمایش اینکه آیا این کار می کند یا خیر، تغییر میدهیم:

<div class="container">
  <div class="row">
      <div class="col">
        <app-home></app-home>
      </div>
  </div>
</div>

<app-home></app-home>

</div>

اکنون در ترمینال، دوباره ng serve -o را تایپ میکنیم و منتظر میمانیم تا برنامه کامپایل و اجرا شود. ما باید پیام welcome را از کامپوننت Home روی صفحه ببینیم.

نتیجه گیری

در حال حاضر ما یک کامپوننت فعال و یک برنامه Angular داریم که می توانیم در مرورگر خود اجرا کنیم. اما این تازه آغاز راه است. ما راه درازی در پیش داریم زیرا هنوز ویژگی های مهم Angular بسیاری برای معرفی در پروژه وجود دارد که باید به آن بپردازیم.

در قسمت بعدی این آموزش گام به گام، قصد داریم نحوه ایجاد navigation در پروژه و همچنین نحوه استفاده از routing را به شما نشان دهیم.

لغو پاسخ

سلام من تازه شروع کردم با لینوکس کار کردن و پروژه دات نت نوشتم و می خوام اون رو روی…

سلام آقای ابراهیمی عزیز همانطور که از عنوان مقاله مشخصه، این ویژگیها، ویژگیهای جدیدیه که از نسخه ۲۰۱۷ به بعد…

ممنون از توضیحاتتون همانطور که گفتم این یک cms است که بر اساس asp.net core ساخته شده که در خود…

سلام وقتتون بخیرباشه . ممنون از مقاله خوب و جذابتون . میخواستم بپرسم که چطوری اون نقطه های توی ویژیوال…

من فکر می کنم منظور ایشان فریم ورک وبی هست که با آن Elanat CMS ساخته شده. https://github.com/elanatframework/Code_behind یک سری…