HisTech Up

Getting Started with Node.js, Angular, and Visual Studio Code

Introduction

user

Christian Hissibini

I am a Tech enthusiast who loves to blend Dev & Design on Web and Mobile Platforms. I am also a Windows Platform Dev MVP


LATEST POSTS

What are the differences between Data Mining, Machine Learning and Deep Learning? 11th February, 2018

What are the challenges of using Artificial Intelligence? 15th January, 2018

Web Development

Getting Started with Node.js, Angular, and Visual Studio Code

Posted on .

Here is a simple step by step guide to getting your Angular application setup with Visual Studio Code and Node. This guide will simply help you know what to install, the commands to run in PowerShell, and some basics about where to start building your app using Visual Studio Code.

  1. Install Node JS with default settings for everything
    https://nodejs.org/en/download/
  2. Download Visual Studio Code:
    https://code.visualstudio.com/download
  3. Open PowerShell in admin mode. Install Angular CLI:
    npm install -g @angular/cli
  4. Navigate to the folder where you want to make your angular app. I went to my C:/ directory in my PowerShell to run the following command. I am calling mine « my-new-angular-app » but you can name it anything you like.
    ng new my-new-angular-app

    image

  5. cd into your new app directory that you just created, in this case
    cd my-new-angular-app

    image

  6. Build app and start server
    ng serve

    image

  7. Navigate to http://localhost:4200image
  8. Open Visual Studio Code
  9. Click on File, Open Folderimage
  10. Open the folder that you created. In this case it would be my-new-angular-app. Hit Select Folder, as seen in screenshot below.clip_image012
  11. package.json has all of your angular dependencies and other packages.image
  12. You can add all your components in the app folder.image
  13. In PowerShell, to stop your Server:
    1. Hit Ctrl +C
    2. Then type « Y » and hit enter to stop it.image
  14. See the following link for docs on how to use Angular: https://angular.io/guide/styleguide

 

 

 

 

Ref
https://msdn.microsoft.com/ 
profile

Christian Hissibini

I am a Tech enthusiast who loves to blend Dev & Design on Web and Mobile Platforms. I am also a Windows Platform Dev MVP

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...
Navigation