Tutorial-3 Basic Building Blocks of Angular

Basic Building Blocks of AngularJS

In this section we will discuss some of the basic building blocks of the Angular, we will not go into the depth of these concepts, for gaining in-depth knowledge in Angular, it is suggested  you should  visit Angular’s official documentation site.

Always remember that Angular application can be developed using simple JavaScript or typescript, which is a super-set of JavaScript.  If you are using typescript for the development then all the typescript codes must have to first undergo in transcompilation process, in which the typescript code gets converted to their corresponding JavaScript representation.

Developers can develop angular applications by using the angular markups inside the html templates, for handling the view part. To control these views you have to write the corresponding components, and Services for implementing application logic. Finally all these views, components, services are registered under a module for making angular application modularize. And later these modules can be exported and imported to other modules.

There are 7 main building blocks present in the Angular, such as Module, Components, Metadata, Templates, Data Bindings, Directives, and Services. More can be found at https://angular.io/guide/architecture#angular-libraries .

Module:

As we have discussed earlier that Angular helps in developing modularize applications, so angular provides its own modular system known as NgModule.

For declaring a module one has to use the @NgModule decorator, by default every angular app contains one module known as AppModule, which is root module, present under the app folder.

Fig1 Representing AppModule.ts

Some of the important properties of the NgModule are:

Declarations : It holds the view’s and it’s related component which belongs to a module.

Exports: It holds the members of a module which should be accessible outside the module.

Imports: It holds the external modules that are needed for this module and its components.

Providers: It contains the name of the services.

Bootstrap: It holds the main view under which all other views will get loaded and this property is only available for the Root Module.

More about NgModule can be found at https://angular.io/guide/ngmodule .

Component:

As said before to control a view we need a Component, so we can roughly say that Components are responsible for certain UI in the application.

Components are declared using the @Component decorator.

Fig2 Representing AppComponent

Component is present inside the @angular/core  module so while creating a new component you have to first import it.

Some of the important properties of the Component are :-

Selector: It holds the view part of the component; in above figure app-root is the selector for the appComponent. So in the DOM wherever that app-root tag will be found that UI part will be controlled by the appComponent.

TemplateUrl : It represents the html template that holds the UI contents. You can also place the inline html inside the Component by using the template property.

styleUrls: It holds the path/name of the CSS files for applying styles, You can also wirte the inline CSS by using the styles property.

More can be found on https://angular.io/guide/component-interaction .

Template:

A template holds the regular HTML for a component which instructs Angular how to render the selected component.'

Fig3 Representing template for AppCompnent

AppComponent.html is the template for the AppComponent, so whenever the app-root will found the angular will load the AppComponent.html contents in the DOM. Fig4 demonstrates how the template gets  loaded into the DOM.

Fig4 Presenting rendering of the app.component.html in the DOM

Find more at https://angular.io/guide/architecture#templates .

Metadata:

Metadata tells angular how to process a class. In angular we attach metadata using the decorators. Decorators can be explained as, these are the functions which can modify the JavaScript classes. Some of the examples of the decorator are, @NgModule, @Component, etc.

Fig5 Presenting the metadata of the @Component decorator

So by combining template, metadata and component we can get a view.

Find more at https://angular.io/guide/architecture#metadata .

Data Binding:

Data binding is the mechanism which is used to show the data in the view, to collect the data from the view  or else we can sync the data between the view and component,

Fig6 Representing Data Attribute title          

Fig7 Data Binding in html page to show the value of the title

Find more at https://angular.io/guide/architecture#data-binding.

Directives:

A directive is a class which is declared using the @Directive decorator. Angular templates are gets loaded into the DOM according to the instructions given by the directives, and no doubt Component is also a directive having its own template.

Find more at https://angular.io/guide/architecture#directives .

Services:

Service is a class with a specific purpose, you can avail functions, values or any features that your application need, in broad by using the service.

Find more at https://angular.io/guide/architecture#services .

Dependency Injection:

It is a way to reuse the available services in the components by supplying a new instance if the class with all of its dependencies.

Find more at https://angular.io/guide/architecture#dependency-injection .

<-- Prev(Creating First Application)               Tutorial Home                       Next(Data Bindings) -->