Angular 2: Understand what you're copy and pasting!

I have seen few friends who were trying to learn Angular 2 from the ToH quick start and/or other sources and all they were doing to start was copying and pasting the first few files without knowing what really each one of them are and how to create them. Below we will go through these initial files and a quick description of each and how to create them.
Note 1: If you want to follow the instructions below, make sure that you create a directory and are inside the directory

MkDir angular2-firststeps
CD angular2-firststeps

Note 2: You need to have Node and NPM installed to be able to run the following commands.

1. Package.json
   * What is it? A package.json file contains meta data about your app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.
   * How to create it?

   npm init

   Answer all the questions and it will create your package.json file.
If you look at the created package.json file, you will see that it only includes basic information, now it's time to add dependencies. * How? by using

npm install -s YOURPACKAGES

npm install will create a new directory called Node_modules and then it will download all the defined packages into this directory. the "-s" option makes sure that these package names are saved in package.json file. Below is the command to use for adding angular and it's requirement to your package:

npm install -S @angular/common @angular/compiler @angular/core @angular/platform-browser
 @angular/platform-browser-dynamic es6-shim reflect-metadata rxjs@5.0.0-beta.12 zone.js

Run the command and check your file structure as well as content of the package.json... magic :D Note that the above packages and dependencies may/will change in the future and you have to change for angular dependencies at the time when you are executing these commands. OK, so we have our basic dependencies added, now it's time to add the development dependencies. What are dev dependencies? These are packages that are required during the development like typescript or typings and won't be needed when the application is running (in production) How to add them? the --save-dev means that these packages should be added to dev dependencies.

npm install --save-dev typings typescript tslint

</ br> Take a look at the scripts section of package.json file and have a play. We might go into details of that in another post.
2. typings.json *What is it? Many JavaScript libraries, such as jQuery, the Jasmine testing library, and Angular, extend the JavaScript environment with features and syntax that the TypeScript compiler doesn't recognize natively. When the compiler doesn't recognize something, it throws an error. The typescript definition (.d.ts) files are used to tell the compiler about these libraries that we load. Many libraries include definition files in their npm packages where both the TypeScript compiler and editors can find them. Angular is one such library so we don't need to add it's type definition file to our typings.json. This file is to list and install all the required typings for libraries without typings like jasmine. *How to create it? This command will create the empty file: (Note that we're using the typings tool which we installed as a dev dependency earlier)

   typings init

   and now to install different typing definitions:

   typings install dt~jasmine env~node --save --global

   
   * Check here for more information on available options for the typings tool.
3. tsconfig.json
   *What is it?
   This file is to guide the compileras it generates the javascript files from the .ts files. check here for complete list and description of this file and available options.

Add Bootstrap to your angular 2 app

So you want to give your application a little bit of style by adding Bootstrap to it? follow the steps below

1. Open your terminal/CMD/... and go the directory where your project is (Package.json is located)
2. Run NPM install bootstrap --save-dev  * the NPM install will download bootstrap and put it in the node_modules directory and the --save option will add this dependency to your package.json file. Have a look at it and compare it to the previous version to see what has changed in the file.
3.  Now you have the bootstrap downloaded, all you need to do is simply add a reference to it in your index.html

<button type="button" class="btn btn-lg btn-primary" routerLink="https" > Https & Services </button>
      4. Go and change any of your html elements to see the result i.e. :
      <button type="button" class="btn btn-lg btn-primary" routerLink="https" > Https & Services   </button>

* You may ask what's the difference between --save and --save-dev. Good question! the answer can be found here.

Have fun!