Skip to main content

Building Block of Angular

The main building blocks for Angular are modules, components, templates, metadata, data binding, directives, services, and dependency injection.


Below mentioned are the main building blocks of an Angular application: -

Modules group components logically within the project. Angular basically is a modular framework where every block of functionality is encapsulated within a module and exposed outside within the project as a service. There are two types of modules one is encapsulating block of function within a single component and the other is encapsulating block of function within single or group of components by providing exposure in a unified manner via an interface.

Components help in controlling UI block and also it provides data and logic. It represents a unique "View" and "View Model" in MVVM pattern or exactly like what Controllers do in Angular 1. The "View" or Template shows how the complete component will look–like when displayed on the browser. "View Model" has all required logic parts in order to provide "View" with rich functionality and data. The Styles provide the component with a specific look and feel while Metadata ensures connectivity of everything together. Please note that Component Styles are only applied and are limited to the Components only. Along with Template and Metadata, it builds a complete encapsulated & isolated UI unit.

Templates represent a view with syntax in order to improve HTML with Angular functionality like data binding. They simply extend HTML with new syntax and add behavior to it so that interpolation, two-way Databinding can be achieved.

Metadata helps in connecting everything together, a "View" with a "View Model" with Styles. Metadata along with its tag and attributes are responsible to tell Angular that a simple class can become a component when it is decorated by a component decorator. The Component decorator includes a bundle of metadata along with the class which guides Angular how to work and process it in your application at the time of runtime. Some of the Metadata are as follows: -

  1. selector is Metadata which tells Angular which of the custom HTML to be included with the component,
  2. templateURL is the exclusive URL for the template to be used when processing the component,
  3. an array of directives with this kind of Metadata it will tell Angular which other Component(s) or the directives should be included in that component,
  4. an array of styleURLs with this type of Metadata you can easily define customized styles for the component
  5. and with this Metadata an array of providers tells Angular how to inject dependencies (like services we have) in a component or @RouterConfig that helps you to configure routing in your project application.

Databinding helps you to bind data and server interaction between Template and Component building block in a declarative manner. There various types of Databinding available in Angular are interpolation, property binding, event binding, one-way and two-way binding.

Services simply help in making reuse of service. As project becomes bigger naturally more components will add to it and which also will require data to access. So every time making a copy-paste of code it will create single reusable (singleton) data service.

Directives basically command Angular how it has to process DOM. By nature, they are classes which are decorated with the @Directive decorator. There are three types of Directives present in Angular2 –

  1. Components Directive is a unique type of directive which is involved along with Template.
  2. Structural Directive is like *ngFor and *ngIf which enables you to make changes to DOM with the help of adding or by removing nodes.
  3. Attribute Directive helps in adding behavior or do a change in the look or appearance of a specific element just like ngmodel directive which implements two-way data binding is an Attribute Directive.

There are other built-in Directives like ngClass, ngStyle and ngSwitch.

Dependency Injection to inject the necessary dependencies for a given component/service at runtime and provide flexibility, extensibility, and testability to the framework and your application.


Comments

Post a Comment

Popular

DOM(Document Object Model) and BOM(Browser Object Model)

DOM(Document Object Model) The DOM is the Document Object Model, which deals with the document, the HTML elements themselves, It organize the elements of the document in tree structure (DOM tree) and in the DOM tree, all elements of the document are defined as objects (tree nodes) which have properties and methods.When a web page is loaded, the browser creates a DOM tree for all the objects (Html elements) of that page. e.g. document and all traversal you would do in it, events, etc. A Simple DOM Tree BOM(Browser Object Model) The BOM is the Browser Object Model, which deals with browser components aside from the document,like history, location, navigator and screen (as well as some others that vary by browser). The Browser Object Model (BOM) in JavaScript includes the properties and methods for JavaScript to interact with the web browser. BOM provides you with window object, for example, to show the width and height of the window. It also includes the window.scre
Post a Comment
Read more

JavaScript type hoisting with variable function Expression

JavaScript type hoisting with variable function Expression Hoisting is JavaScript default behavior to moving declaration on the top. Variable can be used before its declaration. To understand this, first we need to understand of hoist meaning, hoist means “raise(something) by means of ropes & pulleys”. now we can relate hoisting with JavaScript. JavaScript interpreter moves all declaration on the top at runtime. It is best practice to declare all variable at the top of their respective scopes. , JavaScript is loosely syntax language so it will not throw any error at runtime if the variable used before its declaration. But JavaScript does not allow variable used before its declaration in “use strict” mode. Example 1 In this example, we can see in a normal scenario, when y has declared & then used. in this case, it will give output 10 as excepted. <p id= "demo" ></p> <script> var y; //Declare y y = 10 ;
4 comments
Read more

Life cycle hook

In Angular, every component has a life-cycle, a number of different stages it goes through. Creates the component Renders the component Creates and renders the component children Checks when the component data-bound properties change, and  Destroys the component before removing it from the DOM ngOnChanges this method is called  once  on component’s creation and then  every time changes  are detected in one of the component’s  input  properties. export class MyComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { // Insert Logic Here! } }   ngOnInit Invoked when given component has been initialized. This hook is only called  once  after the first  ngOnChanges export class MyComponent implements OnInit { ngOnInit() { // Insert Logic Here! } }     ngDoCheck Invoked when the change detector of the given component is invoked. It allows us to implement our own change detection algorithm for the given component. export class MyComponent implements D
Post a Comment
Read more