Angular Primer for React Developers

Introduction

Angular is a popular TypeScript-based web application framework developed by Google. It shares some similarities with React, such as component-based architecture and reactive programming. However, Angular has its own unique features and concepts. This primer aims to introduce Angular concepts to developers with advanced knowledge of React, providing examples in both React and Angular code using TypeScript.

Components

In React, components are the building blocks of the application. Similarly, in Angular, components are the fundamental units of the application.

React Example

import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Angular Example

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

@Component({
  selector: 'app-greeting',
  template: '<h1>Hello, {{name}}!</h1>'
})
export class GreetingComponent {
  @Input() name: string;
}

Templates

In React, JSX is used to define the structure and layout of components. In Angular, templates are used to define the view of a component.

React Example

import React from 'react';

const UserList: React.FC = () => {
  const users = ['Alice', 'Bob', 'Charlie'];

  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
};

export default UserList;

Angular Example

<ul>
  <li *ngFor="let user of users">{{user}}</li>
</ul>

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

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent {
  users = ['Alice', 'Bob', 'Charlie'];
}

Dependency Injection

Angular has a built-in dependency injection system, which is used to manage the dependencies of components and services. In React, dependency injection is typically handled by third-party libraries or manual implementation.

React Example

import React from 'react';
import { UserService } from './user.service';

interface UserListProps {
  userService: UserService;
}

const UserList: React.FC<UserListProps> = ({ userService }) => {
  const users = userService.getUsers();

  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
};

export default UserList;

Angular Example

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{user}}</li>
    </ul>
  `
})
export class UserListComponent {
  users: string[];

  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

Directives

Angular has built-in directives that allow you to manipulate the DOM and add dynamic behavior to elements. In React, similar functionality can be achieved using components and JSX.

React Example

import React from 'react';

interface HighlightProps {
  color: string;
}

const Highlight: React.FC<HighlightProps> = ({ color, children }) => {
  return <span style={{ backgroundColor: color }}>{children}</span>;
};

export default Highlight;

Angular Example

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnChanges {
  @Input('appHighlight') color: string;

  constructor(private el: ElementRef) {}

  ngOnChanges() {
    this.el.nativeElement.style.backgroundColor = this.color;
  }
}

Services

In Angular, services are used to encapsulate business logic and provide reusable functionality across components. In React, similar concepts can be achieved using helper functions or utility modules.

React Example

// user.service.ts
export class UserService {
  getUsers() {
    return ['Alice', 'Bob', 'Charlie'];
  }
}

import React from 'react';
import { UserService } from './user.service';

const userService = new UserService();

const UserList: React.FC = () => {
  const users = userService.getUsers();

  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
};

export default UserList;

Angular Example

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  getUsers() {
    return ['Alice', 'Bob', 'Charlie'];
  }
}

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{user}}</li>
    </ul>
  `
})
export class UserListComponent {
  users: string[];

  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

Conclusion

This primer has introduced some key concepts of Angular and compared them with their React counterparts. While Angular and React share some similarities, they have their own unique features and approaches to building web applications.

To dive deeper into Angular, it's recommended to explore the official Angular documentation and learn more about concepts such as modules, routing, forms, and Angular-specific features like pipes and directives.

Remember that this primer is just a starting point, and there are many more aspects of Angular to discover and learn as you build applications with the framework.