Notes on Angular Lecture

Jun 29, 2024

Lecture on Angular

Introduction

  • Angular is not just a framework but a developer's platform.
  • It provides an end-to-end solution for developers, including tools for building, debugging, testing, and deploying.
  • Official website: angular.io

History and Background

  • Developed and introduced by Google; maintained by Google and a large community of developers and organizations.
  • TypeScript, used by Angular, belongs to Microsoft. Testing tools like Jasmine and Karma are also maintained by various companies.
  • Initial iteration named AngularJS, created with JavaScript in 2010.
  • Early issues with AngularJS due to it not being initially designed for broad developer use.

Angular vs AngularJS

  • AngularJS (2010): Had several problems — built with JavaScript, not strongly typed, and had various gaps for developers.
  • Angular (2014): Introduced as an alternative, not a replacement, to overcome those issues. Uses TypeScript.

Versioning

  • Angular versions 2 to 11 are no longer supported.
  • Versions 12 and 13 are in Long Term Support (LTS).
  • Current active version: Angular 14.

Features of Angular

  1. Modular: Application-specific libraries, making apps lighter and faster.
  2. Asynchronous Libraries: Allows multiple tasks to be performed simultaneously, improving performance.
  3. AOT Compilation: Translates code ahead of time, compared to Just-In-Time (JIT) in the browser, enhancing speed.
  4. Component-Based: Encourages reusability and ease of building applications. Components can be recreated and reused across projects.
  5. Decoupled from DOM Manipulations: Uses frameworks like MVC and MVVM for better interface and functionality management.

Key Benefits

  • Faster execution and rendering due to modularity and AOT technique.
  • Easy to reuse due to its component-based structure.
  • Enhanced UI/UX through synchronous nature and decoupled DOM manipulations.
  • Technology can become a future trend as support and adoption increase.

Practical Notes

  • Component Reusability: Example of using a date component in HTML.
  • Choosing Technologies: Based on gaps and requirements of client vs what the technology can fulfill.
  • Industry Examples: Use of third-party libraries for gaps (e.g., Tellerick for barcode reading).

Getting Started

  • Angular's name origin: Manages everything within an angle (<>), which makes static DOM dynamic within angular braces.
  • Setup and installation for practical sessions will be covered in the next lecture.

Conclusion

  • Emphasizes the importance of understanding Angular as a developer's platform providing complete tool chains.
  • Practical sessions to follow for hands-on experience in setting up and developing with Angular.