• AngularJS 2 - قسمت ششم
AngularJS 2 - قسمت ششم
1395/01/20 - 23:09:07 // Angular JS // 4 نظر // 994 بازدید

در بخش قبلی با معماری 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 مراجعه کنید .

 
 
علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
نظرات کاربران
  • محمد
    1395/02/01 - 02:20:48

    1
    0
    سلام آموزش بسیار مفید بود ادامه نمیدهید؟ حدود یک هفته منتظر هستم انشالله قسمت هفتم را قرار خواید داد؟ خیلی مچکرم
  • فرشید علی اکبری
    1395/02/09 - 11:06:59

    1
    0
    سلام پس چرا این آموزش هم مثل خیلی از آموزش های دیگه توی سایر سایتها، نصفه و نیمه رها شده؟!!! واقعاً حیف زمانی هستش که تا حالا براش گذاشتید ولی متاسفانه ادامه ندادید. بنده هم منتظر ادامه دروس خوب آموزشی تون هستم. موفق باشید.
     
     
    -------------------
    پاسخ :
    سلام ، به محض پایان Core 1 در حدود 5 روز آینده ، در VS.NET 2015 و با واسطگی Core 1 مجموعه ای عملی از AngularJS 2 خواهیم ساخت و این سلسله آموزش ها رها نخواهد شد، مطمئن باشید و تنها 5 روز صبر کنید .
     
  • فرشید علی اکبری
    1395/02/09 - 13:33:39

    0
    0
    من امروز با کانال تون آَنا شدم و آموزش های خوبی را هم که برای Core 1 به اشتراک برای کاربران گذاشتید رو دیدم و واقعاً لذت بردم. فقط اگه امکانش خروجی PDF از مقالات را به سایت تون اضافه کنید خیلی بهتر میشه. البته منهم مثل خیلی دیگه از کاربران خروجی PDF را ازشون گرفتم و در آرشیوم ذخیره کردم ولی اگه یک خروجی شکیل با بخش نظرات کاران در خروجی بتونیم داشته باشیم خیلی عالی میشه. به عنوان مثل چیزی شبیه به خروجی های سایت (دات نت تیپس)، که باعث میشه خیلی از سئوالاتی که تک تک کاربران در رابطه با مقاله مذکور براشون پیش میاد و مدرس پاسخ میده، بعدها برای کاربران دیگه هم پیش بیاد که مطمئناً جوابش رو می تونند در خروجی PDF گرفته شده در آرشیو خودشون داشته باشند. با تشکر از طحمات همگی شما عزیزان .
     
     ----
    پاسخ: قطعا خروجی PDF در سیاستهای کاری ما نمی باشد .  
  • محمد
    1395/04/11 - 22:24:10

    0
    0
    سلام من vs رو اپدیت کردم و کلا گزینه های ایجاد پروژه عوض شده میشه در مورد این قسمت از اموزشتون و ایجاد پروژه راهنمایی بفرمایید
     
    --
    به دلیل مسخره بازیهای دات نت ،اگر دقت کنید ، دیگر بیخیال آموزش Angular در محیط دات نت شده ایم و به صورت خالص از NPM و VS Code داره استفاده میشه. قسمتهای بعدی را مطالعه کنید. من به شخصه کلن دات نت را گذاشته ام دیگر کنار .  
ارسال نظر