آموزش Angular 7 (آنگولار ۷)

  • دوشنبه ۱۷ دی ۱۳۹۷
  • بازدید ۱,۸۷۴ نفر

angular 7 tutorial 5471 تصویر

آموزش Angular 7

انگولار ۷ متعلق به گوگل است و انتشار پایدار (Stable) آن در تاریخ ۱۸ اکتبر ۲۰۱۸ انجام شد. در حال حاضر Angular 7 آخرین نسخه فریم ورک انگولار است.

در جدول زیر می توانید نسخه هایی که تا به الان از Angular منتشر شده است را مشاهده کنید.

نسخهتاریخ انتشار
Angular JSOctober 2010
Angular 2.0Sept 2016
Angular 4.0March 2017
Angular 5.0November 2017
Angular 6.0May 2018
Angular 7.0October 2018

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

نسخهتاریخ انتشار
Angular 8.0March/April 2019
Angular 9.0September/October 2019

گوگل قصد دارد تا نسخه اصلی انگولار را هر ۶ ماه منتشر کند. نسخه هایی که تا کنون منتشر شده است backward compatible هستند و به راحتی می توانند با نسخه های جدید سازگار شوند.

در ادامه ویژگی های اضافه شده در انگولار ۷ را بررسی خواهیم کرد.

به روز رسانی به انگولار ۷

در صورتی از انگولار ۵ یا انگولار ۶ استفاده می کنید و قصد به روز رسانی آن به نسخه ۷ را دارید می توانید از دستور زیر استفاده کنید:

انگولار CLI

هنگام ساخت پروژه جدید انگولار CLI از شما در مورد برخی از ویژگی های پروژه (مانند مسیریابی و زبانی که برای استایل دهی استفاده می کنید) سوال می کند.

angular 7 tutorial 5471 4 تصویر

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

در انگولار ۷ یک بخش جدید به نام budget به فایل angular.json اضافه شده است. شما با استفاده از این ویژگی می توانید برای حجم برنامه یک محدود خاص تعیین کنید تا زمانی که حجم برنامه شما از حد تعیین شده عبور کرد به شما هشدار داده شود.

angular 7 tutorial 5471 5 تصویر

انگولار متریال و CDK

