در بخش قبلی با معماری AngularJS2 در حد تئوری و ضمنی آشنا شدیم و در بخشهای قبلتر از آن دیدیم چگونه میشود از AngularJS در Visual Studio استفاده کرد ، ولی نکته اینجاست که کار با AngularJS 2 در Visual Studio.NET 2015 آن هم با ASP.NET Core 1 اندکی متفاوت تر از چیزی است که تا به اینجا دیده اید .
بسمه تعالی
قسمت ششم
موضوع : سوار کردن و چگونگی تنظیمات AngularJS2 در محیط Visual Studio 2015 و یک پروژه ASP.NET Core1
در بخش قبلی با معماری AngularJS2 در حد تئوری و ضمنی آشنا شدیم و در بخشهای قبلتر از آن دیدیم چگونه میشود از AngularJS در Visual Studio استفاده کرد ، ولی نکته اینجاست که کار با AngularJS 2 در Visual Studio.NET 2015 آن هم با ASP.NET Core 1 اندکی متفاوت تر از چیزی است که تا به اینجا دیده اید . یکی از نکان Sync کردن همه فایلها و آماده کردن محیط Visual Studio و بعد از آماده نمودن یک ASP.NET Project برای کار با AngularJs 2 می باشد . اگر مبینید من از عبارت AngularJS 2 مرطب استفاده میکنم و به تنهایی نمی نویسم AngularJS به این دلیل است که است که در ورژن 2 حتی سوار کردن Script ها و فایلهای Reference و ... هم کمی دردسر ساز است و اکر بخواهید بدون مثلن مطالعه مقاله ای مثل این پیش بروید ، شاید 1 هفته شما را درگیر و گرفتار کند . خوب امیدوارم دیگر یک VS.NET 2015 نصب و آماده شد ه و برای مراحل بعدی یک SQL Server هم داشته باشید ، البته به این زودیها شاید به SQL نیاز پیدا نکنیم .
خوب برویم و مراحل را یکی یکی شروع کنیم .
1- اگر برای کار در هر محیطی قصد دارید به سراغ AngularJS بروید ، اول از همه NodeJS را نصب کنید . برای این کار به سایت NODEJS.ORG بروید و آنرا دانلود و بر روی سیستم خود نصب کنید . یکی از نکات زیبا این است که به زودی میتوانید VS.NET را روی Mac یا Linux نصب کنید و از آن استفاده کنید و اینجاست که کم کم داریم با یک زبان با همه برنامه نویسها صحبت میکنیم .
فعلا هدف کار با VS.NET در Windows است ولی اگر در محیط دیگری هم باشید ، روال کار بجز قسمت VS.NET همین است .
https://nodejs.org/dist/v4.2.6/node-v4.2.6-x86.msi
این از NodeJS . لینک بالا را دانلود و NodeJS را نصب کنید .
2- نصب پکیج Phyton
https://www.python.org/ftp/python/2.7.11/python-2.7.11.msi
خوب اگر هر 2 به درستی نصب شد ، برویم بر سر الحاق یا Update بسته Npm
داخل Command Prompt بروید و این عبارت را وارد و Enter بزنید .
npm install npm –g
تا 2 دقیقه هم ممکن است طول بکشد و بعد پیغام بدهد .
حالا ورژن Npm را با این دستور درون Command Prompt چک کنید
npm –v
دقت کنید که ورژن آنرا باید بالاتر از 3.X.X به شما نشان دهد .
نکته : NPM یعنی Node Package Manager
بدون اینکه پروزه ای چیزی بسازید وارد VS.NET بشوید و مطابق تصویر مسیر NodeJS را برای آن تعریف کنید .
خط اول را دقت کنید در سمت راست . Nodejs را در سیستم خود پیدا کنید (در 99درصد اوقات در Program Files است) و به همین صورت که اینجا میبینید آنرا Add کنید .
برای TypeScript هم در Command Prompt وارد کنید
Npm install –g Typescript
و منتظر بمانید تا این هم به طور کامل نصب شود .
حالا باز درون Visual Studio مشابه تصویر زیر عمل کنید .
درون فیلتر کلمه Typescr را وارد کنید و بعد روی Tab مشابه تصویر General رفته و وضعیت را مشابه تصویر قرار دهید .
خوب الان دیگر وقت آن است که یک پروژه جدید بسازیم .
مشابه تصویر زیر یک پروژه از نوع WebApi بسازید تا بعدن بتوانیم بعد از سوار کردن همه یک سرویس هم برای اتصال داشته باشیم و از آن استفاده کنیم. من اسم پروژه را AngularJS2Webapi گذاشتم و پروژه را ساختم.
فایل Project_Readme.html را هم حذف میکنم .درون فولدر Controller رفته یک Controller جدید به اسم HelloController بسازید . محتوای این کنترلر را مشابه زیر قرار دهید
خوب همین الان هم میتوانید با Run کردن پروژه ، از صحت کارکرد این Api اطمینان حاصل کنید .
با وارد کردن
http://localhost:12323/api/hello
به نتیجه زیر خواهیم رسید .
{"message":"11:59:34 - Hello , server-side speaking!"}
اگر پارامتر وارد کنید هم میتوانید آنرا در نتیجه این Api ببینید . مثلن
http://localhost:12323/api/hello?name=www.iliasoft.ir
و در نتیجه آن عبارت
{"message":"12:01:21 - Hello www.iliasoft.ir, server-side speaking!"}
مشاهده خواهد شد .
حالا برای تنظیمات TypeScript یک فایل به نام tsconfig.json در Root پروژه بسازید و تنظیمات زیر را درون آن وارد کنید .
حال وقت آن است که فایل Package.Json را هم دستکاری کنیم. به شکل زیر تنظیمات را قرار دهید .
خوب حالا با اجرای پروژه ، همه Dependency های لازم را خود پروژه دریافت کرده و آماده خواهد کرد .
برای ایجاد یک bundle در Dependency ها یک فایل gulpfile.js را هم به Root پروژه افزوده و محتوای زیر را در آن قرار دهید .
وب الان همه چیز آماده شد هر چند شاید در طول کار و ایجاد پروژه مجبور شویم اندکی این تنظیمات را دستکاری کنیم. حال کم کم باید قسمتهای مختلف را شرح داده و آرام آرام پروژه نویسی را آغاز کنیم .
نکته : وحشت نکنید . این تنظیمات زیاد سخت نیست و به زودی به همه چیز مسلط خواهید شد . AngularJS2 واقعن در ابتدا مبهم است ، ولی مبحث عجیبی نیست. اگر 1 هفته با آن کار کنید و به آن عادت کنید ، کلیه مشکلات حل خواهد شد .
جهت تسهیل امور ، این چند فایل را برای دانلود قرار میدهم تا نیازی به کپی از سایت نباشد . به فولدر Files مراجعه کنید .