Learning Angular 2 for newbie – Part 1

Ahteshamax
Posted by in Angular 2 category on for Beginner level | Points: 250 | Views : 1206 red flag

This article is part 1 and will be covering all the essentials download and installation before we start working on Angular 2 .

“Learning Angular 2 for newbie” will comprise with series of articleswhich is completely focused and created by keeping a fresher in mind. Article is going to be divided part wise and will be uploaded in sequentially so that reader find it handy to learn. It is going to be completely practical with less theory in it but will have all the elements for a newbie to learn Angular 2 practically.

This article is part 1 and will be covering all the essentials download and installation before we start working on Angular 2 i.e. we will setup an Angular 2 development environment.

We will start from where to get downloads and do its installation in our system. So very first we will start with download of Visual Code which is nothing but a code editor.We will create our article series using Visual Code. It is not an IDE it unlike we have in Visual Studio IDE for C# and Eclipse IDE used for create Java.

Download Visual Studio code

First download Visual Studio Code setup from online. For that type text “”visual studio code download” on google.com as shown in the image down below.

Please download installation file from reliable source as shown in the image shown below. Here we have selected first link https://code.visualstudio.com/download which is from visualstudio.com site.


After opening the link you will land with three downloading option for Visual Studio code. Here select first option of Windows which will download setup as per working best with Windows operating system. This selection has been chosen because we are going to complete article using Windows OS. If you have different OS select accordingly from the given three options below.


Once you click on Windows icon it will download its installer on your local system.


Go to the location and do a double click on the “VSCodeSetup-1.8.1” installer where it has been downloaded as shown in the image down below. Before the installation starts it will prompt with security warning window on which we have click on “Run".


Now setup screen will open where we have to follow the screen just by doing next -next after clicking on necessary selection or provide details as per the screen. With this you will complete installation process of VS Code.


Download and InstallNode.js

After you have successfully completed the installation process of VS Code next essential requirement for Angular 2 is to download Node.js.

For that, go to google.com and type text “node.js download” on search box. Again be cautious while downloading stuffs from internet always recommending you to select download from reliable resource. As shown in the image down below we have selected very first link from “nodejs.org”


Node.js has support for all major operating system like Macintosh, Linux and Windows. Choose installer carefully download as per your operating system. Here we have selected Windows installer as our operating system is Windows 10.


After the installer is downloaded unlike as we did to install VS Code double click the installer with name “node-v6.9.4-x64”.

Please Note:This is the latest version of the node.js at the time when article is being written.


Once the node.js installation screen is open just provide information as required then follow the screen and click on “Next” and finish set-up.


TypeScript Installation

Next part of the installation is to do TypeScript installation using Node-js command prompt. For that on Start Menu program go to and select “Node-js command prompt” which will open command prompt of Node-js. And please note that command prompt is open under Node-js environmenton that type the following command. Here in the command line where “–g” means globally installation of TypeScript will be done i.e. it will be accessed by every profile of the system on which it is being installed.

npm install –g typescript

Thereafter installation will be done successfully if no error occurs as shown in the image down below.


Next go and open Visual Studio Code from Start menu of the system which will open Visual Studio as shown in the image down below.

Under Visual Studio,now to create a fresh new project, just do it by clicking on “Open Folder” in Explorer side bar. In case you do not find Explorer open then go to View option under Menu bar and under it click on “Explorer” or click first icon given on Activity bar which is the strip with icons on extreme left as shown in the image down below.


To create project in Angular 2 next thing is to download four important JSON files. So here are the file names

  1. package.json,
  2. systemjs.config.js,
  3. tsconfig.json and
  4. typings.json.

Below image is the Explorer view and Folder view of those files. You might be thinking why these JSON files are used. Each file has its own purpose because which they are used in the project ?


Below is the snapshot for each file shown under VS code.

package.json

This JSON file has the references of all the Angular 2 modules installed. Node.js will use this file to download all the Angular modular files.


system.config.js

system.config.jsis defined and has a configuration JSON file which has system.js module loader.


tsconfig.json

It is a configuration JSON file used by TypeScript in order to define how transpiling process takes place in TypeScript.


typing.json

Typescript is a new language which some of the old JS frameworks does not support or cannot be consumed in TypeScript. For those frameworks in order to make the work with TypeScript we need to define the typing.json.


Install Node Modules

If you see properly package.jsonfile or above shown package.json image in it has many files names included which are necessary to create Angular 2 project. In order to install them we have run

“npm install” 

on Node.js command prompt. Once the command prompt window is open go to the project folder by copying the path as shown in the image down below then pasting it on the command prompt.


After you run the command “npm install” you will find in the project folder “node_modules” created as shown in the image down below.


Configure Task runner

In order to build our solution we need to configure Task runner using GRUNT or GULP. Press ctrl+shift+B on keyboard which will open following pop-up on top of Visual Studio Code


Select the Task Runner, here we have selected “Grunt” task


It will create .vscode folder with tasks.json file within the main project folder. Next is to edit the task.jsonfile and configure it to run build of TypeScript.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p","."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}


Once the configuration is done now click on “ctrl+shift+B” on the keyboard you will find at the bottom this symbol “/” revolving which states that project is being “Build”. If it is “Build” with errors or warning then no. of errors or warning will be shown or else it will Build the application successful.


And the “TypeScript” file with extension will be compiled or it will generate .js and .map which internally used by Angular2. Now we are set with the environment to get started with Angular2 project.

In the next part of the article we will cover how to create an organized project structure even before we start Angular2 project.

If you are the one who loves and would like to learn technology in videos form then below is one fine video of Angular 2 to start with: -

Page copy protected against web site content infringement by Copyscape

About the Author

Ahteshamax
Full Name: Ahtesham Shaikh
Member Level: Bronze
Member Status: Member
Member Since: 10/3/2016 2:36:04 AM
Country: India
Ahtesham Shaikh
http://www.learnmsbitutorials.net/
Hey Friends, Myself Ahtesham a coder, writer & technical supporter for IT world and for my company Questpond. Having 10+ years of experience in microsoft technologies like WCF, WPF, MVC, Sharepoint, AngularJS, MSBI, Excel 2000 - 2013, Powerpoint, C#, SQL Server and so on. I just find myself happy and satisfy by doing this job. Apart from profession love reading novels and other digital network books. I'm a faculty at Questpond and do take trainings on c#, object oriented programming, msbi, sharepoint, mvc, mvc, angularJS and so on. Feel free get in touch me for one-to-one trainings, offline trainings @Andheri Mumbai, Online training via microsoft live meeting.

Login to vote for this post.

Comments or Responses

Posted by: Mohit632 on: 3/23/2017 | Points: 25
First of all, thanks for writing this post.
I tried installing the js files using npm install but I could not as package.json file was missing. I tried several other commands to see if package.json gets created automatically.
In the end, I just copied and pasted the package.json file from nodejs folder where nodejs was installed.
Is there any other way to do it?
Also, from where do we download remaining js files ( system.config.js) etc.

Login to post response

Comment using Facebook(Author doesn't get notification)