در انگولار ۷، انگولار متریال و CDK نیز به روز رسانی شده اند و دو ویژگی جدید به CDK اضافه شده است که عبارت اند از اسکرول مجازی (virtual scrolling) و کشیدن و رها کردن ((drag and drop.

اسکرول مجازی (Virtual Scrolling)

این ویژگی عناصر DOM قابل مشاهده را به کاربر نمایش می دهد و همانطور که کاربر اسکرول می کند عناصر بعدی نمایش داده می شوند. این موضوع باعث می شود تا کل لیست بارگذاری نشود و سرعت برنامه افزایش یابد.

کشیدن و رها کردن  (Drag and Drop)

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

شروع آموزش انگولار ۷

قبل از شروع آموزش Angular 7 مطمئن شوید که بر روی محیط توسعه ای که از آن استفاده خواهید کرد، Node.js و npm (Node Package Manager) نصب شده باشد.

نکته! Angular به نسخه ۸٫x یا ۱۰٫x نود جی اس نیاز دارد. به منظور فهمیدن نسخه Node.js دستور node –v را در کنسول ویندوز یا ترمینال وارد کنید. همچنین برای دانلود Node.js به سایت Node.js مراجعه کنید.

نکته! Angular و برنامه های نوشته شده با آن به قابلیت ها و امکانات ارائه شده در کتابخانه های موجود در بسته های npm وابسته هستند. بنابراین برای دانلود نصب بسته های لازم نیاز ابتدا باید npm را نصب کنید. اگر Node.js را بر روی سیستم خود نصب کرده باشید، احتمالا سیستم مدیریت بسته npm نیز بر روی سیستم شما نصب شده است.

نصب Angular CLI

به منظور Angular CLI کنسول یا ترمینال را اجرا باز کرده و دستور زیر را در آن وارد کنید:

با اجرای دستور فوق Angular CLI به صورت سراسری نصب خواهد شد.

ایجاد فضای کاری (Workspace) و آماده سازی برنامه

منظور از Workspace، فولدری است که شامل فایل های مختلف مربوط به برنامه است. برای ایجاد پروژه جدید و آماده سازی برنامه از دستور زیر استفاده کنید:

 دستور ng new اطلاعاتی را در مورد ویژگی هایی که در هنگام ایجاد پروژه جدید به آن اضافه می شوند را از شما می خواهد. کلید enter را برای قبول حالت پیشفرض وارد کنید. Angular CLI بسته های و ویژگی هایی که به منظور ایجاد پروژه جدید لازم هستند را نصب خواهد کرد و این موضوع ممکن است چند دقیقه ای طول بکشد.

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

  • ایجاد یک فولدر root به عنوان فضای کاری با نامی که برای پروژه انتخاب کرده اید (مانند my-app)
  • ایجاد اسکلت اولیه پروژه در داخل فولدر root
  • ایجاد یک پروژه e2e به منظور تست پروژه
  • ایجاد فایل های پیکربندی مربوطه

پروژه اولیه شامل یک برنامه خوش آمد گویی ساده برای اجرا است.

اجرای پروژه

خود Angular 7 سروری دارد که به شما این امکان را می دهد تا برنامه های خود را به صورت local اجرا کنید. برای استفاده از این سرور مراحل زیر را دنبال کنید:

  1. به فولدر workspace بروید (my-app).
  2. با استفاده از دستور ng serve و گزینه –open سرور را اجرا کنید.

دستور ng serve سرور را اجرا کرده و فایل های پروژه را بر اساس تغییراتی که شما بر روی آن ها اعمال کرده اید، آماده اجرا می کند. سپس گزینه –open یا به طور مختصرتر -o به صورت خودکار مرورگر پیش فرض را باز می کند و به آدرس http://localhost:4200 می رود.

اگر مراحل فوق را انجام داده باشید، بعد از اجرا برنامه همچین صفحه ای را مشاهده خواهید کرد:

angular 7 tutorial 5471 1 تصویر

ویرایش اولین Angular component

Component ها بلوک های اصلی یک برنامه Angular 7 هستند. آن ها داده های مختلف را بر روی صفحه نمایش می دهند، به ورودی کاربر گوش می دهند سپس بر اساس آن ورودی عمل می کنند.

به عنوان بخشی از برنامه اولیه، CLI اولین Angular component را به عنوان component ریشه (root) برای شما ایجاد کرده است.

  1. فایل ./src/app/app.component.ts را با ویرایشگر خود باز کنید.
  2. پراپرتی title را از “my-app”به “My First Angular App” تغییر دهید.

بعد از ذخیره تغییرات مرورگر به طور خودکار refresh خواهد شد.

  1. فایل ./src/app/app.component.css را با ویرایشگر باز کنید و style زیر را به آن اضافه کنید.

برنامه شما به شکل زیر تغییر می یابد:

angular 7 tutorial 5471 2 تصویر

کد کامل مثال

شما می توانید کد کامل پروژه ای که در این بخش ایجاده شد را از لینک زیر دانلود کنید (دانلود پروژه my-app).

توجه! اکثر بخش های این آموزش شامل کد کامل مثال ارائه شده هستند. همچنین می توانید کدهای موجود را با استفاده از http://www.stackblitz.com به صورت آنلاین اجرا کنید.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۴ مورد)
  1. تصویر آواتار کاربر 0
    رضا سه شنبه , ۷ اسفند

    سلام وقت بخیر ببخشید ادامه آموزش انگولار ۷ رو کی میذارید؟ ممنون سایت خیلی خوبی دارید.

    • تصویر آواتار کاربر 124
      AmRoسه شنبه , ۷ اسفند

      سلام فعلا در حال آماده سازی آموزش ReactJS هستیم. بعد از تمام شدن React ادامه انگولار 7 را آماده می کنیم.