Prerequisite & First Angular 2 App

Introduction to Angular 2.0

Angular 2.0 mainly focused on the following points :

• Removal of most of the modules for resulting better performance
• Google focused on mobile development with better performance.
• Angular 1.0 is a module based framework.
• Angular 2.0 is a component based framework.
• Removal of controllers and $scope had been taken place in this version.
• Angular 2.0 is dependent on the typescript language.
• The components in this framework is over or against to the controllers to the earlier version.
• Note came from the angular is that this updated framework is meant for the better result in performance also for getting better result in the event handling.
• The angular team also stated as like this updated framework is going to set for the mobile device level web applications.

Pre-requisites to work on angular 2

The following steps makes us to get the platform to work on angular 2:

a)Installation of Node Package Manager(NPM)

b)Confirmation of installations

c)Installing angular CLI

d)Editor to work/code

a)Installation of Node Package Manager(NPM) :

Node Package Manager is the one that which holds large/ huge packages and dependencies that which are used in Node.JS (A framework which is used to run on server side by using javascript)

Visit the link https://nodejs.org/en/  , there we will find the direct download options with 2 sets like one is LTS(Long Term Support) and the other as current version(latest version). Download any of the one and install in your machine.

The Node package manager will gets installed automatically as soon as we get installed with the node.js. NPM is like a package manager to node.js file.

b)Confirmation of installations  :

After getting installed Node Js, for getting confirmed regarding the installation succeeded or failed, use the command npm version in your command prompt(run -> cmd). The result of the command will be with the information of version of your installed node as like below image.

We can also confirm by using the following commands too:

To get the version of node use the command “node -v” in command prompt similarly, to get the version of the version of the node package manager use the command “npm –v” in command prompt as like below screenshot :

c)Installing angular CLI :

After getting installed with Node Package Manager, it’s time to install the angular CLI.Run the following command in your command prompt :

npm install –g @angular/cli

What is angular CLI ?

CLI tends to command Line Interface, by using this interface(angular cli) we can get the required dependencies or components or services or project level structure in an automated way.

d)Editor to work/code :

We can go ahead with any kind of editors as like we use for our mark up languages like notepad++,  atom, sublime, Visual studio code…etc. In my articles I’m going to use the visual studio code as my editor.

You can get downloaded the visual studio code from the followed link : https://code.visualstudio.com/download

By the above steps we are everything  up to installation part setup in our machine. Now, Let's move for creating our first angular 2 application step by step.

First Angular 2 Application :

Step 1 : Create a folder with a name in your any of drive.
I had created by naming as “DemoApp”.

Step 2 : Open command prompt and change the path to your newly created folder. In my case I had to navigate as follows :

Step 3 : Now, we need to create our project structure within our folder. To create the structure we need to go with the command “ng new MyApp” (Note: Myapp is name of my application).

Note : After you hit the command the it prompts with the message as like “Installing packages for tooling via npm” as like below.

At this stage it takes some time to complete the installing packages. So we need to wait for a while until we get the message as like “project  MyApp successfully created.” (Note: myapp is name of my application). It indicates that our application structure has been installed with required packages successfully.

The successful application creation alert/message in the command prompt will be like below shown image:

Step 4 : After getting the above message, once open your folder which is created newly(my folder is DemoApp). We'll find a new application named "MyApp" created by our previous command line "ng new MyApp". Looks like below image.

Now, on opening the folder "MyApp", we'll find the files as like below :

By the above, Everything was messed/set up to work with angular application. Now, Directly we can run application by starting the server. Before that let me open the code in my visual code.

Select our application folder which is created by using ng new appname command.

After opening our application in visual code, we can have a well organized folder structure which was done by our ng. Here, make sure we have the package.json(I'll discuss later about the importance of this file) file in the project structure. It will be looking like below image.

Also, have a look over the below highlighted pages which I'll describe in my later articles.

Executing our application :

An important thing to be done,Before going to the execution part our "MyApp". It's needed to install the node package manager to our application level wise by using the command "npm install".

Make sure you are in exact path, where we created the application(In my case "MyApp") as like below :

Now we are done with the needs require to execute our "MyApp". To get executed, we needs to give a start to the server from the command prompt by using the command ng serve --open

After hitting the command, it gives us a message like "webpack: compiled successfully" also we can find another message like Development server is listening to the "localhost:4200" which treats as default port number with its concern URL as http://localhost:4200/ . Also, it opens a browser and shows us the result(default code output which renders from app.component.html) as like below.

Here, the rendered page mark up code comes from the aMyApp > src > app > pp.component.html

Note : we can also change the default port number(4200) and run the application by using the command "ng serve --port 4402 --open"

So that, we will get the port number as 4402.

In my upcoming articles I'll explain in detail about each and every file.