What is angular and why its so popular?

 

Angular is a popular open-source web application framework maintained by Google and a community of developers. It's widely used for building dynamic single-page applications (SPAs) and large-scale enterprise applications. Here's why Angular has gained popularity:

1. Opinionated Framework:

• Angular provides a structured and opinionated framework, which streamlines the development process by offering guidelines and best practices for building applications. This reduces the need for developers to make decisions on architecture, routing, data management, etc.

2. Two-Way Data Binding:

• Angular offers two-way data binding, allowing automatic synchronization of data between the model (JavaScript objects) and the view (HTML). This simplifies the development process and reduces boilerplate code, making applications more maintainable.

3. Modular Architecture:

• Angular encourages the development of applications in a modular fashion using components, modules, and services. This modular architecture promotes code reusability, maintainability, and scalability.

4. Dependency Injection:

• Angular's dependency injection (DI) system facilitates the management of dependencies between different components of an application. This promotes loose coupling, enhances testability, and simplifies the process of adding or removing dependencies.

5. Rich Ecosystem:

• Angular has a rich ecosystem of tools, libraries, and extensions that facilitate the development process. This includes Angular CLI for scaffolding projects, Angular Material for UI components, RxJS for reactive programming, and more.

6. TypeScript:

• Angular is built with TypeScript, a superset of JavaScript that adds static typing, interfaces, and other features to JavaScript. TypeScript enhances developer productivity, provides better tooling support, and helps catch errors at compile time.

7. Powerful CLI:

• Angular CLI (Command Line Interface) provides a powerful set of tools for generating components, services, modules, and other artifacts, as well as for building, testing, and deploying Angular applications. This streamlines the development workflow and boosts productivity.

8. Reactive Programming:

• Angular embraces reactive programming paradigms through the use of RxJS (Reactive Extensions for JavaScript). RxJS enables developers to write asynchronous and event-driven code in a declarative and composable manner, making it easier to manage complex application logic.

9. Community Support:

• Angular has a large and active community of developers, which contributes to the framework's growth, documentation, and ecosystem. The community provides support, shares knowledge, and creates resources such as tutorials, articles, and libraries.

10. Backed by Google:

• Being developed and maintained by Google provides Angular with strong backing, resources, and support. This instills confidence in businesses and developers, making Angular a preferred choice for building robust and scalable web applications.

Overall, Angular's combination of features, strong architecture, tooling, and community support makes it a popular framework for building modern web applications.

Let's create a basic Angular application that displays a list of items fetched from a mock API.

1. Set up Angular Project:

First, make sure you have Node.js and npm installed. Then, install Angular CLI globally:

npm install -g @angular/cli

Create a new Angular project:

ng new my-angular-app cd my-angular-app

2. Create a Component:

Generate a new component called item-list:

ng generate component item-list

3. Define Mock Data:

Create a file called items.ts in the src/app directory and define some mock data:

// src/app/items.ts export const ITEMS = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ];

4. Implement the Component:

Edit the item-list.component.ts file to fetch and display the items:

// src/app/item-list/item-list.component.ts import { Component, OnInit } from '@angular/core'; import { ITEMS } from '../items'; @Component({ selector: 'app-item-list', templateUrl: './item-list.component.html', styleUrls: ['./item-list.component.css'] }) export class ItemListComponent implements OnInit { items = ITEMS; constructor() { } ngOnInit(): void { } }

5. Display Items in Template:

Edit the item-list.component.html file to display the list of items:

<!-- src/app/item-list/item-list.component.html --> <h2>Items List</h2> <ul> <li *ngFor="let item of items"> {{ item.name }} </li> </ul>

6. Include Component in App Component:

Edit the app.component.html file to include the item-list component:

<!-- src/app/app.component.html --> <app-item-list></app-item-list>

7. Run the Application:

Run the Angular application:

ng serve --open

This will compile the application and open it in your default web browser. You should see a list of items displayed on the page.

This is just a basic example to demonstrate how Angular works. You can further enhance this application by adding features like routing, HTTP client for fetching real data from an API, forms, services, etc.