اگر کار شما طراحی و توسعه وب هست، حتماً با نام Angular آشنایی دارید، یک کتابخانه محبوب مبتنی بر JavaScript که توسط Google توسعه داده شده و برای ایجاد برنامه های SPA یا Single Page Application استفاده میشه. برای استفاده از Angular محیط های توسعه زیادی وجود داره که یکی از این محیط ها Visual Studio Code هست، نسخه ای رایگان از Visual Studio با حجم حدود 50 مگابایت که به شما اجازه ایجاد انواع مختلفی از Application ها مانند Python و React و البته Angular رو میده. در این مطلب قصد داریم تا با نحوه استفاده از VS Code برای ایجاد برنامه های Angular آشنا بشیم. در ابتدا با نحوه نصب Angular CLI که برای توسعه Application های Angular مورد استفاده قرار میگیره آشنا میشیم و بعد نحوه پیکر بندی VS Code برای استفاده از Angular رو بررسی می کنیم.
در اولین قدم باید Visual Studio Code رو نصب کنیم. از طریق این لینک می تونید VS Code رو دانلود و نصب کنید. بعد از نصب و اجرا با محیطی مشابه تصویر زیر روبرو میشید:
در قدم بعدی باید Angular/CLI رو نصب کنیم. این کار رو بوسیله npm و از طریق محیط Powershell یا Command Prompt انجام میدیم. (اگر nodejs رو نصب نکردید از طریق این لینک آخرین نسخه رو نصب کنید):
npm install -g @angular/cli
با اجرای دستور بالا پکیج angular/cli بر روی سیستم ما نصب می شود. حالا می تونیم یک Application جدید از نوع angular ایجاد کنیم. برای اینکار از دستور ng استفاده می کنیم. از دستور ng برای ایجاد پروژه ها، Component ها، serve کردن پروژه ها برای اجرا و تست و همچنین build کردن پروژه ها استفاده می کنیم. دستور زیر یک پروژه جدید با نام tosinso-app ایجاد می کند:
ng new tosinso-app
بعد از اجرای دستور بالا چند سوال از شما می شود، سوال اول در مورد افزودن قابلیت Routing هست که N را برای عدم افزودن این قابلیت انتخاب کنید. سوال دوم در مورد فرمت نوشتن Stylesheet هست که ما CSS رو انتخاب می کنیم:
E:\AngularApps>ng new tosinso-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
بعد از انتخاب موارد فوق، پروژه tosinso-app برای ما ایجاد می شود. وارد پوشه tosinso-app شده و دستور زیر رو وارد می کنیم:
E:\AngularApps\tosinso-app\code .
با اجرای دستور بالا، VS Code برای پوشه tosinso-app باز میشه و از این مرحله می تونیم از داخل محیط VS Code کد نویسی رو شروع کنیم. برای اجرای پروژه و Debug کردن باید چند کار رو انجام بدیم. در قدم اول باید افزونه Debugger for Chrome رو به VSCode اضافه کنیم. این لینک رو باز کنید و روی گزینه Install بزنید تا افزونه مورد نظر ما به VS Code اضافه بشه. برای اینکه بتونید راحت تر کدهای Angular رو بنویسید افزونه های زیر هم می تونه خیلی کاربردی باشه و بهتره که به VS Code اضافه بشن:
Angular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
برای اینکه محیط اجرای برنامه Angular ما آماده بشه، باید از دستور ng serve استفاده کنیم. برای اینکار وارد پوشه tosinso-app میشیم و دستور زیر رو اجرا می کنیم:
E:\AngularApps\tosinso-app>ng serve
10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-14T07:28:58.744Z - Hash: f0e30ce35d3d50a5e84c - Time: 6702ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Compiled successfully.
در خروجی بالا می بینیم که آدرس localhost با پورت 4200 آماده استفاده هست. داخل مرورگ آدرس بالا رو وارد می کنیم و باید صفحه زیر رو مشاهده کنیم:
قدم بعدی ما لینک کردن دیباگر VS Code به آدرسی هست که App ما از طریق اون قابل دسترسه. داخل محیط VS Code کلید F5 رو می زنیم، منویی شبیه به تصویر زیر برای ما نمایش داده می شود:
از منوی ظاهر شده گزینه Chrome رو انتخاب می کنیم. با انتخاب گزینه Chrome یک فایل json با محتویات زیر ایجاد می شود:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}در فایل بالا، در بخش url آدرس پورت رو به 4200 تغییر می دیم، فایل رو save کرده و مجدد کلید F5 رو میزنیم، اینبار پروژه ما داخل Chrome باز میشه. (این نکته رو فراموش نکنید که حتماً باید دستور ng serve اجرا شده باشه تا VS Code بتونه از طریق آدرس مشخص شده برنامه رو اجرا کنه).با انجام مراحل بالا محیط VS Code برای توسعه برنامه Angular ایجاد شده آماده هست و می تونید اقدام به نوشتن کدهای خودتون کنید.