Introducing The Terminology Of Angular

Before I start introducing the terminology of Angular 2, I would like to say we should never state it as “Angular 2”, it is just Angular. There is a big debate going on in community groups. Angular is the most sought framework for web development in the software development industry.

The developers who worked earlier on Angular 1.x, they must be quite familiar with the syntax they used to write the code.

The good news for developers who are new to Angular is that they can learn Angular easily because Angular has no legacy syntax of Angular 1.x.

Angular is a single page application framework to create single page applications (SPA).

• What is single page application?
• How does traditional web app work?

We use a browser to access the internet. The application connects to the Server that holds our database connection and the data along with the source of rendering the website.

When you perform any activity on the browser, the client (your browser) sends a request to the server and server handles this request to send back the response (It contains HTML code too).

So, whenever you change your route, i.e., move from one page to another, a request goes to the server and server sends the HTML response back with the required data.

Sometimes, even if we do not need to manipulate data, the request goes to the server and server sends only HTML in response.

• Multiple calls to the server ==== Lot of time consumption (slow execution).
• Fewer calls to the server == Less time (fast execution).
• Technology is intended to make our lives faster. No one wants to wait. Fast, fast, and fast.

In single page applications, we don’t make calls to the server every time (on every action) but whenever any database related work is needed, then only a server call is made by the client and this makes our application relatively faster. So, we leave the server out if we do not need any data from it. We do not need to wait for a response every time.

We request the server asynchronously which makes our application fast. This way, we prevent multiple server calls and this, in turn, makes the end user/client happy. Our JavaScript code on client side handles routing on the browser.

Let's set up an Angular project.

We will use Angular CLI to set up our Angular project. So, the first thing that we need to have in our development environment is NodeJS. Ideally, NodeJS is a server-side scripting language which is not required in the client-side applications but we need it.

Huhhhhh? Why? We need it because node package manager is required. We will use this package manager to install the packages on the client side.

Go to https://nodejs.org/en/

Let's install the latest version of Node, i.e., v9.1.0. right now. We will always install the recommended one for building the project because the latest featured one is never stable. You can try the current one too for your learning.

Now, I will walk you through the installation process on a Windows machine. Open your Administrative mode and run the following.

Go to your working directory and create a folder, like I opened my F: drive and made a folder AngularProject. Open cmd in Administrative mode and execute the commands specified below.

npm install -g npm

npm install -g @angular/cli

The above commands will install Angular CLI and you can use it globally on your system. Your Angular CLI is ready. Now, let us set up the project. 

Goto your project directory and open your terminal. Then, run the following command.

ng new PoetryRead

Your project will be created using this CLI command. Here is the project folder.

Run the project using the following command.

E:\Project\PoetryRead>ng serve

Now, go to your browser and type “localhost:4200” in the address bar.

And, that's it. Here is the project running. Let's explore more in the next article.