Introduction to ANGULAR 5

In this article, I will make a brief introduction to angular and in coming articles; I will explain in detail more about application development along with samples on different topics using ANGULAR.
Following are the concepts which I am going to discuss in this article/blog related to ANGULAR.

1. What is Angular?
2. Why Angular?
3. Why not Traditional Page Application?
4. Development Environment Configuration

What is Angular?

Angular is an open source framework which is used to build reactive client-side applications provided by GOOGLE. Using this framework, we can create lightweight applications where multiple parts of view can be refreshed asynchronously without disturbing entire page. So ANGULAR can be considered as a good option for developing and building Single Page application for different devices like desktop, mobile, etc.…

Why ANGULAR?

Why angular now? We already have many frameworks using which we can create user-friendly applications with well-defined standards. So, is it required to develop an application using the ANGULAR framework? Well, here are some important features which ANGULAR provides which not only make our work straight and straightforward but also provide features of other existing frameworks.

1. Using angular, we can internally implement other frameworks like MVC. If we need to implement MVC framework for our application, we may need to create components for an app and write code for making these components communicate with each other. But in ANGULAR we simply need to develop components for app and ANGULAR does the rest.
2. HTML is used in ANGULAR for defining the user interface. Since it is declarative language, it will be much easier for developers/designers to reorganize the entities. This declarative approach will make application simpler to understand.
3. In ANGULAR we can provide additional functionality to HTML using a concept called DIRECTIVES. Also using DIRECTIVES, we can create our HTML elements.
4. ANGULAR helps in achieving the same functionalities what we can develop in other technologies with very less code.
5. ANGULAR internally implements DEPENDENCY INJECTION which works well for testing and building single page applications.
6. Since ANGULAR supports caching and many other processes, it reduces the burden on servers and thereby increase server performance.

Besides these reasons, there are many other advantages as listed below which will make ANGULAR a once of the best framework for building applications.

ANGULAR Advantages

1. Can build smaller & faster applications.
2. Modular Approach – It helps in building an application with a clear structure.
3. Use of components feature will help in creating lots of re-usable code.
4. Quicker development using inbuilt features such as routing, validations, etc.
5. Built Optimizer – ANGULAR comes with build optimizer tools using which we can make application lighter and faster by removing unnecessary runtime code.
6. Improved compiler and Typescript

So where exactly we need to choose ANGULAR framework?
Any application which relies heavily on JavaScript can go with the ANGULAR framework.
Why not Traditional Page Application?
In traditional page applications, 80% of the load relies on server side like “Business Logic,” “HTML Generation” & Database manipulations. But coming to Single Page Applications, using the framework like ANGULAR we can reduce the burden on the server by handling 80% of the load on the client side using features provided by ANGULAR.

History of ANGULAR

The angular framework is first introduced in the year 2010 October with Version name as Angular JS, and the first stable version of ANGULAR JS got launched in the year 2012 June.
Later in the year, 2016 GOOGLE has introduced ANGULAR 2 which is not an upgraded version of Angular JS. Google has wholly rewritten lots of features of Angular JS which are used to develop big and complicated applications. Taking this as a reference providing backward compatibility GOOGLE has upgraded version of ANGULAR from ANGULAR 2 to latest version ANGULAR 5.
From ANGULAR 2 and above this framework is implemented as Component-based UI where Controllers are replaced with Components.

Development Environment Configuration

To configure development environment for building ANGULAR applications, we need to install following entities

• Node
• NPM (Node Package Manager)
• Angular CLI (Command Line Interface)
• Text Editor (Visual Studio Code)

Steps to configure development environment

1. Initially, we need to install Node LTS (Latest Table release). Navigate to the following URL https://nodejs.org/en/ where you can download the latest release (8.9.4 LTS) as shown below and install downloaded the setup file. This version may change in later releases. While installing Node along with that NPM (Node Package Manager) will get installed.
    

   

2. Once the downloaded file successfully installed you can verify the version of Node & NPM using command prompt as shown below.
    

   

3. Now we have both NODE & NPM installed, and our next step is to install ANGULAR CLI (Command Line Interface).
    
4. You can install ANGULAR CLI using following command from command prompt.npm install -g @angular/cli
   Above command will install ANGULAR CLI at the global level.
    

   

5. After successful installation, you can check the latest version number of CLI using command ng -v
   The following screen should be displayed in command prompt which confirms that CLI is successfully installed.
    

   

6. Now it’s time to install the Text editor. In this article or next coming articles, I will use “Visual Studio Code” as a Text editor. Based on your available you guys can go with other text editors as well.
    
7. The latest version of “Visual Studio Code” can be downloaded from following website https://code.visualstudio.com
    

   

   Based on your operating system you can download any of the above-listed files from the website.
    
8. Now we have all components configured to start our development with angular.

Conclusion

With this, we have come to know the basic introduction of Angular and its version history. Also, we have configured the development environment. In my next article, I will show how to create a primary angular application using Visual Studio Code.
Bhaskar Praveen Takasi – Module Lead @YASH Technologies

• Angular
• Angular 5
• open source framework
• What is Angular