Lesson 01-Angular Basics

Angular History and Version Evolution

AngularJS (Angular 1.x)

AngularJS, the first version of Angular, was developed in 2010 by Misko Hevery and Adam Abrons at Google. It adopted the MVC (Model-View-Controller) architecture, introducing concepts like two-way data binding, dependency injection, directives, and modularity. AngularJS significantly simplified frontend development, enabling developers to build complex single-page applications (SPAs).

Angular 2+

Angular 2+ (commonly referred to as Angular 2 or Angular 4+, as there was no publicly released Angular 3) was released in 2016, marking a major architectural shift. Angular 2+ improved upon AngularJS in several ways:

• Architecture: Transitioned from MVC to MVVM (Model-View-ViewModel).
• Type Safety: Adopted TypeScript for static type checking and better tooling.
• Modularity: Introduced a more granular module system for clearer code organization.
• Performance: Enhanced performance, especially for large applications.
• Component-Based: Emphasized component-driven development, with each component having its own template, styles, and logic.

Angular 4 and Beyond

Angular 4, released in 2017, improved compiler performance and reduced bundle sizes. Starting with Angular 4, the framework adopted Semantic Versioning (SemVer), releasing a major version annually, a minor version every six months, and patch versions monthly.

• Angular 5: Introduced tree-shaking, improved AOT compilation, and enhanced performance.
• Angular 6: Added Angular CLI workspace support, improved package management, and introduced an Ivy compiler prototype.
• Angular 7: Enhanced the Ivy compiler and added dark theme support for Angular Material.
• Angular 8: Officially introduced the Ivy compiler, boosting development efficiency and performance.
• Angular 9: Enabled Ivy by default, offering faster builds and smaller bundles.
• Angular 10: Improved Angular CLI and added TypeScript 3.9 support.
• Angular 11: Introduced Webpack 5 support and performance enhancements.
• Angular 12: Further optimized Ivy, removed View Engine, and improved maintainability.
• Angular 13: Added TypeScript 4.3 support and enhanced testing tools.
• Angular 14: Supported TypeScript 4.6, improved Angular Elements, and refined the Ivy compiler.

Angular Compared to Other Frontend Frameworks

React

React, developed by Facebook, is a JavaScript library for building user interfaces. Compared to Angular, React focuses on the UI layer, offering a lightweight solution. It uses JSX syntax and a virtual DOM for performance. React’s ecosystem is vast, with numerous third-party libraries and tools.

Vue.js

Vue.js is a progressive framework designed for ease of use and high extensibility. Its core library focuses on the view layer, making it easy to integrate into existing projects or build full SPAs. Vue offers directive and component-based development similar to Angular but emphasizes flexibility and simplicity.

Comparison Summary

• Angular: Provides a comprehensive solution with template syntax, dependency injection, routing, and form handling, ideal for large enterprise applications.
• React: Focuses on the UI layer, offering flexibility and performance, suitable for high-performance interfaces.
• Vue.js: Combines Angular’s and React’s strengths, offering ease of use and flexibility for projects of all sizes.

The choice of framework depends on project requirements, team expertise, and preferences. Angular suits large projects needing a full framework, while React and Vue are better for scenarios requiring customization and flexibility.

Angular Core Concepts: Components, Directives, Services, Templates

Angular is a powerful JavaScript framework for building dynamic web applications. Its core concepts—components, directives, services, and templates—form the foundation of Angular applications.

Components

Components are the basic building blocks of Angular applications, each managing a specific UI area on the screen. Components include templates, styles, and logic, forming the application’s structure through nesting.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Component Example';
}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Component Example';
}

• The @Component decorator defines metadata, including the selector (selector), template URL (templateUrl), and style URLs (styleUrls).
• The AppComponent class contains the component’s logic, including properties and methods.

Directives

Directives are Angular’s mechanism for declaratively modifying DOM structure or behavior. They include component directives (components themselves) and attribute directives.

Attribute Directive Example

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

• The @Directive decorator defines the directive’s metadata, with selector specifying its usage.
• HostListener listens for events on the host element.
• ElementRef provides access to the host DOM element.

Services

Services are independent classes in Angular for sharing code and data, typically used for HTTP requests, state management, or business logic.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    // Simulated HTTP request logic
    return 'Data from service';
  }
}

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    // Simulated HTTP request logic
    return 'Data from service';
  }
}

• The @Injectable decorator marks the class for dependency injection.
• providedIn: 'root' makes the service globally available at the root module.

Templates

Templates are HTML fragments defining a component’s view structure. They bind to component properties and methods and use directives to manipulate the DOM.

<!-- app.component.html -->
<h1>{{title}}</h1>
<button appHighlight>Highlight me</button>
<p>Data from Service: {{data}}</p>

<!-- app.component.html -->
<h1>{{title}}</h1>
<button appHighlight>Highlight me</button>
<p>Data from Service: {{data}}</p>

• {{title}} is an interpolation expression displaying the component’s title property.
• appHighlight applies the custom attribute directive.
• Data from Service: {{data}} displays data from a service, requiring injection and assignment in the component class.