آموزش نصب و راه‌اندازی انگولار [Angular 5]
آموزش نصب و راه‌اندازی انگولار [Angular 5] » در این مقاله، نحوه نصب انگولار (ANGULAR 5) و تایپ‌اسکریپت (TypeScript) بصورت لوکال را بطور کامل آموزش می دهیم.

آموزش نصب و راه‌اندازی انگولار [Angular 5]

How to setup Angular Apps

نصب angular5

 

نحوه نصب انگولار و تایپ‌اسکریپت بصورت لوکال

در این مقاله قصد داریم مراحل نصب و راه اندازی اپلیکیشن انگولار (Angular Application) را به زبان ساده و قدم به قدم آموزش دهیم.

 

نصب Node.js:

آخرین نسخه Node.js را از نشانی ذیل دانلود کرده و نصب میکنیم:

https://nodejs.org/en/

توجه:  با نصب Node.js به طور اتوماتیک npm نیز نصب میشود!

 

نصب Node.js

 

نصب Visual Studio Code:

آخرین نسخه Visual Studio Code را از نشانی ذیل دانلود کرده و نصب میکنیم :

https://code.visualstudio.com

 

نصب Visual Studio Code

 

توجه :  در این سند، هرگاه گفته میشود که در محیط Command Prompt دستوری نوشته شود، دقت داشته باشید که باید قبلا این محیط را به صورت Run As Administrator اجرا )باز) کرده باشید. مطابق تصویر زیر:

 

Run As Administrator

 

مشاهده ورژن‌های node و npm و VS-Code:

دستورات ذیل را در محیط Command Prompt ویندوز مینویسیم و در صورتی که هر کدام از دستورات ذیل خطا داد، یک بار سیستم را Restart میکنیم:

  • node –version
  • V9.11.1
  • npm –version
  • ۵٫۶٫۰
  • code –version
  • ۱٫۲۲٫۲ (x64)

 

نکته: پس از اینکه وارد محیط cmd شدید، مانند تصویر زیر، توسط دستور cd به فولدر موردنظر در سیستم خود بروید. بنده قصد دارم پروژه های انگولار خود را در فولدر Ehsan > Ang-App واقع در درایو G پیاده سازی کنم:

 

مشاهده ورژن‌های node و npm و VS-Code

 

توجه:  برای پارامترهای برنامه های نسل جدید مانند node, npm, code, git, tsc, دقت داشته باشید که اولا یا باید نام آنها را به طور کامل با دو DASH استفاده کرده و یا با یک  DASH و به صورت مخفف استفاده نمایید و ثانیا اسامی تمام پارامترها Case Secretive میباشد!

همانطور که در تصویر فوق مشاهده می کنید، دستورات node, npm , code را به دو صورت کامل و مخفف اجرا کرده ایم و جواب یکسانی گرفته ایم.

node –-version > OK

node –v > OK

node –V > Error

node –-v > Error

node –version > Error

node –-Version > Error

 

نکته:  ترجیحا هرگاه میخواهید از دستور npm install و یا npm update استفاده نمایید، بهتر است قبل از آن، یک فیلترشکن اجرا نمایید. زیرا ممکن است برخی از کتابخانه ها و اسکریپت ها فیلتر باشند و npm نتواند بدون فیلترشکن آنها را نصب کند.

 

نصب TypeScript:

حال اقدام به نصب TypeScript میکنیم:

  • npm install g typescript
  • یا
  • npm i g typescript

 

و برای مشاهده ورژن تایپ اسکریپت نصب شده دستور زیر را در cmd اجرا کنید:

  • tsc –version
  • یا
  • tsc -v
  • Version 2.8.3

 

نصب TypeScript

 

با استفاده از دستور فوق، آخرین نسخه از typescript به صورت Global در نشانی ذیل و با نام tsc.cmd نصب میگردد:

C:\\Users\\[YOUR USERNAME]\\AppData\\Roaming\\npm\\

 

نصب Angular/cli:

دستور زیر را در cmd اجرا کنید:

npm install g @angular/cli

 

نصب Angular/cli

 

سپس برای کسب اطلاعات بیشتر و دقیق تر راجع به نصب انگولار، به وب سایت های زیر مراجعه نمائید:

 

تعریف پروژه جدید در انگولار:

وارد یک مسیر دلخواه شده و دستورات ذیل را برای ایجاد یک پروژه جدید Angular وارد نمایید. همانطور که در بخش های ابتدایی این مقاله مشاهده کردید، من قصد دارم پروژه های انگولار خود را در مسیر زیر توسعه دهم:

G > Ehsan > Ang-App

 

ایجاد پروژه my-app:

my-app یک نام تستی است و شما میتوانید از هر نامی استفاده کنید.  فقط دقت کنید که در نام مورد نظر از فضای خالی Spacebar و یا نقطه استفاده نکنید.

ng new my-app

 

 توجه: ایجاد پروژه جدید my-app ممکن است چند دقیقه طول بکشد. اگر در انتهای این فرآیند با تصویر زیر مواجه شدید، معنی آن اینست که نام و ایمیل شما قبلا در git تعریف نشده است و براحتی می توانید با دستورات زیر مشخصات خود را ثبت کنید.

 

تعریف نام و ایمیل در گیت

 

git config –global user.email “Ehsansafari987@gmail.com

git –global user.name “Ehsan-Safari”

 

سپس توسط دستور cd به فولدر اپلیکیشن جدید بروید:

