آموزش قدم به قدم راه‌اندازی آخرین نسخه Angular 8.x

آموزش قدم به قدم راه‌اندازی آخرین نسخه Angular 8.x در محیط Visual Studio Code

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

نکته:برای راه اندازی Angular 8.x باید Node.js نسخه 10.9.0 به بعد را دانلود و نصب نمایید. ولی توصیه سایت تیم Angular آخرین نسخه Node.js 12.x میباشد!

https://nodejs.org/en/

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

NPM ==> Node Package Manager

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

https://code.visualstudio.com/

توجه: در این سند هرگاه گفته میشود که دستورات ذیل را در محیط Command اجرا نمایید، منظور محیط Command Prompt و یا Windows PowerShell میباشد!

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

دستورات ذیل را در محیط Command مینویسیم و در صورتی که هر کدام از دستورات ذیل خطا داد، یک بار سیستم را Restart میکنیم تا Path آنها در قسمت Windows Environment Variables ویندوز Set شوند:

node --version OR -v

npm --version OR –version OR --v OR -v

code --version OR –version OR --v OR –v

توجه: برای پارامترهای ) Switch ( برنامه های ) Command ( نسل جدید مانند node, npm, code, git, tsc,… دقت داشته باشید که اولا یا باید نام آنها را به طور کامل با دو DASH ( -- ( استفاده کرده و یا با یک DASH ( - ( و به صورت مخفف استفاده نمایید )که البته همانطور که در بالا مشاهده میکنید، استثناء هم وجود دارد!( و ثانیا اسامی تمام پارامترها Case Sensitive بوده و باید با حروف کوچک نوشته شوند!

node –-version ==> OK

node –v ==> OK

node –V ==> Error!

node –-v ==> Error!

node –version ==> Error!

node –-Version ==> Error!

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

در نسخههای جدید npm ، میتوانید به جای نوشتن کلمه install از حرف i و به جای نوشتن کلمه update از حرف u استفاده نمایید.

هر چند که نیازی به نصب TypeScript به صورت مستقل وجود ندارد و TypeScript در درون پروژههای Angular CLI قرار دارد، ولی برای موارد دیگری که ممکن است نیاز به TypeScript داشته باشید، بد نیست که آن را نصب نمایید:

برای نصب TypeScript Compiler ، دستور ذیل را در محیط Command اجرا نمایید:

npm i –g typescript

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

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

وارد نشانی ذیل شده و مراحل آن را به ترتیب انجام میدهیم:

https://angular.io/guide/quickstart

npm i -g @angular/cli

برای مشاهده نسخه Angular CLI از دستور ذیل استفاده میکنیم:

ng –version

برای اطلاعات بیشتر به نشانی ذیل مراجعه نمایید:

https://angular.io/cli

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

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

ng new my-app

cd my-app

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

npm update –-save

حال برای اینکه از نصب کلیه module ها اطمینان حاصل نمایید، یکی از دستورات ذیل را اجرا کنید:

ng serve --open

یا

ng s –open

نکته: به جای کلمه serve میتوانید از حرف s نیز استفاده نمایید.

با استفاده از یکی از دستورات فوق، دو اتفاق خواهد افتاد. یکی آن که Web Server که بر اساس Node.js است، راه اندازی میشود و دوم آن که پروژه در Browser پیشفرض دستگاه شما ظاهر خواهد شد.

توجه: برای Stop کردن Web Server در محیط Command Prompt ، دوبار از دکمههای ترکیبی CTRL + C استفاده کرده و سپس حرف Y را زده و پس از آن Enter بزنید.

با استفاده از دستور ذیل صرفا Web Server راهاندازی شده و سایت در Browser پیشفرض دستگاه شما باز نخواهد شد!

ng s

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

ng s --port 8080

ng s --open --port 8080

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

node_modules\.bin\ng s --port 8080

node_modules\.bin\ng s --open --port 8080

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

https://www.npmjs.com/

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

@angular/core

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

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

npm update --save

ng update @angular/cli @angular/core --all=true

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

code .

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

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

حال در فایل launch.json ، مقدار پیشفرض پورت را از 8080 به 4200 تغییر داده و فایل مربوطه را ذخیره کنید:

{
        "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 دیگری اجرا شده باشد! و تمام عملیات اخیر و عملیات بعدی، در حالی است که این Web Server راهاندازی شده است!

حال پروژه را مجددا در محیط Visual Studio Code اجرا کرده تا در داخل Google Chrome Browser آنرا مشاهده نمایید.

نکته هیجانانگیز: هرگاه فایلهای html css و یا حتی ts را تغییر داده و ذخیره نمایید، تغییرات در داخل Browser به صورت خودکار بروزرسانی شده و قابل رویت خواهد بود و نیازی نیست که وارد Browser شده و آن را Refresh نمایید.

به عنوان مثال، وارد فایلهای ذیل شده و تغییرات را اعمال کرده و سپس از دکمههای ترکیبی CTRL + Shift + S استفاده کنید. حال زمانی که وارد Browser میشوید، خواهید دید که بدون نیاز به Refresh کردن، کلیه تغییرات نمایش داده میشود.

src ==> app ==> app.component.html ==> Welcome to ==> Hi

src ==> app ==> app.component.ts ==> title = ‘my-app’ ==> title = ‘Mr. Dariush Tasdighi’

برای ساختن Component ، یکی از دستورات ذیل را در Command Prompt و یا Terminal مربوط به Visual Studio Code اجرا میکنیم:

ng g component FullName

ng g c FullName

برای ساختن Module ، یکی از دستورات ذیل را در محیط Command Prompt و یا Terminal مربوط به Visual Studio Code اجرا میکنیم:

ng g module Post

ng g m Post

در صورتی که بخواهیم در هنگام خلق Module ، Routing File آن نیز ایجاد شود، یکی از دستورات ذیل را اجرا میکنیم:

ng g module Post --routing

ng g m Post --routing

یک سایت خیلی خوب برای نوشتن کدهای Angular به صورت آنلاین:

https://stackblitz.com

https://angular.io/guide/setup-local

https://angular.io/cli

https://stackblitz.com

https://angular.io/guide/file-structure

منبع: کانال اطلاع رسانی داریوش تصدیقی

aliaalipour.png

نویسنده: علی عالی پور

مسلط به تکنولوژی های شرکت Microsoft

C# / Asp.net Mvc 5 / Asp.net Core Mvc

Xamarin / Telerik

HTML5 / CSS3 / JS / Jquery

رزومه کامل من را در این لینک میتوانید مشاهده کنید

  • اطلاعات این دوره
  • دوشنبه 13 خرداد 1398
  • بر چسب ها:
    Angular
به اشتراک بگذارید