A Brief Overview of The Angular Framework

Posted By : Tushar Srivastava | 19-May-2020

Angular In The Real World

Angular is a popular JavaScript framework that is used for building cross-platform web applications. With the backing of a huge company like Google, AngularJS app development services are increasingly in demand these days. In this blog post, we will explore the main features of Angular.

Angular is a free software, so there is no perfect usage statistics - however, there are several places we can look to get a good idea. Angular has over 32,000 stars on GitHub and 1 million-plus npm downloads per month at the time of coding.

Angular Core Concepts

1) TypeScript

TypeScript is a typed set of JavaScript that compiles to be plain JavaScript. It brings structuring and static typing to JavaScript. It is intended to help build large and complex web applications and is often picked by corporate groups. It's very familiar to netizens in a development environment, and many Java developers also like because it's a statically typed language and likes to pick this up on the client-side of things.

2) Components

You have a component tree going from that root to everything on which we have to work with out-of-the-box from Angular. There are some other part of Angular that aren't components, but much of what we as developers write deals specifically with components: Data starts through an input property, and go out through an output property.
example:-

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{hero}}</h2>
`
});

export class AppComponent {
title = 'Tour ';
hero = 'Shaktiman';
}

3) Dependency Injection

To understand the concept of dependency injection, let's take an example. In the example below, we have a class, vehicle, that has an color, window, and a description. Then, in the constructor, when this gets initialized, we have this.color equals new Color, and this.window equals new Window. Every single time that we create a new vehicle, we are creating its own copy of color and window.

This is kind of brittle, however. What if the color or window need changing, and what if we want to have a different set of window on the vehicle, or what if we want to have a slightly different color in each individual vehicle? We can't really do that because we're constantly creating a new version of color and a new version of window here in this constructor without being able to change that. We would more or less have to create a bunch of different vehicle classes with these different color. There's no flexibility in customizing a vehicle, color, or a window at any point throughout this kind of setup.

export class Vehicle {
public description = 'discription';
constructor(public color: Color, public window: Window) { }
}

Now we're consuming color and window, not necessarily creating them. This allows us to pass in instances.

let vehicle = new Vehicle(new Engine(), new Tires());