Introduction to Angular

Jul 5, 2024

Introduction to Angular

Overview

  • Learn what Angular is, why to use it, and its versions.
  • Angular is a popular JavaScript framework for building client-side applications.
  • Provides reusable code: predefined methods, classes, interfaces, etc.
  • Primarily used for single-page applications (SPAs).

What is Angular?

  • Framework for creating SPAs on both mobile and desktop.
  • Utilizes HTML, CSS, and a programming language like TypeScript or JavaScript.
  • Not a programming language itself but a JavaScript framework.

Key Points

  1. Framework: Predefined classes and methods that can be reused.
  2. Single Page Applications (SPAs): Applications with only one HTML page where content changes dynamically.

Understanding a Framework

  • A platform for developing software applications.
  • Contains predefined classes/methods to simplify coding.
  • Provides APIs for different operations, avoiding the need to write from scratch.

Example

  • Making HTTP requests: Plain JavaScript requires custom logic, testing; Angular offers tested, ready-to-use methods.

Single Page Applications (SPAs)

  • Typical Web Application: Requests HTML pages from the server for each resource (home, about, courses pages).
  • SPA: Only one HTML page, content changes dynamically via JavaScript.

SPA Examples

  • Gmail, Netflix.
  • URL changes but the same HTML page remains loaded.
  • Content changes dynamically without making requests to the server.

Advantages of SPAs

  • Faster loading of new content since no new HTML requests are made.
  • More reactive, feels like a mobile application.
  • Can fetch data in the background and display it without unresponsive behavior.

Why Use Angular?

  • Easier maintenance & structure for complex applications compared to plain JavaScript/jQuery.
  • Offers a loosely coupled structure: easier to understand and maintain.
  • More testable: automated tests can be created easily.
  • Provides pre-built utility codes, especially for user navigation and browser history management.

Angular Versions

  • AngularJS (2010): Original version, complex, not used today.
  • Angular (2016): Rewritten from scratch using TypeScript.
  • Angular 2 and later versions (Angular 4, 5, 6, ... 16).
  • New versions released every 6 months with minor updates, not complete rewrites.
  • Focus on Angular (Angular 2 and later) in this course, not AngularJS.

Summary

  • Introduction to Angular framework and its benefits for creating SPAs.
  • Differences between AngularJS and the newer Angular versions.

Next Lecture

  • Create the first Angular project.