Angular 2+
Angular 2+ has brought many advancements in the initial version of Angular. Its key features make the development of web applications more efficient and easy. Below there are some of the advancements that are seen in Angular 2+.
- Component-Based Structure: Angular 2+ version has brought a Component-Based Architecture or Structure where the web applications are developed using reusable components. This means that the components encapsulate the application’s login and User Interface, making the source code more modular.
- Inbuilt TypeScript Support: Angular 2+ is developed in such as way that it has built-in support for TypeScript, which is one of the statically-types supersets of JavaScript language. TypeScript consists the awesome features like classes, interfaces, and static typing, which all contribute to the ease of refactoring the code and making more better code.
- Enhancement in Performance: Angular 2+ has optimized the change detection algorithm which outcomes in the rapid rendering and enhancement in performance as compared to Angular 1.x.
Example: In this example, we will understand the basic implementation of Angular 2+ version.
- app.component.ts
Javascript
import { Component } from "@angular/core"; @Component({ selector: "my-app", template: ` <h1>Hi, {{ name }}!</h1> `, }) export class AppComponent { name: string = "w3wiki Team"; } |
- app.module.ts
Javascript
import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { AppComponent } from "./app.component"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], bootstrap: [AppComponent], }) export class AppModule { } |
- main.ts
Javascript
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./app.module"; platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); |
- index.html
HTML
<!DOCTYPE html> <html> <head> <title>Angular App</title> <base href="/"> </head> <body> <my-app></my-app> </body> </html> |
- tsconfig.json: (For TypeScript configuration)
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"angularCompilerOptions": {
"strictTemplates": true
}
}
- package.json: (For package dependencies)
{
"name": "angular-app",
"version": "1.0.0",
"scripts": {
"start": "webpack serve --open",
"build": "webpack --mode production"
},
"dependencies": {
"@angular/common": "^12.0.0",
"@angular/compiler": "^12.0.0",
"@angular/core": "^12.0.0",
"@angular/platform-browser": "^12.0.0",
"@angular/platform-browser-dynamic": "^12.0.0",
"core-js": "^3.15.2",
"rxjs": "^7.3.0",
"zone.js": "^0.11.4"
},
"devDependencies": {
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0",
"typescript": "^4.3.5",
"ts-loader": "^9.2.6"
}
}
Explanation: The above example states a component-based structure in the Angular 2+ version. The code is written in TypeScript, which specifies the use of a component named “AppComponent” which displays the value of the “name” property using (‘{{name}}’).
Output:
Hi, w3wiki Team
Differences between Angular 1.x and Angular2+
Angular is a well-known JavaScript framework that is used to create awesome responsive web applications like ReactJS. Angular 1.x, is the version that is considered s the initial version of the main framework, while Angular 2+ is considered the subsequent version which also includes Angular 2, Angular 4, Angular 5, and many more. There are some significant changes and enhancements in Angular 2+ as compared to Angular1.x. In this article, we will understand Angular 2+ and Angular 1.x along with their basic implementation & will see the difference between these versions.