{"id":8915,"date":"2017-04-27T14:00:00","date_gmt":"2017-04-27T14:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/premier_developer\/?p=8915"},"modified":"2019-02-20T10:51:41","modified_gmt":"2019-02-20T17:51:41","slug":"my-highly-opinionated-guide-to-setting-up-the-best-environment-for-angular-development","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/my-highly-opinionated-guide-to-setting-up-the-best-environment-for-angular-development\/","title":{"rendered":"My highly opinionated guide to setting up the best environment for Angular development"},"content":{"rendered":"

This post from Senior Premier Developer Consultant Laurie Atkinson<\/a> gives you a step-by-step guide to getting started with Angular development.<\/p>\n

\n

Follow these steps to get up and running with an Angular application including source control, editor tooling, and essential commands.<\/em><\/p>\n

Step 1 \u2013 Use Visual Studio Team Services (VSTS) for Source Control<\/h3>\n

(NOTE: If this is not available to you, any Git repository will work.)<\/p>\n

    \n
  1. Navigate to my.visualstudio.com<\/a> and log in with your MSDN account.<\/li>\n
  2. Under Tools, select Visual Studio Team Services\n\"clip_image001\"<\/li>\n
  3. Choose a domain name to host your project and make sure that Git is selected.\n\n<\/a> \"clip_image002\"<\/li>\n
  4. Wait while your project is created.\n\"clip_image003\"<\/li>\n
  5. When complete, the landing page for your project appears and the URL to the project is [your-project-name].visualstudio.com\n\"clip_image004\"<\/li>\n
  6. Access your Git repository under Code \u2013> Manage repositories.<\/li>\n
  7. Since VSTS named the project MyFirstProject, the name needs to be changed. This is done under Settings \u2013> Overview.\n\"clip_image005\"<\/p>\n

    Hovering over the name of your project in the left sidebar will allow you to edit it\n\"clip_image006\"<\/li>\n

  8. Find the URL to your Git repository under Code \u00e0 Files. Copy it to your clipboard. You will need this URL to clone the repository to Visual Studio Code.\n\n\"clip_image007\"\n<\/a><\/li>\n<\/ol>\n

    Step 2 \u2013 Use Visual Studio Code for editing your code<\/h3>\n
      \n
    1. Download and install Visual Studio Code (VS Code) from https:\/\/code.visualstudio.com\/<\/a><\/li>\n
    2. Run VS Code and open a folder into which you want the project to be cloned.\n\"clip_image008\"<\/li>\n
    3. Open a terminal window from inside VS Code using either View \u00e0 Integrated Terminal or the shortcut key Ctl + `.<\/li>\n
    4. Git clone the repository using the URL copied in step 6.\n\"clip_image009\"<\/li>\n<\/ol>\n

      Step 3 \u2013 Set up Angular and its dependencies<\/h3>\n
        \n
      1. Install prerequisites for Angular and Angular-CLI\n\u2013 Node 6.9.0 or higher \u2013 https:\/\/nodejs.org\/en\/download\/\n\u2013 NPM<\/a> 3 or higher. \u2013 bundled with Node\nNOTE: You can verify your existing Node and NPM versions by running these commands in the terminal window.\nnode -v\nnpm -v<\/li>\n
      2. Install the command line interface for Angular (Angular CLI). The latest instructions are found here. https:\/\/github.com\/angular\/angular-cli#installation<\/a>\n\"clip_image010\"<\/li>\n
      3. From the terminal window inside VS Code, use the Angular CLI to create your application. Make sure you execute the command from the project folder that will contain this generated application.\n\"clip_image011\"<\/p>\n

        When the Angular CLI completes, you should now have a folder in your specified directory named AngularDemo. Open this new folder from VS Code.<\/li>\n

      4. Run the newly created application using the NPM script located in package.json and created by the Angular CLI.\n\"clip_image012\"<\/li>\n
      5. Navigate to the running application in your browser.\n\"clip_image013\"<\/li>\n<\/ol>\n

        Step 4 \u2013 Commit changes from VS Code to VSTS<\/h3>\n
          \n
        1. Commit your newly created application to VSTS project from the Git tab in VS Code. This is done from the check mark icon labelled \u201cCommit All\u201d.\n\"clip_image014\"<\/p>\n

          Note that the name of the repository is viewable from this tab as well.\n\"clip_image015\"<\/li>\n<\/ol>\n

          Step 5 \u2013 Install VS Code \u201cMust-Have\u201d Extensions<\/h3>\n
            \n
          1. From the Extensions menu, install the following:<\/li>\n<\/ol>\n

            vscode-icons<\/em> <\/strong>which improves the readability of the explorer tab by adding useful icons to your files.<\/p>\n

            \"cid:image027.jpg@01D2BD35.0C59BE10\"<\/p>\n

            \"cid:image029.jpg@01D2BD35.0C59BE10\"<\/p>\n

            TypeScript Hero<\/em> <\/strong>which provides typeahead and quick actions for adding import statements.<\/p>\n

            \"cid:image031.jpg@01D2BD35.0C59BE10\"<\/p>\n

            \"cid:image033.jpg@01D2BD35.0C59BE10\"<\/p>\n

            \"cid:image035.jpg@01D2BD35.0C59BE10\"<\/p>\n

            TSLint<\/em> <\/strong>which adds interactive code analysis during development.<\/p>\n

            \"cid:image037.jpg@01D2BD35.0C59BE10\"<\/p>\n

            \"cid:image039.jpg@01D2BD35.0C59BE10\"<\/p>\n

            Step 6 \u2013 Run Unit Tests<\/h3>\n
              \n
            1. From the terminal window in VS Code, use the following command to run all the unit tests.\n<\/a> \"clip_image019\"<\/li>\n
            2. For a code coverage report, append the -cc argument. The results will be generated into the coverage folder.\n<\/a> \"clip_image020\"<\/p>\n

              \"clip_image021\"<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

              This post from Senior Premier Developer Consultant Laurie Atkinson gives you a step-by-step guide to getting started with Angular development. Follow these steps to get up and running with an Angular application including source control, editor tooling, and essential commands. Step 1 \u2013 Use Visual Studio Team Services (VSTS) for Source Control (NOTE: If this […]<\/p>\n","protected":false},"author":582,"featured_media":37840,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[122],"tags":[51,52],"class_list":["post-8915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-laurie-atkinson"],"acf":[],"blog_post_summary":"

              This post from Senior Premier Developer Consultant Laurie Atkinson gives you a step-by-step guide to getting started with Angular development. Follow these steps to get up and running with an Angular application including source control, editor tooling, and essential commands. Step 1 \u2013 Use Visual Studio Team Services (VSTS) for Source Control (NOTE: If this […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/8915","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\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=8915"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/8915\/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=8915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=8915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=8915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}