برچسب: آموزش انگولار

  • نحوه ی استفاده از بوت استرپ در انگولار

    همونطور که انگولار یه فریمورک خوب برای جاوا اسکریپت حساب میشه، بوت استرپ ها یه فریمورک خوب و کار آمد هست که هم کار CSS و هم کار جاوا اسکریپت رو تا حدودی راحت کنه، ولی استفاده از ویژگی های JQuery در انگولار اصلا توصیه نمیشه، چون که انگولار کارایی که JQuery انجام میده رو به روش بهتر هندل میکنه پس ما تمام حرف هامون در رابطه با موارد CSS در بوت استرپ هست نه js. همچنین برای زیبایی کار fontawesome هم به کار خواهیم برد. برای نصب بوت استرپ و fontawesome از دستور زیر استفاده کنید:

    npm install bootstrap font-awesome

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

    @import "~bootstrap/dist/css/bootstrap.css";
    @import "~font-awesome/css/font-awesome.css";

    به همین راحتی تونستیم بوت استرپ و فونت آوسام رو به پروژه انگولارمون اضافه کنیم…

    ساخت طرح کلی برنامه انگولار با بوت استرپ

    خب حالا میخایم یه طرح کلی برای صفحه هامون در انگولار طراحی کنیم، یک ماژول بصورت زیر ایجاد میکنیم:

    ng generate module ui --module app.module

    بعد میتونیم کامپوننت هایی که لازم داریم رو اضافه کنیم، فرض کنید به سه کامپوننت هدر فوتر و دربرگیرنده نیاز داریم :

    ng generate component ui/layout
    ng generate component ui/header
    ng generate component ui/footer

    فایل src/app/ui/layout/layout.component.html رو به صورت زیر ادیت کنید که دو تا کامپوننت هدر و فوتر توی اون باشه:

    <app-header></app-header>
    <div class="container">
      <ng-content></ng-content>
    </div>
    <app-footer></app-footer>

    و ماژولی که ساختیم رو بصورت زیر اصلاح کنید:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { LayoutComponent } from './layout/layout.component';
    import { HeaderComponent } from './header/header.component';
    import { FooterComponent } from './footer/footer.component';
    
    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [LayoutComponent, HeaderComponent, FooterComponent],
      exports: [LayoutComponent]
    })
    export class UiModule { }

    حالا میتونید فایل src/app/app.component.html رو اصلاح کرده و در واقع قسمت اصلی که بدنه صفحه هست رو بهش اضافه کنید.

    <app-layout>
      <div class="jumbotron">
        <h1>Angular CLI v6 + Bootstrap & FontAwesome</h1>
        <p>
          In this tutorial you learn how to use Angular CLI v6 with Bootstrap and FontAwesome!
        </p>
      </div>
    </app-layout>

    و فایل src/app/ui/header/header.component.html رو بصورت زیر اصلاح کنید:

    <nav class="navbar navbar-dark bg-dark mb-5">
      <a class="navbar-brand" href="/">Angular & Bootstrap</a>
      <div class="navbar-expand mr-auto">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Home</a>
          <a class="nav-item nav-link" href="#">About</a>
          <a class="nav-item nav-link" href="#">Contact</a>
        </div>
      </div>
      <div class="navbar-expand ml-auto navbar-nav">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="https://github.com/tuytoosh" target="_blank">
            <i class="fa fa-github"></i>
          </a>
          <a class="nav-item nav-link" href="https://twitter.com/tuytoosh" target="_blank">
            <i class="fa fa-twitter"></i>
          </a>
        </div>
      </div>
    </nav>

    و نهایتا src/app/ui/header/header.component.html رو بصورت زیر اصلاح کنید:

    <nav class="navbar navbar-dark bg-dark mt-5 fixed-bottom">
      <div class="navbar-expand m-auto navbar-text">
        Made with <i class="fa fa-heart"></i> by <a href="http://haamid.ir">Hamid</a>
      </div>
    </nav>

    حالا اگه پروژه رو سرو کنید باید یچیزی مثل اسکرین شات بالا رو ببینید، موفق باشید

  • ارسال داده از کامپوننت به قالب در انگولار – 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>

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

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

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

     

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

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

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

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

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

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

     

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

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

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