Angular Question
Angular Question
For tackling the above problems, client-side frameworks like Angular came into the
picture, which made life easier for the developers by handling the separation of
concerns and dividing code into smaller bits of information (In the case of
Angular, called Components).
Client-side frameworks allow one to develop advanced web applications like Single-
Page-Application. Not that we cannot develop SPAs using VanillaJS, but by doing so,
the development process becomes slower.
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-starter",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-
amber.css",
"src/style.css"
]
}
}
Inside the build section, the main property of the options object defines the
entry point of the application which in this case is main.ts.
The main.ts file creates a browser environment for the application to run, and,
along with this, it also calls a function called bootstrapModule, which bootstraps
the application. These two steps are performed in the following order inside the
main.ts file:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
entryComponents: [],
bootstrap: [AppComponent]
})
export class AppModule { }
As one can see in the above file, AppComponent is getting bootstrapped.
This component is defined in app.component.ts file. This file interacts with the
webpage and serves data to it.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular';
}
Each component is declared with three properties:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
The HTML template of the root component is displayed inside the <app-root> tags.
Download PDF
Angular React
Angular supports bidirectional data binding as well as mutable data. React only
supports unidirectional and immutable data binding.
The biggest benefit of Angular is that it enables dependency injection. React
allows us to either accomplish it ourselves or with the aid of a third-party
library.
Angular can be used in both mobile and web development. React can only be used
in UI development only.
Angular features a wide wide range of tools, libraries, frameworks, plugins, and so
on that make development faster and more fun. In React we can use third-party
libraries for any features.
Angular uses Typescript. React uses Javascript.