Software Developer
Angular is written in typescript. It has a very specific assignment structure than the angular previous model we will say one of a kind. It is a platform to build or design purchaser interfaces in typescript and HTML. This could separate our logic also can observe item-orientated programming. So angular 2+ versions are nicely based, standardized, and provide greater clarity to the developer.
A basic block for angular application is a module that contains various objects as an array. It also contains the bootstrapping module from where the application flow will get a start.
There are eight main things involved in angular architecture:
It is a block or piece of code that is responsible to perform a single task, it is an independent task. Angular applications can have any number of modules in them. We can also export these modules in the form of a class. The angular application should have at least one module. A module class must be decorated with the following annotations i.e. @NgModule it takes a metadata object.
It has many properties which describe below.
Example:-
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DialogOverviewExampleDialog } from './app.component.dialog';
import { BookService } from './book.service';
@NgModule({
declarations: [
AppComponent,
DialogOverviewExampleDialog
],
imports: [
BrowserModule,
AppRoutingModule,
HttpModule
],
providers: [BookService],
bootstrap: [AppComponent] })
export class AppModule { }
The issue is a class that consists of the core of business common sense for the software. It includes the template which is going to show while this magnificence receives invoked. It additionally incorporates the corresponding CSS for that template. Same it consists of the carrier which reads facts from the server and renders it to template dor display. This component interacts with the template with the approach and belongings of API.
To class, mush has @Component annotation on it. This also contains various properties like:
Example:
import { Component } from '@angular/core';
import { BookService } from './book.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
export class AppComponent
In angular, we can define metadata by using a decorator. For example, if we make any component in angular but how will angular identity it as a component? We need to tell it by using the annotation @Component.
A template is the HTML that we want to display. It is a simple HTML page that will show the data to the user.
Below is an example to implement metadata and template together.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
Data binding is the principle block of angular architecture. It lets us have a communique between an aspect and a template which may be very a lot vital to render our business logic to the person inside the form of statistics. There are 4 styles of information binding provided by way of angular 2.
Example:
{{ your_property_name }}
class AppComponent
{
name: string;
object: any;
}
{{ name }}
{{ object.roll_number }}
Example:
[value]="demo"
here we are directly assigning demo to value using property binding.
Example:
(cilck) = "methodName($event)"
It uses parenthesis followed by the function name you want to invoke. In the invoked function we can write our logic.
Example:
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>
import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions } from '@angular/http';
@Injectable()
export class BookService {}
They provide a special behavior to the DOM element. They are extended HTML attributes.
Dependency Injectable is used in many frameworks. it is a design pattern that is used to solve the dependency problem.
In this, we pass the object as dependencies. It makes our application loosely coupled, make our module independent of each other. By using dependency injection we make our application readable, loosely coupled, testable, reusable, and maintainable.