cd my-app

 

اطمینان از آپدیت بودن package های نصب شده:

برای اینکه از update بودن تمام Package هایی که در داخل پوشه جاری نصب شده است، اطمینان حاصل نماییم از دستور ذیل استفاده میکنیم:

npm update -save

 

راه اندازی وب سرور (Web Server):

ng serve

 

با استفاده از دستور فوق، صرفا Web Server راه اندازی میشود. در اینصورت تصویر زیر را مشاهده خواهید کرد:

 

راه اندازی وب سرور (Web Server)

 

دقت کنید که برای اجرای سایر دستورات در محیط cmd باید یک cmd دیگری باز کنید و پنجره cmd تصویر فوق را که وظیفه اجرای سرور را برعهده دارد را بصورت باز نگه دارید. اگر بخواهید سرور را پایین بیاورید، کافیست دو بار کلیدهای ترکیبی ctrl+c را بفشارید.

 

باز شدن مرورگر پیش فرض:

توسط دستور زیر قادر خواهید بود علاوه بر راه اندازی Web Server ، مرورگر پیشفرض Windows را نیز باز کرده و وب سایت ظاهر شود:

ng serve –open

 

تغییر پورت پیش فرض ۴۲۰۰:

با استفاده از دستور فوق، Web Server به طور پیشفرض بر روی پورت ۴۲۰۰ راه اندازی میشود.  در صورتی که بخواهیم از پورت دیگری ) ۸۰۸۰ ( برای راه اندازی Web Server استفاده نماییم از دستور ذیل استفاده میکنیم:

ng serve –open –port 8080

 

در صورتی که به هر دلیلی، دستور فوق اجرا نشود، از دستور ذیل استفاده نمایید:

node_modules\.bin\ng serve –open –port 8080

 

دقت کنید که گزینه open برای این است که بعد از اجرا شدن Web Server ، به طور اتوماتیک Browser پیشفرض دستگاهمان باز شده و نشانی ذیل در داخل آن نوشته شود:

http://localhost:4200

تصویری که در مرورگر پیش فرض خود (اپلیکیشن پیش فرض my-app) خواهید دید بصورت زیر خواهد بود:

 

اپلیکیشن پیش فرض my-app

 

اطلاع از آخرین نسخه Angular:

برای اینکه از آخرین نسخه Angular مطلع شویم، ابتدا وارد سایت ذیل شده:

https://www.npmjs.com

سپس عبارت ذیل را جستجو کرده تا از آخرین نسخه Angular مطلع شویم:

@angular/core

Version: 5.2.10

 

توجه: دقت کنید که نسخه angular/core با نسخه angular/cli متفاوت میباشد !

 

آپدیت پکیج‌های نصب شده:

در صورتی که مدتی از این نصب گذشته باشد و بخواهیم تمامی package های نصب شده را update نماییم، در حالی که در محیط Command Prompt  و در پوشه my-app قرار داریم، از دستور ذیل استفاده میکنیم:

npm update –save

 

اجرای اتوماتیک نرم افزار VS Code:

در حالی که Web Server با استفاده از دستور ng serve اجرا شده است، از طریق یک محیط Command Prompt دیگری، دستور ذیل را وارد کرده تا وارد محیط Visual Studio Code شویم:

code .

اجرای نرم افزار VS Code

 

خواهیم دید که با اجرای دستورات تصویر فوق، نرم افزار vs code بطور اتوماتیک باز می شود!

 

نصب Extension های مورد نیاز در VS Code:

قبل از هر کاری Extension هایی به نامهای Debugger for Chrome و Visual Studio Keymap را در محیط Visual Studio Code نصب میکنیم.

حال برنامه را یک بار اجرا کرده و از کادر ظاهر شده  Select Environment گزینه Chrome را انتخاب کرده تا پوشه  .vscode

و نیز فایل launch.js در پوشه .vscode ایجاد گردد.

 

تغییر پورت پیش فرض:

مقدار پیشفرض پورت را از ۸۰۸۰ به ۴۲۰۰ در داخل launch.json تغییر میدهیم:

{

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:4200",

"webRoot": "${workspaceRoot}"

},

]

}

دکمه های ترکیبی CTRL + SHIFT + S را زده تا همه فایلهایی که تغییر داده ایم، ذخیره شوند.  دقت داشته باشید که این کار را همیشه بعد از تغییرات فایل یا فایلها انجام دهید.

توجه: دقت داشته باشید که Web Server از طریق یک Command Prompt دیگری اجرا شده است! و تمام عملیات اخیر و عملیات بعدی، در حالی است که این Web Server راه اندازی شده باشد!

 

اجرای تغییرات در خروجی بصورت خودکار:

حال پروژه را در محیط Visual Studio Code مجددا اجرا کرده تا در داخل Google Chrome Browser آنرا مشاهده نمایید.  هرگاه فایلهای html css و یا حتی ts را تغییر داده و ذخیره نماییم، تغییرات در داخل Browser به صورت خودکار بروزرسانی شده و قابل رویت خواهد بود.

 

» مطالعه مقاله تاریخچه انگولار و ورژن های مختلف آن توصیه می شود.


برچسب‌ها:

آموزش نصب انگولاراپلیکیشن انگولارنصب angularنصب Type Scriptنصب انگولارنصب انگولار 5نصب انگیولارنصب تایپ اسکریپت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

یک × 4 =