Posted by Angular is an open-source framework to build a single page application (SPA). It is written in Typescript which is a super-set of JavaScript. The main building blocks of an Angular application are NgModules which give the environment for component compilation.
The following are the building blocks of Angular:
- Module
- Components
- Template
- Data Binding
- Dependency Injection
- Directives
- Metadata
- Routing
- Services
Module:
The module is the main Building Block of Angular which is the group of components, directives, pipes, and services that are the parts of the Angular application. Read more…
Angular Components
The components are the main building block of Angular. The component consists main three parts:
- HTML: HTML template render on the page.
- Typescript class: It defines behavior.
- CSS: It specifies how to use the component in a template.
The following are CLI(Command Line Interface) commands to create a component in Angular. You can use anyone to generate a component.
| 1 | ng generate component ComponentName |
The below command is a short form to create a component.
| 1 | ng g c ComponentName |
Template:
A template is just plain HTML with some Angular-specific syntax for communicating with the component class.
| 1 2 3 4 5 | @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) |
Data Binding in Angular
Data binding is a main feature of Angular. It is used to sync the data between a component and a view. Angular updates the component even as the user updates the data in the view. Angular changes the view as the component gets new data.
The data binding is categorized into two groups: One Way data binding and Two-way data binding.
Data Binding Types:
- Interpolation Data Binding
- Property Data Binding: It uses the angle brackets “[]” to bind data from component to view.
- Event Data Binding: It uses the small brackets “()” to bind data from view to component
- Two-Way Data Binding: It flows data from component to view and view to the component. It uses the combination of square brackets and small brackets “[()]”.
Dependency Injection
DI (dependency injection) is a design pattern in which a class requests external dependencies rather than creating them.
Directives:
Angular Directives are classes that add additional behavior to HTML. There are three types of directives:
- Structural
- Attribute
- Components
Metadata:
Metadata is used to decorate a class so that it can configure the expected behavior of a class. Decorators are the main building block of Angular. The developer can use metadata to a class to tell the Angular app that AppComponent is the component.
Let’s take an example to understand:
| 1 2 3 4 5 | @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) |
@Component – It is a decorator.
selector, templateUrl, and styleUrls are the metadata.
Routing:
Routing is used to navigate the pages in an application. Angular is a single page application when you click on the page it loads different views which associates with the component.
Services:
A service is a Building Block of Angular which is a reusable piece of code with a specific purpose. A piece of code that will be used in various components of your application.
Our components require data from the back-end server. You can write the code in each Component, but that is not good. The focus of the component should be on presenting data to the user.
A different class should be responsible for receiving data from the back-end server. A class is called a service class because it delivers the data that each Component requires.
Conclusion:
We have learned total 9 building blocks of Angular. You can check more details on Angular official website.