یک برنامه نویس

ماه: جولای 2018

  • ارسال داده از کامپوننت به قالب در انگولار – Data Binding

    در ادامه پست های انگولار، امروز میخوام به انتقال مقادیر از logic به view بپردازم. یعنی میخام یه داده رو از کامپوننت به قالب بفرستم. برای این کار از دو روش string interpolation و property binding میتونیم استفاده کنیم که جداگانه در ادامه به اونها خواهم پرداخت.

    string interpolation در انگولار
    string interpolation در انگولار

    ارسال داده از class به template با استفاده از string interpolation در انگولار به این صورت هست که شما مقدار property موجود در کلاس رو میتونید بصورت رشته درون قالب نمایش بدید. مثلا اگه کلاس کامپوننت بصورت زیر تعریف شده باشه و my_name  یک پراپرتی از این کامپوننت باشه،

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  my_name = 'Hamid Haghdoost';
}

    شما میتونید مثلا بصورت زیر به این پراپرتی درون قالب دسترسی داشته باشید

    <p>my name is {{ my_name }}</p>

    که اگه ng serve کنید خروجی بصورت زیر خواهد بود

    my name is Hamid Haghdoost

    property binding در انگولار

    string interpolation در واقع نوع خاصی از property binding است که در آن نوع پراپرتی string است. یعنی شما نمیتونید مثلا مقدار boolean رو از این طریق به قالب ارسال کنید. برای این کار از property binding استفاده میکنیم. یعنی میتونیم مقدار پراپرتی رو به attribute های html و… بچسبونیم.

    one way binding در angular
    one way binding در انگولار

    برای اینکه بیشتر متوجه موضوع بشید با مثال پیش میریم.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  isDisabled: boolean = false;
}

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

    <button [disabled]="isDisabled">Try Me</button>

    توجه کنید که برای بایند کردن مقدار بولین نمیتونستیم بصورت زیر عمل کنیم و حتما باید از روش دوم استفاده کنیم

    <button disabled="{{ isDisabled }}">Try Me</button>

    امیدوارم حرفام به دردتون خورده باشه 🙂

  • کامپوننت ها در انگولار و نحوه ساخت آنها

    کامپوننت ها در انگولار و نحوه ساخت آنها

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

    کامپوننت ها بخش های تقریبا مستقل از هم هستند و میتونن با ارسال داده به همدیگه با هم تعامل داشته باشن که حالا در پست های بعدی در مورد نحوه این تعامل بیشتر صحبت خواهیم کرد. برنامه انگولار شما بصورت پیشفرض دارای یک کامپوننت به نام app هست که در ابتدای ران شدن برنامه این کامپوننت لود میشه که البته میتونید به انگولار بگید که کامپوننت دیگه ای رو لود کنه. با قرار دادن انتخابگر کامپوننت های دیگه توی این کامپوننت کامپوننت های دیگه توی این کامپوننت لود میشن.

    ساخت کامپوننت در angular

    برای ساخت اولین کامپوننت خودتون میتونید از cli کمک بگیرید و دستور زیر رو اجرا کنید.

    ng generate component MyFirstComponent

    با اجرای این دستور در دایرکتوری src/app یک دایرکتوری جدید با اسم my-first-component مربوط به این کامپوننت ساخته میشه که چهار تا فایل داخل اون وجود داره.

    شمای کلی یک کامپوننت در انگولار
    • my-first-component.component.css  : استایل های مربوط به کامپوننت درون این فایل نوشته میشه.
    • my-first-component.component.html  : قالب html کامپوننت هست
    • my-first-component.component.spec.ts  : فایل مربوط به تست برنامه هست که در ادامه بحث هامون بهش خواهیم پرداخت بیشتر
    • my-first-component.component.ts  : فایل اصلی کامپوننت که درون اون کلاس تایپ اسکریپت مربوطه نوشته میشه

    محتوای کلاس کامپوننت رو در زیر میبینید

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

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

  constructor() { }

  ngOnInit() {
  }

}

    خط ۳ تا ۷ مربوط یه decorator کلاس هست که اولا میگه این کلاس یک کلاس معمولی نیست و یک کامپوننته و ثانیا مشخص میکنه که تگ انتخاب کننده، آدرس قالب و استایل این کامپوننت چی هست. کلاس های تایپ اسکریپت مثل همه زبون ها میتونن property و method های خودشونو داشته باشن. مثلا شما با تعریف یک پراپرتی در کلاس میتونید توی قالب که همون فایل html بود بهش دسترسی داشته باشید.

    مثلا خط زیر رو توی کلاس بنویسید

    test = 'my test is here';

    و محتوای فایل my-first-component.component.html رو پاک کنید و این رو بنویسید {{ test }} . میبینید که این مقدار درون قالب نمایش داده میشه. البته به شرطی که سلکتور اونو توی فایل app.component.html قرار داده باشید.

    <app-my-first-component></app-my-first-component>

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

    موفق باشید 🙂

  • اولین برنامه با انگولار

    در نوشته قبلی در مورد انگولار و خوبی و بدی هاش صحبت کردیم. الان میخایم در واقع محیط برنامه نویسی انگولار رو برای این فریمورک آماده کنیم و شروع کنیم کار با این فریمورک رو.

    برای شروع کار با انگولار باید از ابزار خط فرمان انگولار استفاده کنید و برای نصب اون باید node روی سیستمتون نصب باشه. برای نصب node آخرین ورژن نود رو از لینک زیر دانلود کنید و نصب کنید : https://nodejs.org/en/download/

    شما با ابزار خط فرمان انگولار میتونید برنامه های انگولار رو توی محیط خط فرمان تولید کنید و مدیریت و بیلد کنید، کد زیر رو توی cmd یا terminal یا هر چیز دیگه ای تایپ کنید تا Angular Cli نصب بشه

    npm install -g @angular/cli

    الان شما ابزار لازم برای شروع کار با انگولار رو دارید. برای نصب انگولار دستور زیر رو ران کنید

    ng new my-app

    بعد از اتمام کار دستور انگولار برای شما نصب شده و میتونید کارتون رو انجام بدید. برای اینکه مطمئن بشید cd کنید توی دایرکتوری و دستور serve رو برای سرو شدن برنامه بزنید

    cd my-app
