(168 امتیاز از 34 رای)
Loading...
آموزش Angular 7
انگولار 7 متعلق به گوگل است و انتشار پایدار (Stable) آن در تاریخ 18 اکتبر 2018 انجام شد. در حال حاضر Angular 7 آخرین نسخه فریم ورک انگولار است.
در جدول زیر می توانید نسخه هایی که تا به الان از Angular منتشر شده است را مشاهده کنید.
| نسخه | تاریخ انتشار |
| Angular JS | October 2010 |
| Angular 2.0 | Sept 2016 |
| Angular 4.0 | March 2017 |
| Angular 5.0 | November 2017 |
| Angular 6.0 | May 2018 |
| Angular 7.0 | October 2018 |
همچنین در جدول زیر زمان انتشار دو نسخه بعدی انگولار را می توانید مشاهده کنید:
| نسخه | تاریخ انتشار |
| Angular 8.0 | March/April 2019 |
| Angular 9.0 | September/October 2019 |
گوگل قصد دارد تا نسخه اصلی انگولار را هر 6 ماه منتشر کند. نسخه هایی که تا کنون منتشر شده است backward compatible هستند و به راحتی می توانند با نسخه های جدید سازگار شوند.
در ادامه ویژگی های اضافه شده در انگولار 7 را بررسی خواهیم کرد.
به روز رسانی به انگولار 7
در صورتی از انگولار 5 یا انگولار 6 استفاده می کنید و قصد به روز رسانی آن به نسخه 7 را دارید می توانید از دستور زیر استفاده کنید:
1 | ng update @angular/cli @angular/core |
انگولار CLI
هنگام ساخت پروژه جدید انگولار CLI از شما در مورد برخی از ویژگی های پروژه (مانند مسیریابی و زبانی که برای استایل دهی استفاده می کنید) سوال می کند.
کارایی برنامه
در انگولار 7 یک بخش جدید به نام budget به فایل angular.json اضافه شده است. شما با استفاده از این ویژگی می توانید برای حجم برنامه یک محدود خاص تعیین کنید تا زمانی که حجم برنامه شما از حد تعیین شده عبور کرد به شما هشدار داده شود.
انگولار متریال و CDK
در انگولار 7، انگولار متریال و CDK نیز به روز رسانی شده اند و دو ویژگی جدید به CDK اضافه شده است که عبارت اند از اسکرول مجازی (virtual scrolling) و کشیدن و رها کردن ((drag and drop.
اسکرول مجازی (Virtual Scrolling)
این ویژگی عناصر DOM قابل مشاهده را به کاربر نمایش می دهد و همانطور که کاربر اسکرول می کند عناصر بعدی نمایش داده می شوند. این موضوع باعث می شود تا کل لیست بارگذاری نشود و سرعت برنامه افزایش یابد.
کشیدن و رها کردن (Drag and Drop)
با استفاده از این ویژگی می توانید ایتم های یک لیست را با ماوس جا به جا کنید. این ویژگی در نسخه جدید روان تر و سریع تر شده است.
شروع آموزش انگولار 7
قبل از شروع آموزش Angular 7 مطمئن شوید که بر روی محیط توسعه ای که از آن استفاده خواهید کرد، Node.js و npm (Node Package Manager) نصب شده باشد.
نکته! Angular به نسخه 8.x یا 10.x نود جی اس نیاز دارد. به منظور فهمیدن نسخه Node.js دستور node –v را در کنسول ویندوز یا ترمینال وارد کنید. همچنین برای دانلود Node.js به سایت Node.js مراجعه کنید.
نکته! Angular و برنامه های نوشته شده با آن به قابلیت ها و امکانات ارائه شده در کتابخانه های موجود در بسته های npm وابسته هستند. بنابراین برای دانلود نصب بسته های لازم نیاز ابتدا باید npm را نصب کنید. اگر Node.js را بر روی سیستم خود نصب کرده باشید، احتمالا سیستم مدیریت بسته npm نیز بر روی سیستم شما نصب شده است.
نصب Angular CLI
به منظور Angular CLI کنسول یا ترمینال را اجرا باز کرده و دستور زیر را در آن وارد کنید:
1 | npm install -g @angular/cli |
با اجرای دستور فوق Angular CLI به صورت سراسری نصب خواهد شد.
ایجاد فضای کاری (Workspace) و آماده سازی برنامه
منظور از Workspace، فولدری است که شامل فایل های مختلف مربوط به برنامه است. برای ایجاد پروژه جدید و آماده سازی برنامه از دستور زیر استفاده کنید:
1 | ng new my-app |
دستور ng new اطلاعاتی را در مورد ویژگی هایی که در هنگام ایجاد پروژه جدید به آن اضافه می شوند را از شما می خواهد. کلید enter را برای قبول حالت پیشفرض وارد کنید. Angular CLI بسته های و ویژگی هایی که به منظور ایجاد پروژه جدید لازم هستند را نصب خواهد کرد و این موضوع ممکن است چند دقیقه ای طول بکشد.
با اجرا شدن دستور فوق موارد زیر ایجاد خواهد شد:
- ایجاد یک فولدر root به عنوان فضای کاری با نامی که برای پروژه انتخاب کرده اید (مانند my-app)
- ایجاد اسکلت اولیه پروژه در داخل فولدر root
- ایجاد یک پروژه e2e به منظور تست پروژه
- ایجاد فایل های پیکربندی مربوطه
پروژه اولیه شامل یک برنامه خوش آمد گویی ساده برای اجرا است.
اجرای پروژه
خود Angular 7 سروری دارد که به شما این امکان را می دهد تا برنامه های خود را به صورت local اجرا کنید. برای استفاده از این سرور مراحل زیر را دنبال کنید:
- به فولدر workspace بروید (my-app).
- با استفاده از دستور ng serve و گزینه –open سرور را اجرا کنید.
1 2 | cd my-app ng serve --open |
دستور ng serve سرور را اجرا کرده و فایل های پروژه را بر اساس تغییراتی که شما بر روی آن ها اعمال کرده اید، آماده اجرا می کند. سپس گزینه –open یا به طور مختصرتر -o به صورت خودکار مرورگر پیش فرض را باز می کند و به آدرس http://localhost:4200 می رود.
اگر مراحل فوق را انجام داده باشید، بعد از اجرا برنامه همچین صفحه ای را مشاهده خواهید کرد:
ویرایش اولین Angular component
Component ها بلوک های اصلی یک برنامه Angular 7 هستند. آن ها داده های مختلف را بر روی صفحه نمایش می دهند، به ورودی کاربر گوش می دهند سپس بر اساس آن ورودی عمل می کنند.
به عنوان بخشی از برنامه اولیه، CLI اولین Angular component را به عنوان component ریشه (root) برای شما ایجاد کرده است.
- فایل ./src/app/app.component.ts را با ویرایشگر خود باز کنید.
- پراپرتی title را از “my-app”به “My First Angular App” تغییر دهید.
1 2 3 4 5 6 7 8 | @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'My First Angular App!'; } |
بعد از ذخیره تغییرات مرورگر به طور خودکار refresh خواهد شد.
- فایل ./src/app/app.component.css را با ویرایشگر باز کنید و style زیر را به آن اضافه کنید.
1 2 3 4 5 | h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } |
برنامه شما به شکل زیر تغییر می یابد:
کد کامل مثال
شما می توانید کد کامل پروژه ای که در این بخش ایجاده شد را از لینک زیر دانلود کنید (دانلود پروژه my-app).
توجه! اکثر بخش های این آموزش شامل کد کامل مثال ارائه شده هستند. همچنین می توانید کدهای موجود را با استفاده از http://www.stackblitz.com به صورت آنلاین اجرا کنید.
سلام وقت بخیر ببخشید ادامه آموزش انگولار ۷ رو کی میذارید؟ ممنون سایت خیلی خوبی دارید.
سلام فعلا در حال آماده سازی آموزش ReactJS هستیم. بعد از تمام شدن React ادامه انگولار 7 را آماده می کنیم.
واقعا خسته نباشید
سلام خوبه
سلام وقتتون بخیر آموزشتون عالی بود متشکر از اینکه این آموزش رو قرار دادید