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());
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Tushar Srivastava
Tushar is software developer, He believes in hard work and loves to learn new technologies.