Angular Started
The story of AngularJS started in 2009 when Miško Hevery (now senior computer scientist and Agile coach at Google) and Adam Abrons (now director of engineering at Grand Rounds) were working on their side project, an end-to-end (E2E) web development tool that would have offered an online JSON storage service and also a client-side library to build web applications depending on it.
AngularJS
The first stable release of AngularJS (version 0.9.0, also known as dragon-breath) was released on GitHub in October 2010 under an MIT license.
- Dependency injection: AngularJS was the first client-side framework to implement it. With AngularJS, developers could write loosely coupled and easily testable Components, leaving the framework with the task of creating them, resolving their dependencies, and passing them to other Components when requested.
- Directives: These can be described as markers on specific DOM items such as elements, attributes, styles, and so on: a powerful feature that could be used to specify custom and reusable HTML-like elements and attributes that define data bindings and/or other specific behaviors of presentation Components
- Two-way data binding: The automatic synchronization of data between model and view Components. When data in a model changes, the view reflects the change; when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view are updated at all times.
- Single-page approach: AngularJS was the first framework to completely remove the need for page reloads. This provided great benefits at both server-side (fewer and smaller network requests) and client-side level (smoother transitions, more responsive experience), and paved the way for the Single-Page Application pattern that would be also adopted by React, Vue.js, and the other runner-up frameworks later on.
Angular 2
The new release of AngularJS, released on September 14, 2016 and known as Angular 2, was a complete rewrite of the previous one.
The new Angular was highly modular, Component-based, came with a new and improved dependency injection model.
- Semantic versioning: Angular 2 is the first release to use semantic versioning, also known as SemVer.
SemVer is based on three numbers – X.Y.Z – where X stands for a major version, Y stands for a minor version, and Z stands for a patch release. - TypeScript: TypeScript is a Microsoft-made superset of JavaScript that allows the use of all ES2015 features. and adds powerful typechecking and object-oriented features during development. The TypeScript source code can be transpiled into standard JavaScript code that all browsers can understand.
- Server-side rendering (SSR): Angular 2 comes with Angular Universal, an open source technology that allows a back-end server to run Angular applications and serve only the resulting static HTML files to the client. In a nutshell, the server will render a first pass of the page for faster delivery to the client, then immediately refresh it with client code.
- Angular Mobile Toolkit (AMT): A set of tools specifically designed for building high-performance mobile apps.
- Command-line interface (CLI): The new CLI introduced with Angular 2 could be used by developers to generate Components, routes, services, and pipes via console/Terminal commands, together with simple test shells.
- Components: These are the main building blocks of Angular 2, entirely replacing the Controllers and scopes of AngularJS, and also lifting most of the tasks previously covered by the former directives.
Angular 4
On March 23, 2017, Google released Angular 4.
Starting with Angular 4, the entire Angular framework was then unified into the same MAJOR.MINOR.PATCH SemVer pattern.
- Ahead-of-time (AOT) compilation: Angular 4 compiles the templates during the build phase and generates JavaScript code accordingly.
For example, when the application starts, not only is the app faster since the client doesn’t have to compile anything, but it throws/breaks at build time instead of during runtime for most Component errors, thus leading to more secure and stable deployments. - Animations npm package: This was a smart move to give non-animated apps the chance to drop that part of code, thus being much smaller and arguably faster.
Angular 5
Released on November 1, 2017, Angular 5 featured TypeScript 2.3 support.
- New HTTP Client API: Starting from Angular 4.3, the @angular/http module was put aside in favor of a new @angular/common/http package with better JSON support, interceptors and immutable request/response objects, and other stuff.
- A new set of router events for more granular control over the HTTP life cycle: ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart and ResolveEnd.
Angular 6
Released on April 2018, Angular 6 was mostly a maintenance release.
RxJS 6 supports a new way to register providers, the new providedIn injectable decorator, improved Angular Material support (a Component specifically made to implement material design in the Angular client-side UI), more CLI commands/updates, and so on.
The new CLI ng add command, which uses the package manager to download new dependencies and invoke an installation script to update our project with configuration changes, add additional dependencies, and/or scaffold package-specific initialization code.
Angular 7
Angular 7 came out in October 2018 and it definitely was a major update.
- Easy upgrade: Angular team was able to reduce the steps that need to be done to upgrade an existing Angular app from an older version to the most recent one.
- CLI update: A new command that attempts to automatically upgrade the Angular application and its dependencies by following the procedure mentioned previously.
- CLI prompts: The Angular command-line interface has been modified to prompt users when running common commands such as ng new or ng add @angular/material to help developers discover built-in features such as routing, SCSS support, and so on.
- Angular Material and CDK: Additional UI elements such as virtual scrolling, a Component that loads and unloads elements from the DOM based on the visible parts of a list, making it possible to build very fast experiences for users with very large scrollable lists, CDK-native drag-and-drop support, improved drop-down list elements, and more.
- Updated dependencies: Added support for TypeScript 3.1, RxJS 6.3, and Node 10, although the previous versions can still be used for backward compatibility.
Angular 8
Angular 7 was quickly followed by Angular 8, which was released on May 29, 2019.
- Bazel support: Angular 8 was the first version to support Bazel, a free software tool developed and used by Google for the automation of building and testing software.
- Routing: A new syntax was introduced to declare the lazy-loading routes using the import() syntax from TypeScript 2.4+ instead of relying on a string literal.
- Service workers: A new registration strategy has been introduced to allow developers to choose when to register their workers instead of doing it automatically at the end of the app’s startup life cycle.
- Workspace API: A new and more convenient way to read and modify the Angular workspace configuration instead of manually modifying the angular.json file.
Angular 9
We come to Angular 9, which was released in February 2020.
- JavaScript bundles and performance: An attempt to fix the very large bundle files, has drastically increased the download time and brought down the overall performances.
- Ivy compiler: The new Angular build and render pipeline, shipped with Angular 8 as an opt-in preview, is now the default rendering engine.
- Selector-less bindings: A useful feature that was available to the previous rendering engine, but missing from the Angular 8 Ivy preview, is now available to Ivy as well.
- Internationalization: Another Ivy enhancement that makes use of the Angular CLI to generate most of the standard code necessary to create files for translators and to publish an Angular app in multiple languages, thanks to the new i18n attribute.