ng serve --open

    الان برنامه روی آدرس http://localhost:4200  در حال اجراست و میتونید با مرورگر بهش دسترسی پیدا کنید.

    حالا میتونید کامپوننت های خودتون رو ایجاد کرده و کارتون رو شروع کنید، بد نیست قبل از شروع کار با انگولار یه نگاهی به سینتکس typescript بندازید.

    برای شروع میتونید از ادیتور phpstorm یا webstorm استفاده کنید که یک ابزار خیلی قوی برای کار با انگولار داره…

    در روزهای بعد سعی میکنم مفاهیم پایه ای انگولار رو شروع کنم

    موفق باشید 🙂

  • شروع کار با فریمورک انگولار

    انگولار یه فریمورک خوب جاوا اسکریپت هست که برای ساختن برنامه های تک صفحه ای سمت کاربر استفاده میشه که شما میتونید کارهای خفن رو با تعداد خط کد خیلی کم نسبت به جاوااسکریپت معمولی انجام بدید . اگه میبینید یسری سایت ها مثل یوتیوب و… دارن بدون رفرش شدن لینک های جدید رو لود میکنن و کلی کارا توی یک صفحه، احتمالا یکی از این دو تا کار رو انجام میدن : یا از یه فریم ورک SPA استفاده میکنن یا همون Single Page Application و یا خودشون کلی کد javascript زدن که این جریان رو مدیریت میکنه. البته انگولار رو توسعه دهنده های گوگل توسعه دادن و قطعا توی کارای خودشونم ازش استفاده میکنن.

     

    چرا انگولار یاد بگیریم؟

    اگه تصمیم گرفتید که انگولار کار کنید و نمیدونید که کارتون درست هست یا نه! من چند تا دلیل میگم بهتون که مصمم تر از همیشه شروع کنید و یاد بگیرید و توی این حرف هام اصلا تاکیدی روی خوب بودن انگولار ندارم.

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

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

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

    و انگولار کلی چیزا رو بصورت پیشفرض داره و خیلی راحت میتونید ازشون استفاده کنید در حالی که تو فریمورک های دیگه باید اونارو پیاده کنید – البته این خوبی حساب نمیشه ولی برای کسی که داره تازه شروع میکنه این بهتره و شما خیلی سریع تر میتونید نسخه اولیه یه سیستم رو بالا بیارید باهاش نسبت به سایر فریمورک ها.

     

    منابع یادگیری انگولار

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

    نوشتن اولین برنامه با انگولار