vs2015 رد angularjs2 یزادنا هار : هلاقم ناونع ناسیون ... · vs2015 رد...

6
ن مقاله : عنوا راه اندازیAngularJS2 درVS2015 یه تهویسان مرجع تخصصی برنامه ن وتنظیم کننده :www.barnamenevisan.org [email protected] مارنت موجود است.ا در اینتتز مقادی اد زیاضر تعدا درحال حاد برای مجد تنظیم به فعال کردنم قادر هیچ کدا روی بر کارAngular2 + typescript درVS2015 community نسخه(Update 3) ن مقاله میست.در ای نیصب آن را توضیح نحوه نم این خواهی دهیم. شما بایدnpm install وراتین دستا اجرا کنید و همچن رnpm را در خودکار فعالد تا کامپایل اجرا کنی خط فرمانورات این دست شود، چونNode.JS را فعال میکنند( را درین کارها که اVS2015 بدهیمنجامز نیست ا نیا) و گزینهین همچن کامپایل شدن خودکار برایtypescript د.این روش ، تغییر میکن کننده برای بسیار خسته راه اندازی توسعه برنامهangular2 با باز کردن خط که برنامه بر پای و وقتید دیگر است موارنجامن و ا فرما هmvc5 شما کامپایل نمی شود یا غیر قابلbuild ر است نیز بیشتدرگمی آن شدن است ، سر. نید کار با میتوا زیر شمان قدم هایا دنبال کرد بangular2 ا شروع ر کنید( ده ازستفا ا باsystemjs) نیاز به بدونورت دست بخواهید اینکه با رارآورید به اجرا د فقط با اجرای برنامه در حا لتdebug کردن(F5) یا( Ctrl + F5) ل هایت شما در فایهید و تغییرانجام در را ا ین کا میتوانید اTypescript ینکه شما ایا( خواهد آمدگر بوجودور مر در میتوانیدBrowserLink را درVS برنامهین و همچن) فعال کنیدMvc موفقیت اجرا خواهد شد شما با. مراحل باید آن راای بیر شروع کنیم زی: -> نصبTypescript -> نصبNode.Js وNpm

Upload: others

Post on 28-May-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون ... · VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون همانرب

VS2015در AngularJS2راه اندازی عنوان مقاله :

وتنظیم کننده : مرجع تخصصی برنامه نویسان تهیه

www.barnamenevisan.org [email protected]

هیچ کدام قادر به فعال کردن تنظیم مجدد برای درحال حاضر تعداد زیادی از مقاالت در اینترنت موجود است.اما

نیست.در این مقاله می (Update 3) نسخه VS2015 community در Angular2 + typescript کار بر روی

.دهیم خواهیم این نحوه نصب آن را توضیح

خط فرمان اجرا کنید تا کامپایل خودکار فعال را در npm را اجرا کنید و همچنین دستورات npm install شما باید

و (نیاز نیست انجام بدهیم VS2015 که این کارها را در)میکنند فعال را Node.JS شود، چون این دستورات

راه اندازی بسیار خسته کننده برای تغییر میکند.این روش ، typescript برای خودکار شدن کامپایل همچنین گزینه

شما mvc5 هفرمان و انجام موارد دیگر است و وقتی که برنامه بر پای با باز کردن خط angular2 توسعه برنامه

.شدن است ، سردرگمی آن نیز بیشتر است build قابل غیر یا شود نمی کامپایل

بدون نیاز به (systemjs با استفاده از)کنید را شروع angular2 با دنبال کردن قدم های زیر شما میتوانید کار با

(Ctrl + F5 ) یا (F5) کردن debug لتحا در برنامه اجرای با فقط به اجرا درآورید را باال اینکه بخواهید دستورت

در مرورگر بوجود خواهد آمد)یا اینکه شما Typescript میتوانید این کار را انجام دهید و تغییرات شما در فایل های

