شروع به کار با AngularJS 2.0 و TypeScript - قسمت اول - نصب پیشنیازها
نویسنده: وحید نصیری
تاریخ: ۱۳۹۵/۰۲/۰۳ ۱۸:۳۰
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
عنوان:
نویسنده: وحید نصیری
تاریخ: ۱۳۹۵/۰۲/۰۳ ۱۸:۳۰
آدرس: www.dntips.ir
نویسنده: وحید نصیری
تاریخ: ۱۳۹۵/۰۲/۰۳ ۱۸:۳۰
آدرس: www.dntips.ir
AngularJS یک فریم ورک جاوا اسکریپتی، برای ساخت برنامههای تک صفحهای سمت کاربر، توسط HTML ،CSS و جاوا اسکریپت است. این فریم ورک، حاوی اجزایی برای data binding، طراحی ماژولار، کار با سرویسهای سمت سرور وب و امثال آن است. Angular 2 بازنویسی کامل نگارش 1 آن است و اهداف زیر را دنبال میکند:
- سرعت بالاتر بارگذاری و اجرای کدها
- استفاده از آخرین فناوریهای وب مانند ES 6 و وب کامپوننتها با پشتیبانی تا IE 9.
- سطح API آن با طراحی جدید آن، به شدت کاهش یافته و خلاصه شدهاست. همین امر یادگیری آنرا نیز سادهتر میکند.
برای یادگیری Angular 2 نیازی به فراگیری Angular 1 نیست. در اینجا با آشنایی با TypeScript، به این نتیجه خواهید رسید که برنامههای Angular 2 چیزی بیشتر از یک مثال عملی TypeScript نیستند. زبان TypeScript، زبان اول و توصیه شدهی کار با Angular 2 است و مزیت آن دسترسی به تمام قابلیتهای ES 6 است؛ با این تفاوت که کامپایلر TypeScript قادر است آنها را به ES 5 یا نگارش فعلی جاوا اسکریپت که توسط تمام مرورگرها پشتیبانی میشود، ترجمه و تبدیل کند. به این نحو به یک طراحی شیءگرا، مدرن و با قابلیت نگهداری بالا خواهید رسید که با تمام مرورگرهای جدید نیز سازگار است.
بنابراین پیشنیازهای اصلی کار با Angular 2، فراگیری ES 6 و TypeScript هستند که دو سری ویژه و مختص به آنها در سایت جاری تهیه شدهاند:
«مبانی ES 6»
«مبانی TypeScript»
در این قسمت قصد داریم پیشنیازهای دریافت و نصب اجزاء و وابستگیهای AngularJS 2 را به همراه TypeScript، در ویژوال استودیو 2015 بررسی کنیم. البته استفاده از ویژوال استودیو در اینجا ضروری نیست و اساسا AngularJS وابستگی به ویژوال استودیو ندارد. اگر به دنبال پشتیبانی بهتری از TypeScript هستید، VSCode رایگان، سورس باز و چند سکویی، گزینهی بسیار بهتری است نسبت به ویژوال استودیوی کامل. البته این مورد تعجبی هم ندارد؛ از این جهت که VSCode با TypeScript نوشته شدهاست.
اهمیت آشنایی با npm
اگر در طی سالهای اخیر با ویژوال استودیو کار کرده باشید، به طور قطع با NuGet نیز آشنا هستید. NuGet به عنوان یک package manager دات نتی شناخته میشود و کار آن دریافت وابستگیهای یک پروژه، از مخزنی مشخص و نصب و به روز رسانی خودکار آنها است. اما این روزها خارج از محیط توسعهی مایکروسافت، مدیرهای بستههای دیگری مانند Bower نیز برای نصب و به روز رسانی بستههای front end مانند کتابخانههای CSS ایی و جاوا اسکریپتی، بسیار رواج پیدا کردهاند. Bower یکی از ابزارهای NodeJS است که توسط NPM یا NodeJS Package Manager نصب میشود. به این معنا که استفاده از Bower به معنای استفاده از NPM است. پیش از این از NPM صرفا جهت نصب بستههای مرتبط با NodeJS استفاده میشد، اما در طی یکسال اخیر، استفاده از NPM نیز برای مدیریت بستههای front end رواج پیدا کردهاست و در صدر مدیر بستههای نصب کتابخانههای front end قرار دارد. همچنین در این حالت شما تنها نیاز به یک ابزار و یک فایل تنظیمات آن خواهید داشت، بجای استفاده از چندین ابزار و چندین فایل تنظیمات جداگانه. به علاوه این روزها انجام کارهای جدی جاوا اسکریپتی بدون دانش NPM دیگر میسر نیست. بهترین ابزارها، کامپایلرها، فشرده کنندههای front end و امثال آنها، تحت NodeJS اجرا میشوند. برای کار با AngularJS 2.0 و دریافت وابستگیهای آن نیز استفاده از npm، روش پیش فرض و توصیه شدهاست.
کار با npm جهت دریافت وابستگیهای کتابخانههای front end
برای کار با npm یا میتوان از دستورات خط فرمان آن به صورت مستقیم استفاده کرد و یا از امکانات یکپارچگی آن با ویژوال استودیو نیز بهره گرفت که ما در ادامه از این روش استفاده خواهیم کرد. البته توانمندیهای خط فرمان npm فراتر است از امکانات توکار VS.NET، اما در اینجا نیازی به آنها نیست و هدف صرفا دریافت و به روز رسانی وابستگیهای مرتبط است.
ویژوال استودیوی 2015 به همراه ابزارهای NodeJS ارائه میشود. اما مشکل اینجا است که این ابزارها هم اکنون قدیمی شدهاند و تطابقی با آخرین نگارش ابزارهای NodeJS ندارند. برای نمونه حین نصب وابستگیهای AngularJS 2.0 که یکی از آنها RxJS است، یک چنین خروجی را در پنجرهی output ویژوال استودیو مشاهده میکنید:
به این معنا که نگارشهای اخیر RxJS نیاز به npm با نگارشی بیشتر از 2 را دارند؛ اما نگارش npm پیش فرض ویژوال استودیو 1.4.9 است (البته باید دقت داشت که من به روز رسانی دوم VS 2015 را هم نصب کردهام). برای رهایی از این مشکل، تنها کافی است تا به ویژوال استودیو اعلام کنیم از نسخهی اصلی خط فرمان npm، بجای نسخهی پیش فرض خودش استفاده کند:
همانطور که در تصویر نیز ملاحظه میکنید، به مسیر Tools->Options->Projects and Solutions->External Web Tools مراجعه کرده و متغیر محیطی PATH ویندوز را به ابتدای لیست منتقل کنید. به این صورت ابزارهای به روز شدهی خط فرمان، مقدم خواهند شد بر ابزارهای قدیمی به همراه نگارش فعلی ویژوال استودیو.
البته فرض بر این است که آخرین نگارش nodejs را از آدرس https://nodejs.org/en دریافت و نصب کردهاید. با نصب آن، برنامه npm، در خط فرمان ویندوز به صورت مستقیم قابل استفاده خواهد بود؛ از این جهت که مسیر آن به PATH ویندوز اضافه شدهاست:
افزودن فایل project.json به پروژه
تا اینجا فرض بر این است که nodejs را از سایت آن دریافت و نصب کردهاید. همچنین متغیر PATH را در External Web Tools ویژوال استودیو به ابتدای لیست آن منتقل کردهاید تا همواره از آخرین نگارش npm نصب شدهی در سیستم، استفاده شود.
پس از آن همانند نیوگت که از فایل xml ایی به نام packages.config برای ثبت آخرین تغییرات خودش استفاده میکند، npm نیز از فایلی به نام package.json برای ذکر وابستگیهای مورد نیاز پروژه بهره میبرد. برای افزودن آن، از منوی Project گزینهی Add new item را انتخاب کرده و سپس npm را در آن جستجو کنید:
در اینجا نام پیش فرض package.json را پذیرفته و این فایل را به پروژه و ریشهی آن اضافه کنید.
اگر گزینهی فوق را در لیست Add new item مشاهده نمیکنید، مهم نیست. یک فایل متنی را به نام package.json به ریشهی پروژهی جاری اضافه کنید.
در ادامه محتوای این فایل را به نحو ذیل تغییر دهید:
این فایل تنظیمات، سبب بارگذاری خودکار وابستگیهای مورد نیاز AngularJS 2.0 در ویژوال استودیو میشود.
چند نکته:
- هر زمانیکه این فایل را ذخیره کنید، بلافاصله کار دریافت این بستهها از اینترنت آغاز خواهد شد. جزئیات آنرا میتوان در پنجرهی output ویژوال استودیو مشاهده کرد (و حتما اینکار را جهت دیباگ کار انجام دهید. بسیاری از مشکلات و خطاها، در اینجا لاگ میشوند). بنابراین اگر قصد دارید کار همگام سازی تغییرات را انجام دهید، فقط کافی است دکمههای ctrl+s یا save را بر روی این فایل اعمال کنید.
- کاری که دکمهی ctrl+s در این فایل انجام میدهد، اعمال خودکار دستور npm install بر روی پوشهای است که package.json در آن قرار دارد. بنابراین برای دریافت این بستهها، روش خط فرمان آن، ابتدا وارد شدن به ریشهی پروژهی جاری و سپس صدور دستور npm install است (که نیازی به آن نیست و ویژوال استودیو اینکار را به صورت خودکار انجام میدهد).
- بستههای دریافت شده، در پوشهای به نام node_modules در ریشهی پروژه ذخیره میشوند:
برای مشاهدهی آنها میتوان بر روی دکمهی show all files در solution explorer کلیک نمائید.
- درون فایل package.json، پشتیبانی کاملی از intellisense وجود دارد. برای مثال اگر علاقمند بودید تا آخرین نگارش AngularJS را مشاهده کنید، پس از خاصیت angular2 در تنظیمات فوق، " را تایپ کنید تا منوی تکمیل کنندهای ظاهر شود:
بدیهی است این منو جهت دریافت آخرین اطلاعات، نیاز به اتصال به اینترنت را دارد.
البته همیشه آخرین شماره نگارش AngularJS 2.0 را در این آدرس نیز میتوانید مشاهده کنید: CHANGELOG.md
- در این فایل شماره نگارش آغاز شدهای با ^ مانند "3.1.2^" به این معنا است که اجازهی نصب نگارشهای جدیدتری از 3.1.2 نیز داده شدهاست.
به روز رسانی کامپایلر TypeScript
نیاز است یکبار مطلب «مبانی TypeScript؛ تنظیمات TypeScript در ویژوال استودیو» را جهت آشنایی با نحوهی به روز رسانی اجزای مرتبط با TypeScript مطالعه کنید.
افزودن فایل tsconfig.json به پروژه
مرحلهی بعد شروع به کار با AngularJS و TypeScript، انجام تنظیمات کامپایلر TypeScript است. برای این منظور از منوی پروژه، گزینهی Add new item، عبارت typescript را جستجو کرده و در لیست ظاهر شده، گزینهی TypeScript JSON Configuration File را با نام پیش فرض آن انتخاب کنید:
اگر این گزینهی ویژه را در لیست add new items ندارید، مهم نیست. یک فایل متنی را به نام tsconfig.json به ریشهی پروژهی جاری اضافه کنید.
پس از افزودن فایل tsconfig.json به ریشهی سایت، تنظیمات آنرا به نحو ذیل تغییر دهید:
در مورد جزئیات این تنظیمات در سری «مبانی TypeScript» و «تنظیمات کامپایلر TypeScript» بیشتر بحث شدهاست. فایل ویژهی tsconfig.json تنظیمات پیش فرض ویژوال استودیو را جهت کار با TypeScript بازنویسی میکند. بنابراین زمانیکه از این فایل استفاده میشود، دیگر نیازی نیست به گزینهی مختلف پروژه، جهت تنظیم TypeScript مراجعه کرد.
برای نمونه خاصیت compileOnSave سبب خواهد شد تا پس از ذخیره سازی یک فایل ts، بلافاصله فایل js معادل آْن تولید شود. نوع ماژولها در اینجا به system.js تنظیم شدهاست و خروجی کدهای js آن از نوع ES 5 درنظر گرفته شدهاست. همچنین فعال سازی decorators نیز در اینجا صورت گرفتهاست. از این جهت که AngularJS2 استفادهی گستردهای را از این مفهوم، انجام میدهد.
در قسمت excludes به کامپایلر TypeScript اعلام شدهاست تا از یک سری از مسیرها مانند پوشهی node_modules که پیشتر آنرا تنظیم و دریافت کردیم، صرفنظر کند.
خلاصهی بحث
تا اینجا با نحوهی نصب پیشنیازهای AngularJS 2 و همچنین TypeScript آشنا شدیم. به صورت خلاصه:
- nmp اصلی را از سایت nodejs دریافت و نصب کنید.
- متغیر PATH را در ویژوال استودیو، به ابتدای لیست ابزارهای خارجی وب آن منتقل کنید تا از npm اصلی استفاده کند.
- فایل project.json را با محتوای ذکر شده، به ریشهی پروژه اضافه کنید. سپس یکبار آنرا save کنید تا وابستگیها را از اینترنت دریافت کند.
- اطمینان حاصل کنید که آخرین کامپایلر TypeScript را نصب کردهاید.
- فایل tsconfig.json را با محتوای ذکر شده، به ریشهی پروژه اضافه کنید.
- سرعت بالاتر بارگذاری و اجرای کدها
- استفاده از آخرین فناوریهای وب مانند ES 6 و وب کامپوننتها با پشتیبانی تا IE 9.
- سطح API آن با طراحی جدید آن، به شدت کاهش یافته و خلاصه شدهاست. همین امر یادگیری آنرا نیز سادهتر میکند.
برای یادگیری Angular 2 نیازی به فراگیری Angular 1 نیست. در اینجا با آشنایی با TypeScript، به این نتیجه خواهید رسید که برنامههای Angular 2 چیزی بیشتر از یک مثال عملی TypeScript نیستند. زبان TypeScript، زبان اول و توصیه شدهی کار با Angular 2 است و مزیت آن دسترسی به تمام قابلیتهای ES 6 است؛ با این تفاوت که کامپایلر TypeScript قادر است آنها را به ES 5 یا نگارش فعلی جاوا اسکریپت که توسط تمام مرورگرها پشتیبانی میشود، ترجمه و تبدیل کند. به این نحو به یک طراحی شیءگرا، مدرن و با قابلیت نگهداری بالا خواهید رسید که با تمام مرورگرهای جدید نیز سازگار است.
بنابراین پیشنیازهای اصلی کار با Angular 2، فراگیری ES 6 و TypeScript هستند که دو سری ویژه و مختص به آنها در سایت جاری تهیه شدهاند:
«مبانی ES 6»
«مبانی TypeScript»
در این قسمت قصد داریم پیشنیازهای دریافت و نصب اجزاء و وابستگیهای AngularJS 2 را به همراه TypeScript، در ویژوال استودیو 2015 بررسی کنیم. البته استفاده از ویژوال استودیو در اینجا ضروری نیست و اساسا AngularJS وابستگی به ویژوال استودیو ندارد. اگر به دنبال پشتیبانی بهتری از TypeScript هستید، VSCode رایگان، سورس باز و چند سکویی، گزینهی بسیار بهتری است نسبت به ویژوال استودیوی کامل. البته این مورد تعجبی هم ندارد؛ از این جهت که VSCode با TypeScript نوشته شدهاست.
اهمیت آشنایی با npm
اگر در طی سالهای اخیر با ویژوال استودیو کار کرده باشید، به طور قطع با NuGet نیز آشنا هستید. NuGet به عنوان یک package manager دات نتی شناخته میشود و کار آن دریافت وابستگیهای یک پروژه، از مخزنی مشخص و نصب و به روز رسانی خودکار آنها است. اما این روزها خارج از محیط توسعهی مایکروسافت، مدیرهای بستههای دیگری مانند Bower نیز برای نصب و به روز رسانی بستههای front end مانند کتابخانههای CSS ایی و جاوا اسکریپتی، بسیار رواج پیدا کردهاند. Bower یکی از ابزارهای NodeJS است که توسط NPM یا NodeJS Package Manager نصب میشود. به این معنا که استفاده از Bower به معنای استفاده از NPM است. پیش از این از NPM صرفا جهت نصب بستههای مرتبط با NodeJS استفاده میشد، اما در طی یکسال اخیر، استفاده از NPM نیز برای مدیریت بستههای front end رواج پیدا کردهاست و در صدر مدیر بستههای نصب کتابخانههای front end قرار دارد. همچنین در این حالت شما تنها نیاز به یک ابزار و یک فایل تنظیمات آن خواهید داشت، بجای استفاده از چندین ابزار و چندین فایل تنظیمات جداگانه. به علاوه این روزها انجام کارهای جدی جاوا اسکریپتی بدون دانش NPM دیگر میسر نیست. بهترین ابزارها، کامپایلرها، فشرده کنندههای front end و امثال آنها، تحت NodeJS اجرا میشوند. برای کار با AngularJS 2.0 و دریافت وابستگیهای آن نیز استفاده از npm، روش پیش فرض و توصیه شدهاست.
کار با npm جهت دریافت وابستگیهای کتابخانههای front end
برای کار با npm یا میتوان از دستورات خط فرمان آن به صورت مستقیم استفاده کرد و یا از امکانات یکپارچگی آن با ویژوال استودیو نیز بهره گرفت که ما در ادامه از این روش استفاده خواهیم کرد. البته توانمندیهای خط فرمان npm فراتر است از امکانات توکار VS.NET، اما در اینجا نیازی به آنها نیست و هدف صرفا دریافت و به روز رسانی وابستگیهای مرتبط است.
ویژوال استودیوی 2015 به همراه ابزارهای NodeJS ارائه میشود. اما مشکل اینجا است که این ابزارها هم اکنون قدیمی شدهاند و تطابقی با آخرین نگارش ابزارهای NodeJS ندارند. برای نمونه حین نصب وابستگیهای AngularJS 2.0 که یکی از آنها RxJS است، یک چنین خروجی را در پنجرهی output ویژوال استودیو مشاهده میکنید:
npm WARN engine rxjs@5.0.0-beta.6: wanted: {"npm":">=2.0.0"} (current: {"node":"v0.10.31","npm":"1.4.9"}) 
همانطور که در تصویر نیز ملاحظه میکنید، به مسیر Tools->Options->Projects and Solutions->External Web Tools مراجعه کرده و متغیر محیطی PATH ویندوز را به ابتدای لیست منتقل کنید. به این صورت ابزارهای به روز شدهی خط فرمان، مقدم خواهند شد بر ابزارهای قدیمی به همراه نگارش فعلی ویژوال استودیو.
البته فرض بر این است که آخرین نگارش nodejs را از آدرس https://nodejs.org/en دریافت و نصب کردهاید. با نصب آن، برنامه npm، در خط فرمان ویندوز به صورت مستقیم قابل استفاده خواهد بود؛ از این جهت که مسیر آن به PATH ویندوز اضافه شدهاست:
افزودن فایل project.json به پروژه
تا اینجا فرض بر این است که nodejs را از سایت آن دریافت و نصب کردهاید. همچنین متغیر PATH را در External Web Tools ویژوال استودیو به ابتدای لیست آن منتقل کردهاید تا همواره از آخرین نگارش npm نصب شدهی در سیستم، استفاده شود.
پس از آن همانند نیوگت که از فایل xml ایی به نام packages.config برای ثبت آخرین تغییرات خودش استفاده میکند، npm نیز از فایلی به نام package.json برای ذکر وابستگیهای مورد نیاز پروژه بهره میبرد. برای افزودن آن، از منوی Project گزینهی Add new item را انتخاب کرده و سپس npm را در آن جستجو کنید:
در اینجا نام پیش فرض package.json را پذیرفته و این فایل را به پروژه و ریشهی آن اضافه کنید.
اگر گزینهی فوق را در لیست Add new item مشاهده نمیکنید، مهم نیست. یک فایل متنی را به نام package.json به ریشهی پروژهی جاری اضافه کنید.
در ادامه محتوای این فایل را به نحو ذیل تغییر دهید:
{
"name": "asp-net-mvc5x-angular2x",
"version": "1.0.0",
"author": "DNT",
"description": "",
"scripts": {},
"license": "Apache-2.0",
"dependencies": {
"jquery": "2.2.3",
"angular2": "2.0.0-beta.15",
"systemjs": "^0.19.26",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "^0.6.12",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"typescript": "^1.8.9",
"typings": "^0.8.1"
},
"repository": {
}
} چند نکته:
- هر زمانیکه این فایل را ذخیره کنید، بلافاصله کار دریافت این بستهها از اینترنت آغاز خواهد شد. جزئیات آنرا میتوان در پنجرهی output ویژوال استودیو مشاهده کرد (و حتما اینکار را جهت دیباگ کار انجام دهید. بسیاری از مشکلات و خطاها، در اینجا لاگ میشوند). بنابراین اگر قصد دارید کار همگام سازی تغییرات را انجام دهید، فقط کافی است دکمههای ctrl+s یا save را بر روی این فایل اعمال کنید.
- کاری که دکمهی ctrl+s در این فایل انجام میدهد، اعمال خودکار دستور npm install بر روی پوشهای است که package.json در آن قرار دارد. بنابراین برای دریافت این بستهها، روش خط فرمان آن، ابتدا وارد شدن به ریشهی پروژهی جاری و سپس صدور دستور npm install است (که نیازی به آن نیست و ویژوال استودیو اینکار را به صورت خودکار انجام میدهد).
- بستههای دریافت شده، در پوشهای به نام node_modules در ریشهی پروژه ذخیره میشوند:
برای مشاهدهی آنها میتوان بر روی دکمهی show all files در solution explorer کلیک نمائید.
- درون فایل package.json، پشتیبانی کاملی از intellisense وجود دارد. برای مثال اگر علاقمند بودید تا آخرین نگارش AngularJS را مشاهده کنید، پس از خاصیت angular2 در تنظیمات فوق، " را تایپ کنید تا منوی تکمیل کنندهای ظاهر شود:
بدیهی است این منو جهت دریافت آخرین اطلاعات، نیاز به اتصال به اینترنت را دارد.
البته همیشه آخرین شماره نگارش AngularJS 2.0 را در این آدرس نیز میتوانید مشاهده کنید: CHANGELOG.md
- در این فایل شماره نگارش آغاز شدهای با ^ مانند "3.1.2^" به این معنا است که اجازهی نصب نگارشهای جدیدتری از 3.1.2 نیز داده شدهاست.
به روز رسانی کامپایلر TypeScript
نیاز است یکبار مطلب «مبانی TypeScript؛ تنظیمات TypeScript در ویژوال استودیو» را جهت آشنایی با نحوهی به روز رسانی اجزای مرتبط با TypeScript مطالعه کنید.
افزودن فایل tsconfig.json به پروژه
مرحلهی بعد شروع به کار با AngularJS و TypeScript، انجام تنظیمات کامپایلر TypeScript است. برای این منظور از منوی پروژه، گزینهی Add new item، عبارت typescript را جستجو کرده و در لیست ظاهر شده، گزینهی TypeScript JSON Configuration File را با نام پیش فرض آن انتخاب کنید:
اگر این گزینهی ویژه را در لیست add new items ندارید، مهم نیست. یک فایل متنی را به نام tsconfig.json به ریشهی پروژهی جاری اضافه کنید.
پس از افزودن فایل tsconfig.json به ریشهی سایت، تنظیمات آنرا به نحو ذیل تغییر دهید:
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"wwwroot",
"typings/main",
"typings/main.d.ts"
]
} برای نمونه خاصیت compileOnSave سبب خواهد شد تا پس از ذخیره سازی یک فایل ts، بلافاصله فایل js معادل آْن تولید شود. نوع ماژولها در اینجا به system.js تنظیم شدهاست و خروجی کدهای js آن از نوع ES 5 درنظر گرفته شدهاست. همچنین فعال سازی decorators نیز در اینجا صورت گرفتهاست. از این جهت که AngularJS2 استفادهی گستردهای را از این مفهوم، انجام میدهد.
در قسمت excludes به کامپایلر TypeScript اعلام شدهاست تا از یک سری از مسیرها مانند پوشهی node_modules که پیشتر آنرا تنظیم و دریافت کردیم، صرفنظر کند.
خلاصهی بحث
تا اینجا با نحوهی نصب پیشنیازهای AngularJS 2 و همچنین TypeScript آشنا شدیم. به صورت خلاصه:
- nmp اصلی را از سایت nodejs دریافت و نصب کنید.
- متغیر PATH را در ویژوال استودیو، به ابتدای لیست ابزارهای خارجی وب آن منتقل کنید تا از npm اصلی استفاده کند.
- فایل project.json را با محتوای ذکر شده، به ریشهی پروژه اضافه کنید. سپس یکبار آنرا save کنید تا وابستگیها را از اینترنت دریافت کند.
- اطمینان حاصل کنید که آخرین کامپایلر TypeScript را نصب کردهاید.
- فایل tsconfig.json را با محتوای ذکر شده، به ریشهی پروژه اضافه کنید.
مطالب مشابه
-
مطالبچرا TypeScript؟مطالبAngular CLI - قسمت اول - نصب و راه اندازیمطالبمبانی TypeScript؛ تنظیمات TypeScript در ویژوال استودیومطالباستفاده از کتابخانههای ثالث جاوا اسکریپتی در برنامههای AngularJS 2.0مطالبمراحل ارتقاء پروژههای Angular از نسخهی 6.0 به 7.0مطالبساخت کتابخانههای عمومی جاوا اسکریپتی توسط Angular CLIمطالبروش استفادهی از jQuery در برنامههای AngularJS 2.0مطالبارتقاء به Angular 6: بررسی تغییرات Angular CLIنظرات مطالبمبانی TypeScript؛ تنظیمات TypeScript در ویژوال استودیونظرات مطالبReact 16x - قسمت 1 - معرفی و شروع به کار
نظرات
- کیانی مقدم علیرضا در ۱۳۹۵/۰۲/۰۴ ۱۰:۵۳سلام و تشکر از شروع مبحث کاربردی آنگولار ؛ با توجه به تغییرات گسترده نسخه جدید آنگولار که حداقل تاثیر آن ؛ دلسرد شدن افراد به واسطه وقت هزینه شده برای یادگیری و تسلط ورژن قبلی بود به نظر شما احتمال اینچنین تغییراتی در نسخههای به روز آتی خواهد بود ؟
- وحید نصیری در ۱۳۹۵/۰۲/۰۴ ۱۱:۵۲- شاید Angular 2 بهترین نباشد یا نشود، اما این مهم نیست. عوامل زیادی در انتخاب یک فریم ورک مؤثر هستند:
- چه کسانی این فریم ورک را توسعه میدهند؟ گوگل. این مورد خیلی مهم است. در این بین شاید Aurelia مدرنتر به نظر برسد اما تیم آن سابقهی خوبی در نگهداری محصولات قبلی آن ندارد. برای مثال Durandal آنها به طور کامل رها شده و الان Aurelia را شروع کردهاند.
- تیم Angular اینقدر شجاعت داشته که اقرار کند نگارش 1 آن مشکلات زیادی دارد و دست به یک بازنویسی کامل زدهاند. باید دقت کرد که چقدر اینکار برای یک تیم محبوب در وب مشکل است و قطعا نگارش 2 آن که با این حجم بالای اعتراضات عدم سازگاری با نگارش 1 آن تولید شدهاست، بسیاری از مشکلات نگارش قبلی را ندارد. همچنین همین مساله سازگاری آنرا با نگارشهای بعد از 2 نیز تضمین خواهد کرد. چون اینبار دست به یک طراحی مجدد زدهاند و ... این طراحی مجدد خیلی برای آنها گران تمام شدهاست (خصوصا از لحاظ حجم انتقادهای رسیده). بنابراین در آینده در زمینه سازگاری با نگارشهای قبلی به شدت محتاط خواهند بود. این موردی است که استفاده کنندگان از ReactJS به زودی با آن مواجه خواهند شد.
- گروه کاربری مصرف کنندگان آن. چه تعداد مقاله، ویدیوی آموزشی، انجمن رفع اشکال و امثال اینها را در مورد یک محصول میتوانید پیدا کنید؟ قطعا AngularJS در این زمینه حرف اول را میزند.
- Angular 2 بر مبنای استاندارد web component طراحی شدهاست که در دراز مدت نیز سبب برد AngularJS 2 خواهد شد و نیاز کمتر به بازنویسیهای کلی.
- Angular 2 برای کار با محصولات موبایل بهینه سازی شدهاست و مانند بوت استرپ 3 یک فریم ورک mobile first است.
- استفادهی از Type Script به عنوان زبان اول این پلتفرم (البته استفادهی از آن اجباری نیست). این مساله در دراز مدت سبب تولید کدهایی با کیفیت بالاتر میشود. برای مثال الان ReactJS مخلوطی است از ES 5 و ES 6. اما AngularJS 2 تصمیم بهتری را اتخاذ کردهاست. همین مساله سبب شدهاست که توسعهی Type Script توسط مایکروسافت سرعت بیشتری پیدا کند.
- داشتن امکانات توکار بیشتری نسبت به رقبا. برای مثال ReactJS یک کتابخانه است؛ اما AngularJS 2 یک فریم ورک کامل که تمام کتابخانههای جانبی رقبا را یکجا از روز اول دارد.
بنابراین آیا پس از ارائهی نهایی Angular 2، ارزش یادگیری را دارد؟ بله؛ حتما. ابتدا (و هم اکنون) اعتراضهای شدیدی در مورد عدم سازگاری آن با نگارشهای قبلی وجود خواهد داشت و پس از مدتی همه آنرا فراموش کرده و خودشان را وفق میدهند.
- سحر قاسمی در ۱۳۹۵/۰۲/۰۴ ۱۶:۸با تشکر از آموزش خوبتون و اینکه با زبان ساده و روان توضیح دادید .توی مرحلهی سوم فکر میکنم "افزودن فایل package.json به پروژه " منظورتون بوده.درسته؟
- وحید نصیری در ۱۳۹۵/۰۲/۰۴ ۱۷:۳۹ممنون. بله. منظور package.json بوده.
- نصیری در ۱۳۹۵/۰۲/۰۴ ۱۶:۳۳با سلام و خسته نباشید و تشکر از بابت مطالب مفیدتانسوال بنده در مورد Angular اینه که آیا برای نوشتن سایتهای تجاری مفیده یا نه ،چند مورد که من بهش فکر کردم و جایی نتونستم ازش نتیجه بگیرم موارد زیره که اگه راهنمایی کنید برای ادامه آموزش بهتر1- ایا آوردن اطلاعات و محتویات سایت همراه اکشن درخواست صفحه بهتر نیست و باعث سرعت بیشتر سایت نمیشه؟(معمولا اطلاعات در ساختار فریمورک انگولا بعد از لود شدن همه htmlها و فایلهای js و با یک سرویس دریافت میشه "مثل لود کردن محتوی ایجکسی" که به نظرم به خاطر دو مرحله ای بودن کندی زیادی داره )2- آیا در Seo تاثیر داره ؟ محتوا و روتینگها همه با ایجکس انجام میشه و نمیدونم گوگل این چیزا روی میفهمه یا نهدر کل ممنون میشه که بدونم شما اگه بخواید یه سایت مثلا همین سایتتون را از اول بنویسید آیا از این فریمورک استفاده میکنید یانه
- وحید نصیری در ۱۳۹۵/۰۲/۰۴ ۱۷:۴۶- اتفاقا برعکس است. چون از سرور محتوای JSON را دریافت میکنید (Data)، حجم کمتری نسبت به HTML نهایی رندر شدهی در سمت سرور (HTML+Data) دارد.
- از سال 2014، گوگل شروع به پردازش جاوا اسکریپت موجود در صفحات وب هم کردهاست. بنابراین مشکلی با این نوع برنامهها ندارد.
- وحید نصیری در ۱۳۹۵/۰۲/۱۴ ۱۴:۲۱به روز رسانی: ارتقاء به نگارش «2.0.0rc.0 »
برای ارتقاء به نگارش RC0، این مراحل را باید طی کنید:
1) پیش از هر کاری، پوشهی node_modules قدیمی خود را حذف کنید (با تمام محتوای آن).
2) به روز رسانی فایل package.json به صورت ذیل:
به روز شدهی محتوای فوق، همیشه در آدرس مستندات npm packages موجود است.{ "name": "asp-net-mvc5x-angular2x", "version": "1.0.0", "author": "DNT", "description": "", "scripts": { "postinstall": "typings install" }, "license": "Apache-2.0", "dependencies": { "@angular/common": "^2.0.0-rc.0", "@angular/compiler": "^2.0.0-rc.0", "@angular/core": "^2.0.0-rc.0", "@angular/http": "2.0.0-rc.0", "@angular/router": "2.0.0-rc.0", "@angular/router-deprecated": "^2.0.0-rc.0", "@angular/platform-browser": "^2.0.0-rc.0", "@angular/platform-browser-dynamic": "^2.0.0-rc.0", "bootstrap": "^3.3.6", "es6-promise": "^3.1.2", "es6-shim": "^0.35.0", "jquery": "^2.2.3", "reflect-metadata": "^0.1.3", "rxjs": "^5.0.0-beta.6", "systemjs": "^0.19.27", "zone.js": "^0.6.12" }, "devDependencies": { "typescript": "^1.8.9", "typings": "^0.8.1" }, "repository": { } }
3) افزودن فایلی به نام typings.json در ریشهی پروژه؛ با این محتوا:
این فایل توسط قسمت «postinstall» اسکریپت package.json نصب میشود. اما چون مسیر https://raw.githubusercontent.com قابل دسترسی نیست (از این طرف البته!)، موفق به دریافت آن نخواهید شد. بنابراین یک پوشه را به نام typings به ریشهی سایت اضافه کنید و سپس فایل ذیل را به آن اضافه نمائید:{ "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd" } }
es6-shim.d.ts
بدون این فایل، کامپایلر TypeScript تعاریف ES 6 را مانند Map و Promise و امثال آن، نمیشناسد و پروژه را کامپایل نخواهد کرد.
اکنون یکبار فایل package.json را ذخیره کنید تا کار به روز رسانی بستهها انجام شود. البته اگر بر روی این فایل کلیک راست کنید، در منوی ظاهر شده، گزینهی restore packages هم موجود است.
4) پس از آن، چند تغییر جزئی ذیل باید در کدهای این سری، اعمال شوند:
هر جایی angular2 تعریف شده، اینبار میشود angular@. مثلا:
فایل مسیریابی آن قرار است تغییرات کلی داشته باشد. این مورد به صورت ذیل تغییر نام یافته است:import { PipeTransform, Pipe } from '@angular/core';
5) فایل main.ts (قسمت دوم) به صورت ذیل تغییر کردهاست:import { RouteParams, Router } from '@angular/router-deprecated';
6) تعاریف اسکریپتهای Index.html سایت، اینبار به نحو ذیل تغییر کردهاند:/// <reference path="../typings/es6-shim.d.ts" /> import { bootstrap } from '@angular/platform-browser-dynamic'; // Our main component import { AppComponent } from "./app.component"; bootstrap(AppComponent);
یک نکته: اگر میخواهید این تعاریف را در یک فایل razor، وارد کنید، چون @ به ابتدای پوشهی angular2 اضافه شده (node_modules\@angular)، مشکل پردازشی razor را ایجاد خواهد کرد و باید escape شود. به همین جهت بجای @ بهتر است معادل آن را یعنی ("@")Html.Raw@ وارد کنید.
سپس ابتدا فایل systemjs.config.js را از اینجا دریافت کنید.
در ادامه مداخل جدید را هم در فایل index.html مثال رسمی آغازین آن بررسی کنید.
بنابراین، فایل systemjs.config.js را به ریشهی سایت اضافه کنید (از این جهت که مسیر بستههای node_modules را از ریشهی سایت میخواند). سپس فایل Views\Shared\_Layout.cshtml را به نحو ذیل تغییر دهید:
<!DOCTYPE html> <html> <head> <base href="/"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> <link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/> <link href="~/app/app.component.css" rel="stylesheet"/> <link href="~/Content/Site.css" rel="stylesheet" type="text/css"/> <!-- 1. Load libraries --> <!-- IE required polyfills, in this exact order --> <script src="~/node_modules/es6-shim/es6-shim.min.js"></script> <script src="~/node_modules/zone.js/dist/zone.js"></script> <script src="~/node_modules/reflect-metadata/Reflect.js"></script> <script src="~/node_modules/systemjs/dist/system.src.js"></script> <script src="~/systemjs.config.js"></script> <!-- 2. Configure SystemJS --> <script> System.import('app/main').then(null, console.error.bind(console)); </script> </head> <body> <div> @RenderBody() <pm-app>Loading App...</pm-app> </div> @RenderSection("Scripts", required: false) </body> </html>
خلاصهی سریع این موارد
الف) تغییرات آخرین بستههای npm را از مستندات آن پیگیری و اعمال کنید. آخرین نگارش آن همیشه در اینجا قابل دسترسی است.
ب) تغییرات index.html، فایل main.ts و مداخل آغازین آنرا از مثال آغازین رسمی آن پیگیری و اعمال کنید.- وحید نصیری در ۱۳۹۵/۰۲/۱۵ ۱۱:۳۱یک تغییر دیگر هم در فایل tsconfig.json لازم است:
در اینجا بجای «system» از «commonjs» استفاده شدهاست.{ "compilerOptions": { "target": "es5", "module": "commonjs", - حسین حقیقیان در ۱۳۹۵/۰۲/۱۸ ۱۶:۲با تشکربا بروزرسانی به نسخه rc تعداد requestها به 600 تا میرسه!راهی برای bundle کردن وجود داره؟در نسخه جدید دیگر یک فایل مشابه angular2.dev.js ارائه نمیشود؟
- وحید نصیری در ۱۳۹۵/۰۲/۱۸ ۲۰:۴نیاز به یک Gulp Task دارد تا تمام فایلهای پروژه به همراه فایلهای AngularJS 2.0 یکی شوند؛ به همراه uglify و minify خودکار: «شروع به کار با AngularJS 2.0 و TypeScript - قسمت دوازدهم - توزیع برنامه»
- حسین حقیقیان در ۱۳۹۵/۰۷/۱۱ ۱۱:۲۵"اما چون مسیر https://raw.githubusercontent.com قابل دسترسی نیست (از این طرف البته!) "میتوان با ایجاد فایل typingsrc. در ریشه پروژه و استفاده از ف.ل.ت.ر ش.ک.ن فری گیت قادر به دریافت فایلهای typing شویم.به جای 8888 از پورتی که با فری گیت به آن متصل شده ایم، استفاده نماییم.
{ "proxy" : "localhost:8888/", "rejectUnauthorized" : false }
- وحید نصیری در ۱۳۹۵/۰۸/۰۳ ۱۰:۸
- وحید نصیری در ۱۳۹۵/۰۲/۲۳ ۱۴:۸یک نکتهی تکمیلی
اگر میخواهید تمام مراحل ذکر شده را فقط با دو دستور ساده به پایان برسانید:
الف) ابتدا وابستگیهای nodejs را نصب کنید.
ب) سپس angular-cli را نصب کنید (اجرای دستور عمومی ذیل در خط فرمان):
ج) در آخر یک برنامهی جدید را شروع کنید (ابتدا از طریق خط فرمان به پوشهی مدنظر وارد شده و سپس دستور ذیل را صادر کنید):npm install -g angular-cli
اجرای همین چند مرحله، برای تشکیل قالب استاندارد شروع به کار با AngularJS 2.0 کفایت میکنند.ng new AngularCLIDemoApp
- وحید نصیری در ۱۳۹۵/۰۳/۰۵ ۱۳:۵۱به روز رسانی
در آخرین تغییرات وابستگیهای AngularJS 2.0 این موارد لحاظ شدهاند:
الف) در فایل package.json بجای es6-promise و es6-shim، فقط از core-js استفاده شدهاست:
ب) فایل typings.json واقع در ریشهی پروژه، جهت ذکر core-js به صورت زیر تغییر یافته است:"dependencies": { // ... "core-js": "^2.4.0", // ... },
ج) اینبار ابتدای فایل main.ts به صورت زیر تغییر میکند:{ "ambientDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160317120654", "jasmine": "registry:dt/jasmine#2.2.0+20160505161446", "node": "registry:dt/node#4.0.0+20160509154515" } }
د) به علاوه محتوای فایلهای systemjs.config.js و index.html نیز تغییر یافتهاند./// <reference path="../typings/browser/ambient/core-js/index.d.ts" /> /// <reference path="../typings/browser/ambient/node/index.d.ts" />
یک نکته: اگر در پوشهی typings قدیمی شما هنوز فایلهای es6-shim موجود هستند، باید آنها را حذف کنید. چون تعاریف آن، با تعاریف core-js جدید، تداخل میکنند و خطای «error TS2300: Duplicate identifier» را دریافت خواهید کرد.
پوشهی typings جدید را از اینجا دریافت کنید: typings.zip - وحید نصیری در ۱۳۹۵/۰۳/۲۷ ۰:۵۶
- وحید نصیری در ۱۳۹۵/۰۴/۰۲ ۹:۳۰
- وحید نصیری در ۱۳۹۵/۰۴/۱۱ ۱:۳۹
- وحید نصیری در ۱۳۹۵/۰۵/۱۹ ۲۰:۲نگارش RC5 منتشر شد.
- جزئیات بیشتر
- تغییرات لازم جهت ارتقاء به RC5
+ راهنمای رسمی ارتقاء از RC4 به RC5
Angular 2 RC5 - NgModules, Lazy Loading and AoT compilation
RC5 represents our expected public API for our 2.0.0 release- وحید نصیری در ۱۳۹۵/۰۵/۲۳ ۱۴:۱۴جهت اطلاع
- پروژهی این سری به نگارش RC5 ارتقاء داده شد (با این تغییرات). نگارش RC5 مطابق مستندات رسمی، همان API نهایی است که در نگارش RTM شاهد آن خواهید بود.
- یک راهنمای خوب جهت ارتقاء از RC4 به RC5
- وحید نصیری در ۱۳۹۵/۰۶/۱۱ ۹:۲۰
- وحید نصیری در ۱۳۹۵/۰۶/۲۳ ۱۵:۲۹
- وحید نصیری در ۱۳۹۵/۰۶/۲۵ ۱۰:۱۲نگارش RTM منتشر شد.
- جزئیات بیشتر
- تغییرات لازم جهت ارتقاء به RTM
- پروژهی این سری هم به نگارش RTM ارتقاء داده شد - وحید نصیری در ۱۳۹۵/۰۷/۰۳ ۹:۵۲- بتای صفر نگارش 2.1 منتشر شد و همچنین 2.0.1 پایدار.
- شریفی محمد در ۱۳۹۵/۰۸/۲۶ ۱۳:۳۵ممنون از مطالبتون.
من با VS 2013 کار میکنم، در قسمت "افزودن فایل tsconfig.json به پروژه" در لیست ظاهر شده، گزینهی TypeScript JSON Configuration File برای من نمایش داده نمیشود مشکل کجاست؟- وحید نصیری در ۱۳۹۵/۰۸/۲۶ ۱۳:۴۲- نکات مطلب «مبانی TypeScript؛ تنظیمات TypeScript در ویژوال استودیو» را پیگیری کنید.
+ VS 2013 دیگر پشتیبانی جدیدی از TypeScript را نخواهد داشت و آخرین نگارشهای AngularJS 2.0 از TypeScript 2.0 استفاده میکنند که فقط برای VS 2015 ارائه شدهاست.
آخرین نگارشی که برای VS 2013 ارائه شده 1.8.5 است و آخرین نگارشی که برای VS 2015 ارائه شده 2.0.6 است.
- مینامهدوی در ۱۳۹۶/۰۱/۰۹ ۱۹:۴۶با سلامبنده از کد زیر در package.json استفاده نموده ام ولی با خطای زیر پروژه build نمیشود!؟
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})- وحید نصیری در ۱۳۹۶/۰۱/۰۹ ۱۹:۵۵- این خطا نیست، warning هست و صرفا به این معنا است که وابستگی Mac یاد شده در ویندوز وجود ندارد و مهم نیست (skip شده، صرفنظر شده).
- در کل یکبار node را به طور کامل از سیستم حذف کنید. آخرین نگارش اینها را دریافت و مجددا نصب کنید. همچنین نکتهی جایگزین کردن npm پیش فرض ویژوال استودیو را که در متن عنوان شد، فراموش نکنید.
- وحید نصیری در ۱۳۹۶/۰۲/۱۲ ۱۴:۲ساده شدهی این قسمت در اینجا: سری آموزشی Angular CLI
- رامین اسدی در ۱۳۹۶/۰۳/۱۵ ۲۳:۵۰اگر امکانش هست ساختار یه پروژه ASP .NET MVC با استفاده از angular CLI رو بذارید. منظورم اینه که اگر بخواهیم از این دو استفاده کنیم ساختار پروژه در حالت استاندارد به چه صورتی باید باشد.
- وحید نصیری در ۱۳۹۶/۰۳/۱۶ ۰:۷مطلب «یکپارچه سازی Angular CLI و ASP.NET Core در VS 2017» و نظرات آنرا مطالعه کنید.
- مهدی پایروند در ۱۳۹۶/۰۳/۱۸ ۱۶:۸
برای استفاده از Angular CLI در پروژه های MVC یا کلا استفاده از ویژوال استودیو باید اینو در نظر گرفت که دیگه کار IDE نگهداری فایلهای پروژه هست و حتی برای Run گرفتن از پروژه باید از کامندهای CLI استفاده کنید، من مثالی رو در گیت هاب دارم میتونید اونو بگیرید و بعد کامند لاین رو از روت پروژه باز کنید و کامندهای CLI رو برای دریافت ماجولهای Angular CLI و خروجی گرفتن اجرا کنید و کار توسعه رو ادامه بدید :
https://github.com/mehdipayervand/MVCSampleNG2
بعد از دریافت پروژه کامندهای زیر توی روت پروژه اجرا کنید:(کمی زمانبر هست تقزیبا 150 مگابایت)
npm install
ng build
و اگر خطایی مشاهده نکردید:
ng serve
حالا آدرس زیر رو توی مرورگرتون باز کنید و ادامه کارتون ...
http://localhost:4200/