No comments yet

Overview of Angular 2

[Social9_Share type="horizontal"]

This is a series of posts to learn Angular 2.
I want to show only the practical examples for understanding the concepts of Angular. This is an introductory blog. So, let us have a look on the basic building blocks of Angular.

Overview of Angular

Angular2 is a javascript framework to develop mobile and web applications. You can create single page applications(SPA) using Angular 2. You can use either javascript or typescript for developing Angular applications. Typescript is a superset of javascript. It gets compiled to javascript (the language the browser can understand).

Building blocks of Angular

Now, let us talk about the building blocks of Angular.

Modules

Angular applications are modular in nature. An angular application can have multiple modules. A module is a class, decorated with @NgModule. This decorator provides metadata information about the module. It identifies the components, directives, providers attached to the module.
An angular application will have a root module, which is conventionally named as AppModule

Example

The import statement is to import the angular classes from the angular library. The class is decorated with @NgModule. It takes a metadata object having properties as
declarations: the classes that belong to the module – component, directives, pipes
imports: the modules to be imported that are used by this module
providers: the service classes that are used by this module
bootstrap: the root component of this application to be bootstraped by this module

Components

A Component is a combination of a template and the associated HTML template that is a part of the screen. An application can have multiple components.
A Component is a class decorated with @Component. This decorator gives details about name of the component, the associated template file, styles, imports and exports needed for the component.
An angular application will have a root component, conventionally named as AppComponent

Example

The import statement is to import the angular classes from the angular library. The class is decorated with @Component to specify that this class is a component. It takes a metadata object having properties as
selector: the name of the component
template: the html template code
styles: the css styling
templateUrl: this can be used instead of template. This specifies the location of the html template
styleUrls: this can be used instead of styles. This specifies the location of the css files

Templates

A template is a HTML file that renders the component. The HTML file can have basic HTML tags and custom tags.

Example

Here, app-root is the custom element – which is a component

Databinding

Databinding is a concept of communicating the data between the component classes and the template. They also help to communicate between the parent and chile components. Angular supports different types of databinding – One-way data binding, Property data binding, Event data binding, Two-way data binding.We will discuss this in detail later.

Directives

Directives are classes that manipulate the DOM. Angular has three inbuilt directives. They are Component, Structural and Attribute directives.
The Structural directives change the layout by adding, removing or replacing the elements from the DOM.
Example:*ngIf , *ngFor, ngSwitch

The Attribute directive changes the appearance or behaviour of elements in the DOM You can also create your own directives. @Directive is used to decorate the directives.
Example: ngModel, ngStyle

Pipes

Pipes are used to format the content that are rendered to the DOM.
Example:Formatting a name to uppercase or lowercase. Formatting a number as number or currency or as date

Services

A Service is a class that talks with the backend server to get the data. The business logic that has to be shared by multiple components can be added in the service class.
Example: Logger Service, data from the backend server

Dependency Injection

Dependency Injection is a concept, in which the framework creates the dependencies needed for a class and injects it.
In Angular, usually the dependencies like services, routers are injected to the components. When a component gets created, angular calls the constructor and identifies the dependencies. Then the Injector creates instances of these dependencies, and injects them to the components.

Now that we have learnt about the basic building blocks of angular, in the next post, let us learn to create an angular application using quickstart seed.

.

Shristi Blog Banner

Post a comment