Contents :
Learn Angular - Part 1 (Node and Typescript)
In the previous article we went through what is Angular and what are the pre-requisites to learn Angular. In this article we will understand the first pre-requisite Node.
NodeJS is an open source JavaScript framework which does two things: -
★Learn but do not over learn. NodeJS is a big topic by itself. For Angular we just need to know how to use NPM commands. So we will be limiting ourselves only around how to use NPM. We will not be doing full-fledged node programming. Remember Javascript is vast do not do unnecessary learning you will loose focus.
In order to install NodeJS goto https://nodejs.org/ and download the latest version and install it.
 |
Once you install node you should see NodeJs command prompt in your program files as shown in the figure. We can then open the NodeJS command prompt and fire NPM commands inside this command prompt. In case you are completely new to NodeJS please see this NodeJS Video which explains NodeJS in more details. |
|
So let’s practice the first command in NPM "npm install". "npm install" command helps you get the latest version of any javascript opensource framework. For example if you want to install jquery you will open node command prompt and type "npm install jquery" and once you press enter you should see "jquery" has been installed in your computer. |
 |
|
Are you wondering where has Jquery been installed. It has been installed in the same folder where you ran the NPM command. In that folder he has created a "node_modules" folder and in that he has created "jquery" folder where all Jquery had been loaded by "npm". |
 |
When you work with large projects you would need lot of JavaScript frameworks. So in one project you would probably need jquery , angular , lodash and so on. Doing "npm install" again and again is definitely wasting precious time of your life.So to load all javascript framework references in one go "npm" team has given a package.json. In this package.json file you can make an entry to all javascript references and load them in one go.
To create package.json file open the node command prompt and type "npm init". After "npm init" command it would ask for package name , version number , project description and so on. Once you fill all the question it will create a package.json file in your current folder. Below is how "npm init" command looks like.
Once npm init command has been successfully executed it creates a "package.json" file in the current folder. If you open "package.json" file it has the following below structure.
Do not overload yourself with all the information just zoom on the "dependencies" node. This node has all JavaScript dependencies listed out with version number. So in our package.json file we have all the dependencies listed down.
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "MyClass.js",
"dependencies": {
"angular": "^1.6.5",
"jquery": "^3.2.1",
"knockout": "^3.4.2",
"lodash": "~4.17.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
|
Wherever "package.json" file is created you just need to type "npm install" command as shown in the figure. If you remember in package.json file we had 3 JavaScript framework dependencies listed those will be installed one after another. You can see in the image its stating "added 3 packages". |
 |
★Learn but do not over learn. Package.json has lot of configuration do not spend your stamina in learning all those. As we do the labs ahead I will be walking through important ones. So keep moving ahead with the chapters.
Most software versions follow semantic versioning. In semantic versioning versions are divided in to three numbers as shown in the image below.
|
The first number is termed as "major version" , second "minor version" and third "revision". Major version: - Any increment in major version is an indication that there are breaking changes in the software functionality. It’s very much possible that the old code will not work with these changes and have to be tested properly. Minor version: - This version is incremented when we add new features but the old code still works. Revision:- This version is incremented when we are just doing bug fixes. So there are no new functionalities added, no breaking changes and back ward compatible with old code . |
 |
|
NPM follows semantic versioning but it also has some more special characters like "^", "~", ">" and so on. They dictate how NPM get latest should behave for Major and Minor versions. For these formats 3 formats are very primary let’s understand each them. Exact (1.6.5) , Major/Minor ( ^1.6.5) or Minor(~1.6.5). |
 |
|
Exact (1.6.5): - This will do a get latest of exact version 1.6.5 not more or not less. If that version is not available it will throw up an exception. Major/Minor(^1.6.5): - The carrot sign will get minimum 1.6.5 and if there are any higher MINOR / REVISION versions it will get that. It WILL NEVER GET HIGHER MAJOR VERSIONS. So if 1.6.5 has 1.6.7 it will get that, if it has 1.7.7 it will that , but if it as 2.0 it will NOT get that. Minimum or lower (~1.6.5): - The tilde sign will get HIGHER REVISIONS. For if 1.6.5 has 1.6.7 it will get that , but if it has 1.7.5 it will not be installed , if it has 2.0 it will not be installed. |
 |
As discussed in the previous sections package.json has "^" and "~" versioning mechanism. Now suppose in your package.json you have mentioned "jquery": "^3.1.0"and Jquery has a new version "3.2.1". So in actual it will install or in other words LOCK DOWN to "3.2.1".
So in package.json you will have "^3.1.0" but actually you will be using "3.2.1". This entry of actual version is present in "package-lock.json". So package lock files have the EXACT versions which are used in your code.
Below is the image snapshot of both the files.
NPM has huge command list. But here are some very important command which you will need now and then. As said previously Learn but do not over Learn.
| Command | Explanation |
| npm install -g typescript | The -g command will install the package globally. In other words in your computer when you use this package it will take the global installation. This should be used only for command lines packages like grunt , typescript, npm and so on. |
| npm install -save jquery | This will install the package and also make a entry in to the package.json file. Some time we are use a package in our project and forget to update package.json this comes very handy. |
|
npm view -version jquery |
This first command will show you latest Jquery version on github and the second one will show all version in a ascending manner. |
| npm install -g npm | This command updates npm himself. "-g" as discussed in previously helps to install npm globally. |
In the next article we will look in to next pre-requisite typescript.
