Angular 101: Understanding the Fundamentals of the Popular JavaScript Framework

📷 Image by vectorjuice on Freepik

Angular is a popular JavaScript framework for building web applications. Developed and maintained by Google, it is widely used for creating complex and large-scale web apps. In this post, we will take a closer look at what Angular is and how it can be used to build powerful web applications.

What is Angular?

Angular is a framework for building web applications using JavaScript, HTML, and CSS. It is a complete rewrite of AngularJS, the original version of Angular, and is sometimes referred to as "Angular 2+" to distinguish it from AngularJS. Angular uses a component-based architecture, which allows developers to create reusable and modular code.

Components in Angular

One of the main features of Angular is its use of components. A component in Angular is a self-contained unit of code that represents a specific part of the user interface, such as a menu, a button, or a form. Components are reusable, so developers can use the same component in multiple parts of the application.

Example: Creating a Simple Component

Here is an example of how to create a simple component in Angular:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <h1>Hello, World!</h1>
  `
})
export class ExampleComponent { }

In this example, we are importing the Component module from the @angular/core library. We then use the @Component decorator to define the component's metadata, such as the selector and template. The template is written in HTML and defines the component's user interface.

Dependency Injection in Angular

Another important feature of Angular is its use of dependency injection. This allows developers to easily manage dependencies between different parts of the application, making it easier to test and maintain the code.

Example: Using Dependency Injection

import { Injectable } from '@angular/core';

@Injectable()
export class ExampleService {
  getData() {
    return 'Hello, World!';
  }
}

import { Component } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
  selector: 'app-example',
  template: `
    <h1>{{ data }}</h1>
  `
})
export class ExampleComponent {
  data: string;

  constructor(private exampleService: ExampleService) {
    this.data = this.exampleService.getData();
  }
}

In this example, we have created a service called ExampleService, which has a single method called getData(). We have then injected this service into the ExampleComponent using the constructor. This allows the component to access the data provided by the service and use it in the template.

Routing in Angular

Angular also provides a powerful routing system, which allows developers to define different URLs for different parts of the application. This makes it easy for users to navigate the app and for search engines to crawl it.

Example: Defining Routes

import { Routes } from '@angular/router';
import { ExampleComponent } from './example.component';

export const routes: Routes = [
  { path: 'example', component: ExampleComponent }
];

In this example, we are defining a single route that maps the URL "/example" to the ExampleComponent. We can also define parameters in the URL, such as "/example/:id", and use them in the component to display dynamic content.

Conclusion

Angular is a powerful JavaScript framework for building web applications. Its component-based architecture, dependency injection, and routing system make it easy to create modular, testable, and maintainable code. With its wide range of features and active community, Angular is a great choice for building large-scale web apps.