یک نرم افزار ابتدایی todo list (یا همون فهرست انجام کارهای روزانه) به ما کمک می کنه که کارهای به انجام رسوندمونو (به لیستی) اضافه یا حذف کنیم. این ایده خیلی بنظر ساده می رسه ولی برای تازه کاران پلتفرم Angular ممکنه کمی چالش بر انگیز باشه.

بنابراین، امروز کمکتون می کنم که یک اپلیکیشن  todo list زیبا و خوشایند در Angular طراحی کنید.

مشخصه های این اپلیکیشن:

امکان اضافه کردن یک «کار» جدید

امکان حذف یک «کار»

امکان نشان کردن یک  «کار» به عنوان «انجام شده»

راه اندازی پروژه:

قبل از نوشتن هر پروزه ای نیاز داریم محیط غیر رسمی angular رو ایجاد کنیم و پکیج های مورد نیاز رو داخلش وارد کنیم.

با دنبال کردن این راهنما، Angular رو دانلود کنید: https://angular.io/guide/setup-local

با دنبال کردن دستورات زیر به ترتیب، یک پروژه انگولار جدید ایجاد کنید.

پکیج های npm  لازم رو نصب کنید.

همون طور که از اسمشون معلومه، سه تا پکیج اول برای اضافه کردن Material design و Material icons در پروژه هامونه. در حقیقت guid-typescript کمکمون می کنه که کد GUID رو راه اندازی کنیم.

1.     materialize-css

npm i materialize-css

1.     material-icons

npm i material-icons

1.     material-design-icons

npm i material-design-icons

1.     guid-typescript

 npm i guid-typescript

 حالا که پکیج رو نصب کردیم وقتشه که برای استفاده در پروژمون بهشون دسترسی بدیم. برای این کار، فایل /angular.json رو باز کنید.

در وهله ی اول، لازمه که مسیر دوتا فایل  CSS (یکی برای متریال آیکون ها و یکی برای متریال های دیگر) رو برای نسبت دادن به استایل ها اضافه کنیم.

کد Snippet قدیمی:

"styles": [
    "src/styles.css"
]

کد Snippet جدید:

"styles": [
    "node_modules/material-design-icons/iconfont/material-icons.css",
    "node_modules/materialize-css/dist/css/materialize.min.css",
    "src/styles.css"
]

متشابها، اتربیوت scripts رو پیدا کنید و با کدهای زیر جایگزین کنید. در اصل ما داریم یک فایل متن برنامه ی جاوا از پکیج Materialize رو اضافه می کنیم تا با  مواردی مثل انیمیشن به درستی کار کنه.

"scripts": [
    "node_modules/materialize-css/dist/js/materialize.min.js"
]

 کد قالب HTML  رو پاک کنید

 انگولار به طور اتوماتیک یک پیج مصنوعی HTML در هر پروژه ایجاد می کنه تا کمکمون کنه که هر وقت پروژه رو run  کردیم چیزی روی صفحه ی نمایش ببینیم. خیلی راحت فایل /todo-list-app/src/app/app.component.html رو باز کنید و محتویاتشو پاک کنید. این فایل رو پاک نکنید چون که ما کد اصلی  HTML  رو اینجا می نویسیم.

 مدل فرم هارو ایمپورت کنید

ما برای کار با «افزودن یک تسک جدید» که در ادامه خواهیم ساخت، مدل فرم های Angular رو لازم داریم. خب، پس بیاید با جایگزین کردن کد اسنیپت های قدیمی زیر، با کد اسنیپت های جدید  رو داخل فایل src/app/app.module.ts ، ایمپورت کنیم.

Old Code Snippet:-

imports: [
    BrowserModule
]

New Code Snippet:-

imports: [
    BrowserModule,
    FormsModule
]

در آخر فایل src/app/app.module.ts  شما چیزی مث این می شه:

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

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

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

یک مدل جدید بسازید

ما یک کلاسی نیاز داریم که ساختار اطلاعاتی  ای که اپلیکیشن todo listمون استفاده خواهد کرد رو تعریف کنیم. بهتربن جا (برای این کلاس) اینه که یک مدل ایجاد کنیم. بیاین این کار رو به وسیله ی ساختن یک فولدر جدید داخل فولدر  scr انجام بدیم و اسمشو بذاریم models. حالا اینجا یک فایل typescript به نام todo.model.ts اضافه کنیم.

مسیر فایل تازه ایجاد شدمون یه  چیزی شبیه این می شه:

 /src/models/todo.model.ts

حالا این فایلو باز کنید و کدهای زیر رو بهش اضافه کنید:

