Tag Archives: Angular JS

Angular 2: Quick Start Notes Part #2

Following my first post in this series, in which I set up Visual Studio Code, installed Git and cloned Deborah Kurta’s Angular2-GettingStarted.git. Today I’m going list the steps required to install and configure the NPM (Node Package Manager) command line utility; this will enable me to see the results of my code changes in a web browser as I make them.

Before we start you should have already installed:

Install NPM

Start by installing the Node Package Manager know as NPM:

Setting up and Angular 2 Application

These are some different options for setting up an Angular 2 Application, however as I’m following Deborah’s course I have chosen to use her start files:

Install NPM: Macintosh (OS X)

Having previously cloned a Git repository we need to run the “npm install” command to install all of the required libraries (e.g. Angular and TypeScript) into our Application:

  • Open VS Code (Visual Studio Code)
  • Open the your Angular 2 project (in my case this project is called APM)
  • Right click on a file in the root of the folder and click Open in Terminal
  • Enter the following command:
     Mac:GitHub sion$ npm install

If output ends in an error, try the command again as it will often complete successfully on the second attempt.

For more NPM commands such as npn rebuild | uninstall see: https://docs.npmjs.com/cli

Running the Angular 2 Application: Macintosh (OS X)

These steps are to be repeated every time I start up our machine and want to work with my Angular 2 project. The “npm start” commands starts the “lite-server” (file server), runs the TSC (TypeScript Compiler) in watch mode and opens a browser window loading the Angular 2 Application.

  • Open VS Code (Visual Studio Code)
  • Open your Angular 2 project (in my case this project is called APM)
  • Right click on a file in the root of the folder and click Open in Terminal
  • Enter the following command:
     Mac:GitHub sion$ npm start

Angular 2: Quick Start Notes Part #1

These are my notes, made while watching Deborah Kurta’s Angular2: Getting Started course, hosted by Pluralsight. Most, if not all, of this information can be found within Deborah’s course, however by stripping this information out I hope to jog memories…

Tools & Setup: Macintosh (OS X)

How to use Visual Studio Code with GitHub:

Download and install:
1. Visual Source Code: https://code.visualstudio.com
2. Git: https://git-scm.com/download

Clone a Git:
1. Open a Terminal window and change the directory to the location you would like to save the folders and files, for example:

Mac:~ sion$ cd Documents/GitHub/
 Mac:GitHub sion$

2. Enter the following command:

Mac:GitHub sion$ git clone https://github.com/DeborahK/Angular2-GettingStarted.git

Once complete, open the folder with Visual Studio Code.

Commit changes:

  • From Visual Studio Code select Push
  • If VS Code does not prompt for login and password, open the Terminal in the context of the code:
    a. Select Explorer
    b. Right click on a file in the root of the folder and click Open in Terminal
    c. Enter the following command:

    Mac:GitHub sion$ git push

    d. Enter the Username and Password for your GitHub account
    e. Wait for the command to complete before restarting VS Code
    f. VS Code should now be able to Push without errors
    g. Optional: install a credential helper https://help.github.com/articles/caching-your-github-password-in-git/

More Information

https://code.visualstudio.com/docs/editor/versioncontrol
https://help.github.com/articles/caching-your-github-password-in-git/

Please see second post in this series for install and configure of the NPM (Node Package Manager) command line utility