What to expect from this blog

Welcome to learning Angular. The tutorial consists of practical set of concepts in Angular. Often, I hear developers saying Angular is too hard to learn and implement. In this blog, I will try to present the concepts in as simple manner as possible. I assume mixing too much theory with practical examples won’t make much sense here. While this may be great for someone at beginner/intermediate level looking for concepts with live example and their corresponding output, but it may not serve those who are looking for pure theoretical concepts.

Why Angular

Angular is a powerful open-source front-end framework that helps to build interactive UI. It was developed by Google back in 2010 and started with Version 1.0 and evolved till the latest version 9..

Below are the range of features provided by Angular but what I find the most important is the support for Typescript.

TypeScript

Typescript is the superset of JavaScript. Meaning you can use Object oriented syntax in type script and that code will be converted to JavaScript by the Node package manager. Using OOPs in JavaScript was a tedious task. Hence Typescript was introduced with an essence of OOPs feature. We will learn more on this in our upcoming tutorials and see how we can use the powerful features of Typescript in our Angular application.

Separation of Concern

The most important thing for any application is the separation of Concern and it goes by the implementation of Models-View-Presenter(MVP), Model-View-Controller(MVC), Model-View-View-Model (MVVM). Hence Angular support separation of concern and we can implement Model-View-Component/Presenter/etc so we can achieve the process of binding the input controls and it can be unit testable. In short the process of binding between javascript and UI object has been simplified in Angular. A component has a module file in typescript and view file in html.

Routing

Angular provides inbuilt module navigation support using Routing. It helps us to define Routes on controls to navigate from one place to another.

Unit-Testing

Since Angular has already provided Separation of concern, hence unit testing of individual layer is extremely simple.

Dependency Injection

The dependency in any application is the central part of the system which provides functionality to their subordinates by a connection mechanism. Angular provides separate way of implementing dependency injection by a separate providers collection in the module.

Lazy Loading

The performance of web application increases when the necessary resources are loaded only when they are requested. Angular provides a simplified way to so by grouping the component and modules file and route them together.

POJO (Plain Old Javascript Object)

It can be thought of as an object with key-value pair and often needed to validate data when working with complex datasets. POJO is an object whose prototype is Object.prototype.

In our upcoming tutorials, we will see all the above features in action by implementing a small real-world example to help understand these concepts better. You can think of each modules as small dots when connected together paves a way to enterprise level application with enhanced UI and increased performance.