import { Guid } from "guid-typescript";

export class Todo{
constructor(
public id: Guid,
public title: string,
public isComplete: boolean
){  }
}

توضیح کد ها:

ما اول یک پکیج guid-typescript وارد کردیم. درواقع، این به ما اجازه می ده که یک ID خاص برای هر to-do list ایجاد کنیم. ما بعدا از این ID برای شناسایی موارد خاص و اجرای عملکردهایی مثل پاک کردن یک تسک یا نشان کردن یک تسک به عنوان «انجام شده» استفاده می کنیم.

در کلاس to do  ما از متد ()constructor برای تعریف کردن سه تا پراپرتی استفاده می کنیم:  id, title, و isComplete.

Id: یک تعیین کننده ی هویت برای هر آیتم to-do list

Title: نام تسکی که وارد می کنیم و داخل جای خالی می نویسیم.

isComplete: یک بولین true/false که ما رو از این که کار به انجام رسیده یا نه آگاه می کنه. 

یک منطق کاری برای Todo App بنویسید

حالا وقتشه که عملکرد اصلی اپلیکیشن todo مون رو بنویسیم. برای این کار، می ریم سراغ فایل /src/app/app.component.ts  و کدهای موجودشو با کدهای اسنیپت زیر جایگزین می کنیم.

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Guid } from "guid-typescript";
import { Todo } from "src/models/todo.model";

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

onSubmit(form: NgForm){
let todo = new Todo(Guid.create(), form.value.title, false);
this.todos.push(todo);
form.resetForm();
}

onComplete(id: Guid){
let todo = this.todos.filter(x=>x.id === id)[0];
todo.isComplete = true;
}

onDelete(id: Guid){
let todo = this.todos.filter(x=>x.id === id)[0];
let index = this.todos.indexOf(todo,0);
if(index > -1){
this.todos.splice(index,1);
}
}
}

توضیحات کد

اول پکیج هایی که برای اپلیکیشن todo به کار میگیریم رو ایمپورت می کنیم. 

Component : یک Decorator که کلاسی رو به عنوان یک کامپوننت انگولار تعریف می کنه.

NgForm: برای مدیریت تابع  فرم استفاده می شه.

Guid: برای هر تسک یک ID منحصر به فرد درست می کنه.

To-do: اون رو برای ساختن یک تسک جدید در لیست to-do بکار می گیریم.

در واقع component@ ما رو قادر می کنه که اجزا رو با نظم درست در کنار هم بچینیم.

حالا کلاس AppComponent اصلی یک پراپرتی و سه متد شخصی سازی شده رو در بر داره.

Todos: تمام تسک ها رو در to-do  لیست نگه می داریم. می تونه برای نمایش تسک ها روی صفحه استفاده بشه.

Onsubmit(): وقتی که کاربر لیست رو ارائه می ده، تسک جدید می سازه.

onComplete(): تسک رو به عنوان انجام شده نشان می کنه. در واقع ما لازمه فقط پراپرتی iscomplete یک تسک مشخص رو به یک بولین true/false تنظیم کنیم.

Ondelete(): یک تسک خاص رو بر اساس ID اون از صف todos حذف می کنه.

 رابط کاربر رو طراحی کنید

خب، ما اینجا به طراحی UI برای Angulat Todo App با استفاده از HTML5 و CSS3 می پردازیم. علاوه بر این ، بهتون به ترتیب تعدادی از ساختارهای دستوری Angular مثل ngIf* و ngFor* رو برای اجرای عملکردهای شرطی و حلقه رو از طریق مجموعه ای از تسک ها در todo list، نشون می دیم. 

همیشه، بیاین این کد رو داخل فایل  src/app/app.component.html بذاریم.

<div class="container">
  <h1>Angular Todo List App</h1>
  <hr>
  <form class="todo-form" #f="ngForm" (ngSubmit)="onSubmit(f)">
    <div class="row">
      <div class="input-field col s9">
        <input type="text" name="title" id="title" ngModel>
        <label for="title">Enter Task</label>
      </div>

</form>
<ul class="todo-list" *ngFor="let todo of todos">
<li *ngIf="!this.todo.isComplete">
<div>
<div>{{this.todo.title}}</div>
<div>
<button (click)="onComplete(this.todo.id)" class="btn-floating waves-effect waves-light green"><i class="material-icons">check</i></button>
</ul>

<div *ngIf="!todos?.length" class="msg">
Your Todo List is Empty!
</div>

<hr>
<br>