.شما با موفقیت اجرا خواهد شد Mvc فعال کنید( و همچنین برنامه VS را در BrowserLink میتوانید

:زیر شروع کنیمبیایید آن را با مراحل

Typescript نصب<-

Npm و Node.Js نصب <-

Page 2: VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون ... · VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون همانرب

VS2015در AngularJS2راه اندازی عنوان مقاله :

وتنظیم کننده : مرجع تخصصی برنامه نویسان تهیه

www.barnamenevisan.org [email protected]

Angular 2 راه اندازی<-

.را در سیستم خود نصب کرده اید، می توانید از دو مرحله جلوتر شروع کنید npm و typescript اگر قبال

Typescript نصب

.را نصب کنید Typescript ،Node.js + npm شما اول نیاز دارید که

:شما میتوانید VS2015 در Type Script ببرای نص

.....<Tools > Extensions

.کلیک کنید Online باز شده بر روی گزینه dialog سپس در داخل

Page 3: VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون ... · VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون همانرب

VS2015در AngularJS2راه اندازی عنوان مقاله :

وتنظیم کننده : مرجع تخصصی برنامه نویسان تهیه

www.barnamenevisan.org [email protected]

.را تایپ کنید و اخرین نسخه آن را انتخاب کنید typescript باکس جستجوسپس در تکست

Page 4: VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون ... · VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون همانرب

VS2015در AngularJS2راه اندازی عنوان مقاله :

وتنظیم کننده : مرجع تخصصی برنامه نویسان تهیه

www.barnamenevisan.org [email protected]

.را انتخاب کنید و تصویر زیر که برای راهنمایی شما است را دنبال کنید download سپس

Page 5: VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون ... · VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون همانرب

VS2015در AngularJS2راه اندازی عنوان مقاله :

وتنظیم کننده : مرجع تخصصی برنامه نویسان تهیه

www.barnamenevisan.org [email protected]

در تمام پروژه های شما Typescript حاضر پس از نصب موفق، ویژوال استودیو را مجددا راه اندازی کنید.در حال

بروید و آن Typescript نصب کنید، می توانید به سایت VS2015 از طریق فعال شده است.اگر نمی خواهید آن را

.یا نصب خودکار آن نصب کنید installer طریق را از

Node.js + npm نصب

سایتشان میباشد ، در واقع نیازی از طریق وب Node.js + npm بعد از انجام کارهای قبل حال نوبت به نصب

VS2015 که دارای اشکال زدایی سرور خود است ، نیست.با این حال visual studioهمانند node.js server به

و node شما میتوانید د.اطمینان حاصل کنید کهذکر کن package.json دارد تا وابستگی ها را در فایل npm نیاز به

اجرا کنید. به عنوان مثال (command line) خط فرمان را از هر جایی از سیستمتان با استفاده از nmp دستورات

، node و npm exe نید.در ک دنبال دقت به متغیرهای مسیر اضافه شوند.لطفا دستورالعمل های سایتش را به باید

.آماده هستید VS در Angular 2 ه شما برای نصبحال حاضر هم

Angular 2 نصب

در مرورگر اجرا کنید.همانطور که صفحه را اضافه کنید. و برنامه را MVC بدون استفاده از احراز هویت، برنامه وب

.دهیددر پروژه خود انجام AngularJS 2 + Typescript را برای تنظیم پیش فرض را می بینید، سپس مراحل زیر

(update 3 نسخه) VS2015 بگیرید.این زیپ برای angular setup zip از (Zip) بسادگی یک کپی فشرده

آماده شده است.و angularjs2 github repository از tsconfig.json و package.json برای ایجاد تغییر در

در پروژه خود با کلیک پوشه ها و فایل ها راروی ریشه پروژه خود از حالت فشرده در آورید.سپس این آن را بر

.بیافزایید "include in project" راست بر روی نام پروژه و انتخاب گزینه

1. package.json (شامل وابستگی ها و ماژول های مورد نیاز angular2 همراه با نسخه آن، که از ریپازیتوری

Angular2 استخراج شده است)

2.systemjs.config.js

.را شامل میشود ts پوشه فولدر که دو فایل.3

.تغییر می کنند index.cshtml و layouts.cshtml_ مانند Views پوشه زیر به این معنا که که دو فایل در

Page 6: VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون ... · VS2015 رد AngularJS2 یزادنا هار : هلاقم ناونع ناسیون همانرب

VS2015در AngularJS2راه اندازی عنوان مقاله :

وتنظیم کننده : مرجع تخصصی برنامه نویسان تهیه

www.barnamenevisan.org [email protected]

را وارد کنید، باید آن را به "node_modules" مانند نیازی نیست که فایل دیگری را بیافزایید یا پوشه دیگری

.فشار دهید debugging را برای اجرای برنامه در حالت F5 د کنید.حاالصورت خودکار ایجا

!angular2 has been set :تمام شد.حاال مرورگر خود را بروزرسانی کنید.شما باید این پیام را مشاهده کنید

اردکردن جداگانه یا و npm اجرای یا و پروژه ساختن به نیازی نصب شده است و دیگر angular2 به این صورت

.نیست command prompt از طریق install دستور

:توجه

.نصب کنید ( VS2015 همچنین در) administrator سعی کنید تمام نصب را با استفاده از مجوز.1

.در ریشه ایجاد شود pack.json باید به طور خودکار بر اساس فایل Node_modules پوشه.2