{"id":16445,"date":"2017-12-05T15:00:00","date_gmt":"2017-12-05T15:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/premier_developer\/?p=16445"},"modified":"2020-03-27T09:46:26","modified_gmt":"2020-03-27T16:46:26","slug":"getting-started-with-node-js-angular-and-visual-studio-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/getting-started-with-node-js-angular-and-visual-studio-code\/","title":{"rendered":"Getting Started with Node.js, Angular, and Visual Studio Code"},"content":{"rendered":"

This step-by-step guide on getting started with Node.js and Angular comes to us from Premier Developer consultant Crystal Tenn<\/a>.<\/p>\n

\n

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.<\/p>\n

    \n
  1. Install Node JS with default settings for everything\nhttps:\/\/nodejs.org\/en\/download\/<\/a><\/li>\n
  2. Download Visual Studio Code:\nhttps:\/\/code.visualstudio.com\/download<\/a><\/li>\n
  3. Open PowerShell in admin mode. Install Angular CLI:\n
    npm install -g @angular\/cli<\/pre>\n<\/li>\n
  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.\n
    ng new my-new-angular-app<\/pre>\n
    \"\"<\/li>\n
  5. cd into your new app directory that you just created, in this case\n
    cd my-new-angular-app<\/pre>\n
    \"\"<\/li>\n
  6. Build app and start server\n
    ng serve\r\n<\/pre>\n
    \"image\"<\/a><\/li>\n
  7. Navigate to http:\/\/localhost:4200<\/a>\n\"image\"<\/a><\/li>\n
  8. Open Visual Studio Code<\/li>\n
  9. Click on File, Open Folder\n\"image\"<\/a><\/li>\n
  10. Open the folder<\/b> that you created. In this case it would be my-new-angular-app. Hit Select Folder, as seen in screenshot below.\n\"\"<\/li>\n
  11. package.json has all of your angular dependencies and other packages.\"image\"<\/a><\/li>\n
  12. You can add all your components in the app folder.\n\"image\"<\/a><\/li>\n
  13. In PowerShell, to stop your Server:\n
      \n
    1. Hit Ctrl +C<\/li>\n
    2. Then type “Y” and hit enter to stop it.\"image\"<\/a><\/li>\n<\/ol>\n<\/li>\n
    3. See the following link for docs on how to use Angular: https:\/\/angular.io\/guide\/styleguide<\/a><\/li>\n<\/ol>\n
      (<\/span>Link to Portuguese version of this article<\/a>)<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
      This step-by-step guide on getting started with Node.js and Angular comes to us from Premier Developer consultant Crystal Tenn. 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, […]<\/p>\n","protected":false},"author":581,"featured_media":37840,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[51,76,284,377],"class_list":["post-16445","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-permierdev","tag-angular","tag-crystal-tenn","tag-node-js","tag-visual-studio-code"],"acf":[],"blog_post_summary":"
      This step-by-step guide on getting started with Node.js and Angular comes to us from Premier Developer consultant Crystal Tenn. 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, […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/16445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=16445"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/16445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/37840"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=16445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=16445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=16445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}