<h1 id="completed-tasks">Completed Tasks</h1>
<hr>
<ul class="todo-list" *ngFor="let todo of todos">
<li *ngIf="this.todo.isComplete">
<div>
<div>{{this.todo.title}}</div>
<div>
<button (click)="onDelete(this.todo.id)" class="btn-floating waves-effect waves-light red"><i class="material-icons">delete</i></button>
</div>
</div>
</li>
</ul>
</div>

توضیح کد:

 عموما، UI ما به سه قسمت تقسیم می شه.

1-    فرمی برای ایجاد یک تسک جدید

2-    لیست تسک های انجام نشده

3-    لیست تسک های انجام شده

 ما با استفاده از (ngSubmit)=”onSUBMIT(f)" یک رخداد onsubmit رو به فرم ضمیمه می کنیم. بنابراین، هر وقت که کاربر نام تسک رو در جای خالی وارد کنه و دکمه ی ADD رو بزنه، (اون تسک) مورد تایید Appcontroller می رسه. پس متد onSubmit( )که قبل تر در AppComponent توضیح دادیم، یک تسک جدید رو در صف todos می گنجونه.

سپس از ساختار دستوری *ngFor برای دسترسی به هر تسک در todoes ، یکی پس از دیگری، استفاده می کنیم. بعد از اون با استفاده از *ngIf چک می کنیم که آیا اون تسک مورد نظر انجام شده یا نه. اگر انجام نشده بود، اون رو در اول لیست، به ترتیب با دو دکمه ی «complete task (با علامت چک مارک)» و «delete task (با علامت سطل زباله) نشون می دیم.

بعد از اون، یک دستور ngIf* رو برای اینکه چک کنیم آیا todo list خالی هست یا نه قرار می دیم. اگر خالی بود، یک پیامی مثل« todo list  کارهای شما خالی است» نشون می دیم. هر دوی دکمه ها به رویداد onclick گوش میدن و به ترتیب توسط متدهای onComplete و onDelete از AppComponent کنترل می شوند.

بعد از اون دستورالعمل ngIf* دیگری را قرار دادیم تا بررسی کنیم ببینیم آیا todo list خالی است یا نه. اگر خالی است پیامی مثل "todo list شما خالی است" میده.

کد ما تقریبا همون کد لیست کارهای تمام شدست! اما این دفعه برای چک کردن this .todo.isComplete! ما از this.todo.isComplete استفاده میکنیم. همچنین، اینجا دیگه به دکمه ی « complete task ( علات چک مارک)» نیاز نداریم. بنابراین به سادگی پاکش می کنیم.

خب! بیاین یک رنگ پس زمینه ی خوب به بدنه ی صفحه ی HTML مون بدیم. از اونجایی که این یک استایل و سبک جهانیه، بهترین جا برای وارد کردن کد ، داخل فایل  /src/styles.css هست.

/* You can add global styles to this file, and also import other style files */
body
{
    width: 100%;
    height: 100vh;
    padding: 10px;
    background-color: #18387a;
}

استایل دهی فرم و to-do list مون داخل فایل  src/app/app.component.css قرار خواهد گرفت.

.container
{
    width: 600px;
    margin: 0 auto;
    background-color: #fff;
    text-align: center;
    padding: 20px 50px;
    border-radius: 5px;
}

.container h1
{
font-size: 40px;
margin: 0;
}

.inline-icon
{
vertical-align: bottom;
font-size: 18px !important;
}

.todo-list li
{
margin-top: 5px;
border: 1px solid #bbb;
padding: 5px 10px;
}

.todo-list li div
{
display: flex;
flex-direction: row;
justify-content: space-between;
}

.todo-list button
{
margin-left: 5px;
}

.msg
{
color: #bbb;
margin-bottom: 20px;
}

#completed-tasks
{
color: #4caf50;
}

اجرای Todo App

ng serve -o

به صورت پیش فرض، پروژه های لوکال در پورت 4200 باز می شوند.

جمع بندی 

 حالا می دونی که چطور یک اپلیکیشن todo رو در انگولار بسازی. مطمئنم که مقدار بیشتری با Angular و اینکه چطور ما میتونیم ازش در اپلیکیشن های واقعی استفاده بکنیم آشنا شدی.

در حالی که داشتی مطالب رو دنبال می کردی، مفاهیمی رو مثل جملات شرطی، حلقه ها، دنباله ها و ... یاد گرفتی. به همین ترتیب داخل کدHTML هم کمی تجربه ی کار با فرم HTML و چگونگی اداره ی ورودی های اون رو از طریق رویدادها کسب کردی.