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

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

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

نصب Node.js:

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

https://nodejs.org/en/

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

نصب Visual Studio Code:

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

https://code.visualstudio.com

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

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

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

• node –version
• V9.11.1
• npm –version
• 5.6.0
• code –version
• 1.22.2 (x64)

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

توجه:  برای پارامترهای برنامه های نسل جدید مانند 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 به صورت Global در نشانی ذیل و با نام tsc.cmd نصب میگردد:

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

نصب Angular/cli:

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

npm install –g @angular/cli

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

• https://angular.io/guide/quickstart
• https://cli.angular.io/
• https://github.com/angular/angular-cli/wiki

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

وارد یک مسیر دلخواه شده و دستورات ذیل را برای ایجاد یک پروژه جدید 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 راه اندازی میشود. در اینصورت تصویر زیر را مشاهده خواهید کرد:

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

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

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

ng serve --open

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

با استفاده از دستور فوق، 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) خواهید دید بصورت زیر خواهد بود:

اطلاع از آخرین نسخه 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 بطور اتوماتیک باز می شود!

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

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

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

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

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

مقدار پیشفرض پورت را از 8080 به 4200 در داخل 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 به صورت خودکار بروزرسانی شده و قابل رویت خواهد بود.

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