Angular 2

Below are some useful commands to start with Angular 2.

First thing is to install Node and npm. It is recommended that you have node version 4.6.x or greater and npm version 3.x.x or greater to be install.

If we have Node and npm is already installed, just check version using below commands.

To check NodeJs Version

node -v

To check npm Version

npm -v

If Node is not installed, download using below link and Install

https://nodejs.org/en/download/

If we need to use VisualStudio to write the code, follow below steps to set the environment in VisualStudio.

1. In Visual Studio click on Tools - Options.

2. In the "Options" window, expand "Projects and Solutions" and select "External Web Tools"

3. In the right pane, move the global $(PATH) entry to be above the internal path $(DevEnvDir) entries. This tells Visual Studio to look for external tools (like npm) in the global path before the internal path.

4. Click "OK" to close the "Options" window and then restart Visual Studio for the changes to take effect

5. Download Latest Version of TypeScript and Instal. To develop Angular applications you need TypeScript 2.2.0 or later

6. Create Empty ASP.NET Web Application project

7. Download the "Quick Start Files" from the Angular web site.

https://github.com/angular/quickstart

8. Copy the required "Starter files" to the web application project, and include in Project

- bs-config.json

- package.json

- tslint.json

- src (Folder)

9. Restore the required packages. 

In the "Solution Explorer" right click on "package.json" file and select "Restore Packages" from the context menu. This takes a few minutes to load all the modules. You can see the status in "Visual Studio Output" window. After the restoration is complete, you will see a message "Installing Packages Complete". To see all the installed node modules, click on "Show all Files" icon in Solution Explorer. DO NOT include "node_modules" folder in the project.

10. Run the Porject using below command from Command Prompt

npm start

--------------------------------------------------------------------------------------------------------------------------------------------------

If we are using VisualStudio Code or some other editor to code for Angular Application, follow below steps.

After installation done, use below command to install Angular CLI globally on your machine 

npm install -g @angular/cli

To Create New Angular JS Application

ng new my-app

(here "new-app" is our application name, run above command from the directory where we need to create the project.)

To start the Application server

ng serve --open

We can also use below command to run the application.

npm start

Install bootstrap to your angular project

npm install ngx-bootstrap bootstrap --save

Create a New Angular Project

ng new AngTestApp --skip-tests true
- --skip-tests true, if we don't want testing components as of now

Create new Angular component

ng g c employees/listEmployees  --spec false --flat true

- g stands for generating, we can also write 'generate' instead of 'g'

- c stands for a component, we can also write 'component' instead of 'c'
- employees/listEmployees, to create 'listEmployees' Component inside 'employees' directory
- --spec false, will ask to not create the spec file for the component
- --flat true, Angular generally creates a separate directory for each component, this will say that not to create a separate directory for this component and create inside the 'employees' directory