Comparing GDS and Power BI
June 6, 2021
Django Rest Framework
November 23, 2021
What is Angular? and Why is it being used?
Angular is a typescript framework used for building single-page web applications. It is a component-based, open-source platform that allows us to create elegant websites with top-notch navigation and routing capabilities. Maintained by the team at Google and enhanced by regular open-source contributors, Angular is used widely by developers.
Some characteristics that make Angular different from other frameworks:
• It is component-based and can be modularized.
• It has a collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more,
• It has an Ahead of Time (AOT) compiler that converts HTML and Typescript code into JavaScript during the build phase.
• Angular is packaged as a Component Dev Kit (CDK) and a Command Line Interface(CLI).
• It has Lazy loaded modules to reduce network and bandwidth usage.
Four Components that makes Angular an effective framework:
(1) Templates.
Templates in Angular are nothing but a piece of HTML code coupled in a Typescript file to build on Angular core features. Templates allow you to perform text interpolation which is dynamically rendering content on the browser tied to business logic. Templates also allow using Pipes to transform an input value to a customized output value. Some built-in pipes in Angular are DatePipe, UpperCasePipe, CurrencyPipe, DecimalPipe, and PercentPipe.
The most important features which templating allows are Property Binding and Event Binding. Property Binding helps us set values of different properties for HTML attributes and directives.
(2) Components.
Components are what fuel an Angular application and are the primary building blocks of the applications and consists of:
• A .html template file for rendering HTML on the browser.
• A .ts typescript file for writing the business logic.
• A .css CSS file that provides styling for the HTML.
• An optional test file for writing integration and unit tests.
There are 8 component life cycle methods that describe in which state a component resides at a particular time, namely, ‘ngOnChanges’, ‘ngOnInit’, ‘ngDoCheck’, ‘ngAfterContentInit’, ‘ngAfterContentChecked’, ‘ngAfterViewInit’, ‘ngAfterViewChecked’, and ‘ngOnDestroy’.
Components provide View Encapsulation that allows component features like CSS and TS functions to only affect the HTML defined in the component, this is done by either implementing a Shadow DOM or an Emulated View Encapsulation.
(3) Directives.
Directives are classes that add additional behaviour to elements in your Angular applications. Use Angular’s built-in directives to manage forms, lists, styles, and what users see.
Angular directives can be classified as follows:
• Component Directive – directives with a template. This type of directive is the most common directive type.
• Attribute Directive – directives that change the appearance or behavior of an element, component, or another directive.
• Structural Directive – directives that change the DOM layout by adding and removing DOM elements.
(4) Dependency Injection.
Dependency, as the name implies, is an object or service that a class needs to perform its function. A Dependency makes be a service created using the ‘ng generate service’ command or can be a class object created using ‘@injectable’ annotation.
The ‘@Injectable()’ decorator specifies that Angular can use this class in the DI system. To inject a dependency in a component’s constructor(), supply a constructor argument with the dependency type.
Apart from that Angular also provides added security like to systematically block XSS bugs, Angular treats all values as untrusted by default. Sanitization is the inspection of an untrusted value, turning it into a value that’s safe to insert into the DOM. In many cases, sanitization doesn’t change a value at all. Sanitization depends on context: a value that’s harmless in CSS is potentially dangerous in a URL.
Keeping in mind that Angular is provided as a framework it is safe to say that it is one of the modular and efficient frameworks out there to build clean and seamless applications that can be scaled with ease.
