Detailed Intro to Angular

In this tutorial, we are going to learn how to create a small demo app using angular and you are going to explore basic concepts of angular.

A Brief History:

Angular developed and maintained by Google. Angular 1.x version is called AngularJS, that has been rewritten and called as “angular” from version 2.

Environment setup

Download Node.js from https://nodejs.org/en/download/Install node 8.x or greater version to execute CLI without error. To install Angular CLI – npm install -g @angular/cli. In this tutorial, I am using visual studio code editor.

To Create a New App

To create a new project – ng new my-app name to run the app cd my-app ng serve –open

Now, You have created your first App. we will explore the app.component.html, app.component.ts, app.module.ts by exploring the basic blocks of angular.

Angular basic building block -components:

Components are like classes in java programming. Its basic building block of the angular app. There will be one root component and the app will contain many components as per the requirement. In the above project, app.component.ts represent the component.

Angular modules:

The main blocks of angular are components, directives, pipes, services and these are grouped together as modules. Angular Modules are like java packages and the classes inside the packages can be accessed by importing the package. The same concept can be used to understand the angular modules. In the above project, app.module.ts represent the module.

Why angular has been developed?

Let’s see the below small demo using angular and without angular.

This is a demo, we are going to do without using angular and using angular.

without using angular

In the above example code, for every key entered you are calling the function “getValue()” and updating the DOM for populating value content dynamically.

Using angular

app.component.html

app.component.ts

With this example, you can write less code to achieve great in angular. Also, this demo is having only one text box and we have written one function in the code without using angular. but for more functionalities, you have to write more code without using angular.

You can build Single Page application in angular. In the traditional web applications, the entire page will be reloaded for the request. So, every time the DOM update will happen. But in angular, it will process the DOM and only the part of the application will be reloaded.

Conclusion:

With Angular, the static HTML code gets the dynamic power and the DOM update is handled by the framework. So, with less code, you can create a single page modern web/mobile application.