Sunday, 26 July 2020

Angular Building Blocks

Angular  Basics

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Module
The angular app has its own modularity system called the Angular Module of NgModule . Every Angular app has at least one module known as root module.

Component
The component is a controller class that encapsulates the view and the logic. The component class interacts with the view using the built-in API’s.

Template
The component’s view can be defined by templates. Templates are HTML’s that controls how things should be structured on the screen.

Metadata
Metadata is data about data. In Angular, metadata informs the Angular run time on how to process a class. The class case is the @Component decorator which identifies the class immediately below it as the component class.

Directives
A Directive is a class with @Directive decorator. So, technically a component is a directive with a template. There are two types of directives. Structural and Attribute directive.

Data Binding
Data binding binds the template and its component with the required data. So, we have interpolation, property binding, event binding and two-way binding (ngModel directive)

Services
Services are JavaScript functions designed to do specific tasks. It is a class that can perform certain activities like logging, data service, caching, configuration, etc. There is no service base class but it is one of the fundamental aspects of Angular Apps.

Dependency Injection
DI is a way to supply the instance of a class with fully form dependencies to other class/components. It’s one of the core features which keeps your angular apps loosely coupled.




Single Page Application

What is SPA (Single Page Application) 

A single-page application (SPA) is a web application or website that interacts with the web browser by dynamically rewriting the needed part of page  with new data from the web server, instead of the default method of the browser loading entire new pages

Advantages of SPAs and the Key Concept About How They Work
  • We will be able to bring a much-improved experience to the user
  • The application will feel faster because less bandwidth is being used, and no full page refreshes are occurring as the user navigates through the application
  • The application will be much easier to deploy in production, at least certainly the client part: all we need is a static server to serve a minimum of 3 files: our single page index.html, a CSS bundle, and a Javascript bundle.
  • We can also split the bundles into multiple parts if needed using code splitting.
  • The frontend part of the application is very simple to version in production, allowing for simplified deployment and rollbacks to previous version of the frontend if needed
Some of SPA Examples

SPA Frameworks and Details


Drawbacks of Single Page Application Architecture