Angular (web framework)

Last updated
Angular
Developer(s) Google
Initial release2.0 / 14 September 2016;8 years ago (2016-09-14) [1]
Stable release
19.0.0 [2]   OOjs UI icon edit-ltr-progressive.svg / 19 November 2024;24 days ago (19 November 2024)
Preview release
19.0.0-next.0 / 14 August 2024;3 months ago (2024-08-14) [3]
Repository Angular Repository
Written in TypeScript, JavaScript
Platform Web platform
Type Web framework
License MIT License
Website angular.dev

Angular (also referred to as "Angular 2+") [4] is a TypeScript-based free and open-source single-page web application framework. It is developed by Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. The Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators. [5] According to the Stack Overflow Developer Survey, Angular is one of the most commonly used web frameworks. [6]

Contents

Differences between Angular and AngularJS

Architecture of an Angular application, services, and dependency injection Architecture of an Angular 2 application.png
Architecture of an Angular application, services, and dependency injection

Google designed Angular as a ground-up rewrite of AngularJS. Unlike AngularJS, Angular does not have a concept of "scope" or controllers; instead, it uses a hierarchy of components as its primary architectural characteristic. [7] Angular has a different expression syntax, focusing on "[ ]" for property binding, and "( )" for event binding. [8] Angular recommends the use of Microsoft's TypeScript language, which introduces features such as static typing, generics, and type annotations.

Features

Component-based architecture

Angular uses a component-based architecture, which allows developers to build encapsulated, reusable user interface elements. Each component encapsulates its own HTML, CSS, and TypeScript, making it easier to manage and test individual pieces of an application. [9]

Data binding

Angular supports two-way data binding, which synchronizes data between the model and the view. This ensures that any changes in the view are automatically reflected in the model and vice versa. [10]

Dependency injection

Angular has a built-in dependency injection system that makes it easier to manage and inject dependencies into components and services. This promotes modularity and easier testing. [11]

Directives

Angular extends HTML with additional attributes called directives. Directives offer functionality to change the behavior or appearance of DOM elements. [12]

Routing

Angular includes a router that allows developers to define and manage application states and navigation paths, making it easier to build single-page applications with complex routing. [13]

Angular CLI

The Angular CLI (Command Line Interface) provides a set of tools for creating, building, testing, and deploying Angular applications. It enables rapid application setup and simplifies ongoing development tasks. [14]

Server-side rendering

Angular has official support for server-side rendering, which improves an application's load time and performance. Server-side rendering also enhances search engine optimization by making content more accessible to web crawlers. [15]

History

Angular 2.0 was announced at the ng-Europe conference 22–23 October 2014. [16] On April 30, 2015, the Angular developers announced that Angular 2 moved from Alpha to Developer Preview. [17] Angular 2 moved to Beta in December 2015, [18] and the first release candidate was published in May 2016. [19] The final version was released on 14 September 2016.

Version 8 of Angular introduced a new compilation and rendering pipeline, Ivy, and version 9 of Angular enabled Ivy by default. Angular 13 removed the deprecated former compiler, View Engine. [20] The Angular Renaissance started on June 2, 2022 with the release of v14, when the transformation towards de-emphasizing the use of modules in favor of a more modern and streamlined approach to application structure.

Naming

The rewrite of AngularJS was called "Angular 2", but this led to confusion among developers. To clarify, the team announced that separate names should be used for each framework with "AngularJS" referring to the 1.X versions and "Angular" without the "JS" referring to versions 2 and up. [21]

Version history

VersionRelease dateNew features
Current stable version:Angular 19November 19, 2024Angular directives, components and pipes are now standalone by default. [22]
Old version, yet still maintained: Angular 18May 22, 2024Experimental zoneless change detection support and server-side rendering improvements. [23]
Old version, yet still maintained: Angular 17November 8, 2023 [24] Standalone is now the new default for the CLI (Application builder), without the need for Angular modules (NgModule), a new syntax for control flow and documentation website. [24]
Old version, no longer maintained: Angular 163 May 2023Partial hydration for Angular Universal server-side rendering, experimental Jest support, and esbuild-based build system for development servers.
Old version, no longer maintained: Angular 15November 18, 2022Standalone APIs, directive composition API. [25]
Old version, no longer maintained: Angular 142 June 2022Typed forms, standalone components, and new primitives in the Angular CDK (component dev kit). [26] The Angular Renaissance started with the release of v14.
Old version, no longer maintained: Angular 134 November 2021 [27] Removed deprecated View Engine renderer.
Old version, no longer maintained: Angular 1212 May 2021 [28] Deprecated support for Internet Explorer 11.
Old version, no longer maintained: Angular 1111 November 2020 [29] Experimental Webpack 5 support
Old version, no longer maintained: Angular 1024 June 2020 [30] New Date Range Picker (Material UI library).
Old version, no longer maintained: Angular 96 February 2020Improved build times, enabling AOT on by default
Old version, no longer maintained: Angular 828 May 2019Differential loading for all application code, Dynamic imports for lazy routes, Web workers, TypeScript 3.4 support, and Angular Ivy as an opt-in preview. [31]
Old version, no longer maintained: Angular 718 October 2018Updates regarding Application Performance, Angular Material & CDK, Virtual Scrolling, Improved Accessibility of Selects. Support for Content Projection using web standard for custom elements, and dependency updates regarding Typescript 3.1, RxJS 6.3 and Node.js 10. [32]
Old version, no longer maintained: Angular 64 May 2018 [33] Experimental custom element support, added ng update command
Old version, no longer maintained: Angular 51 November 2017 [34] Support for progressive web apps, a build optimizer and improvements related to Material Design. [35]
Old version, no longer maintained: Angular 4.318 July 2017HttpClient for making HTTP requests, conditionally disabling animations, new router life cycle events for Guards and Resolvers.

Minor release, meaning that it contains no breaking changes and that it is a drop-in replacement for Angular 4.x.x.

Old version, no longer maintained: Angular 423 March 2017 [36] Added ngIf and ngFor. Backward compatible with Angular 2.
Old version, no longer maintained: Angular 214 September 2016Initial release

Future releases

Since v9, the Angular team has moved all new applications to use the Ivy compiler and runtime. They will be working on Ivy to improve output bundle sizes and development speeds. [37]

Each version is expected to be backward-compatible with the prior release. The Angular development team has pledged to do twice-a-year upgrades.

Support policy and schedule

All the major releases are supported for 18 months. This consists of 6 months of active support, during which regularly-scheduled updates and patches are released. It is then followed by 12 months of long-term support (LTS), during which only critical fixes and security patches are released. [38]

Supported Angular Versions
VersionStatusReleasedActive EndsLTS EndsDuration
^18.0.0ActiveMay 22, 2024Nov 22, 2024Nov 22, 20251.5 years
^17.0.0LTSNov 08, 2023May 8, 2024May 15, 20251.5 years
^16.0.0LTSMay 3, 2023Nov 08, 2023Nov 08, 20241.5 years

Angular versions v2 to v15 are no longer under support. [39]

Libraries

Angular Material

Angular Material is a UI component library that implements Material Design in Angular. [40] It provides a collection of reusable components that adhere to Google's Material Design specifications, aiming to offer a consistent user interface across different devices and platforms.

Angular Material includes a variety of UI components such as buttons, cards, dialogs, grids, and form controls. These components are designed to be customizable and easy to integrate into Angular applications. Additional features of Angular Material include support for responsive design, theming, and accessibility.

Angular Elements

In 2018, Angular 6 introduced Angular Elements, enabling developers to package Angular components as custom web elements, which are part of the web components set of web platform APIs. [41]

See also

Related Research Articles

<span class="mw-page-title-main">Ext JS</span> JavaScript application framework

Ext JS is a JavaScript application framework for building interactive cross-platform web applications using techniques such as Ajax, DHTML and DOM scripting. It can be used as a simple component framework but also as a full framework for building single-page applications (SPAs).

<span class="mw-page-title-main">Svelte</span> JavaScript framework

Svelte is a free and open-source component-based front-end software framework, and language created by Rich Harris and maintained by the Svelte core team members.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

Apache Cordova is a mobile application development framework created by Nitobi. Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open-source version of the software called Apache Cordova. Apache Cordova enables software programmers to build hybrid web applications for mobile devices using CSS3, HTML5, and JavaScript, instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. It enables the wrapping up of CSS, HTML, and JavaScript code depending on the platform of the device. It extends the features of HTML and JavaScript to work with the device. The resulting applications are hybrid, meaning that they are neither truly native mobile application nor purely Web-based. They are not native because all layout rendering is done via Web views instead of the platform's native UI framework. They are not Web apps because they are packaged as apps for distribution and have access to native device APIs. Mixing native and hybrid code snippets has been possible since version 1.9.

<span class="mw-page-title-main">WebGL</span> JavaScript bindings for OpenGL in web browsers

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics, image processing, and effects in the HTML canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

Titanium SDK is an open-source framework that allows the creation of native mobile applications on platforms iOS and Android from a single JavaScript codebase. It is presently developed by non-profit software foundation TiDev, Inc.

A browser speed test is a computer benchmark that scores the performance of a web browser, by measuring the browser's efficiency in completing a predefined list of tasks. In general the testing software is available online, located on a website, where different algorithms are loaded and performed in the browser client. Typical test tasks are rendering and animation, DOM transformations, string operations, mathematical calculations, sorting algorithms, graphic performance tests and memory instructions. Browser speed tests have been used during browser wars to prove superiority of specific web browsers. The popular Acid3 test is no particular speed test but checks browser conformity to web standards.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

Emscripten is an LLVM/Clang-based compiler that compiles C and C++ source code to WebAssembly, primarily for execution in web browsers.

<span class="mw-page-title-main">Ember.js</span> JavaScript framework

Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It is designed to allow developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

<span class="mw-page-title-main">MEAN (solution stack)</span> JavaScript software stack

MEAN is a source-available JavaScript software stack for building dynamic web sites and web applications. A variation known as MERN replaces Angular with React.js front-end, and another named MEVN use Vue.js as front-end.

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends.

React is a free and open-source front-end JavaScript library that aims to make building user interfaces based on components more "seamless". It is maintained by Meta and a community of individual developers and companies.

<span class="mw-page-title-main">Ionic (mobile app framework)</span> Open-source framework to develop hybrid mobile apps

Ionic is an open-source UI toolkit for building cross-platform mobile, web, and desktop applications using web technologies such as HTML, CSS, and JavaScript/TypeScript. It provides a set of pre-designed UI components and tools for building high-quality, interactive applications. Ionic was originally built as a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of AngularJS and Apache Cordova. However, the latest release was re-built as a set of Web Components using StencilJS, allowing the user to choose any user interface framework, such as Angular, React or Vue.js. It also allows the use of Ionic components with no user interface framework at all. Ionic provides tools and services for developing hybrid mobile, desktop, and progressive web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. In particular, mobile apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by utilizing Cordova or Capacitor.

<span class="mw-page-title-main">React Native</span> Open-source mobile application framework

React Native is an open-source UI software framework developed by Meta Platforms. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. It is used to develop Android and iOS applications at Facebook, Microsoft, and Shopify. It is also being used to develop virtual reality applications at Oculus.

NativeScript provides platform APIs directly to the JavaScript runtime for a rich TypeScript development experience. As an open-source framework to develop apps for iOS, visionOS and Android platforms combining a best of all worlds approach marrying familiar Web approaches like CSS and view templating with common platform languages it delivers a liberating toolset for developers. It was originally conceived and developed by Bulgarian company Telerik, later acquired by Progress Software. At the end of 2019 responsibility for the NativeScript project was taken over by long-time Progress partner, nStudio. In December 2020, nStudio also oversaw the induction of NativeScript into OpenJS Foundation as an Incubating Project. NativeScript apps are built using JavaScript, or by using any programming language that transpiles to JavaScript, such as TypeScript. NativeScript supports the Angular and Vue JavaScript frameworks. Mobile applications built with NativeScript result in fully native apps, which use the same APIs as if they were developed in Xcode or Android Studio. Additionally, software developers can re-purpose third-party libraries from CocoaPods, Maven, and npm.js in their mobile applications without the need for wrappers.

Flutter is an open-source UI software development kit created by Google. It can be used to develop cross platform applications from a single codebase for the web, Fuchsia, Android, iOS, Linux, macOS, and Windows. First described in 2015, Flutter was released in May 2017. Flutter is used internally by Google in apps such as Google Pay and Google Earth as well as other software developers including ByteDance and Alibaba.

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static rendering.

Vuex is an open-source state management library for Vue.js applications and a JavaScript framework. It was created by Evan You, the developer behind Vue.js, to provide a centralized store for managing state in Vue.js applications, making it easier to handle and synchronize data across components.

Tauri is an open-source software framework designed to create cross-platform desktop and mobile applications on Linux, macOS, Windows, Android and iOS using a web frontend. The framework functions with a Rust back-end and a JavaScript front-end that runs on local WebView libraries using rendering libraries like Tao and Wry. Tauri aims to provide a more lightweight alternative to similar existing frameworks such as Electron.

References

  1. ↑ "Angular, version 2: proprioception-reinforcement". blogspot.com. September 14, 2016. Archived from the original on 2017-03-12. Retrieved 2017-03-18.
  2. ↑ . 19 November 2024 https://github.com/angular/angular/releases/tag/19.0.0 . Retrieved 20 November 2024.{{cite web}}: Missing or empty |title= (help)
  3. ↑ "angular/CHANGELOG.md". GitHub . Retrieved 2024-08-14.
  4. ↑ "AngularJS and Angular 2+: a Detailed Comparison". 6 April 2018.
  5. ↑ "Angular". angular.io. Retrieved 2024-03-26.
  6. ↑ "Stack Overflow Developer Survey 2023". Stack Overflow. Retrieved 2024-06-02.
  7. ↑ "Angular Docs". angular.io.
  8. ↑ "What's the difference between AngularJS and Angular?". gorrion.io. September 19, 2017. Retrieved 2018-01-28.
  9. ↑ "Composing with Components · Angular". angular.dev. Retrieved 2024-06-02.
  10. ↑ "Understanding binding · Angular". angular.dev. Retrieved 2024-06-02.
  11. ↑ "Dependency injection in Angular". angular.dev. Retrieved 2024-06-02.
  12. ↑ "Directives · Overview · Angular". angular.dev. Retrieved 2024-06-02.
  13. ↑ "Routing · Overview · Angular". angular.dev. Retrieved 2024-06-02.
  14. ↑ "Angular CLI · Overview · Angular". angular.dev. Retrieved 2024-06-02.
  15. ↑ Żurawski, Paweł (2024-05-09). "Angular SSR: Your server-side rendering implementation guide". Pretius. Retrieved 2024-07-17.
  16. ↑ "Ng-Europe schedule". Archived from the original on 2018-04-30. Retrieved 2018-04-29.
  17. ↑ @angularjs (30 Apr 2015). "Angular 2 moves from Alpha to Developer Preview! Dev guide and API docs now available at ... angular.io/docs/js/latest" (Tweet). Retrieved 2015-10-21– via Twitter.
  18. ↑ "Angular: Angular 2 Beta". angularjs.blogspot.it. Archived from the original on 2015-12-18. Retrieved 2016-07-13.
  19. ↑ "angular/angular". GitHub. Retrieved 2016-05-04.
  20. ↑ Thompson, Mark (2021-11-04). "Angular v13 is now Available". Angular Blog. Retrieved 2024-06-02.
  21. ↑ "Angular: Branding Guidelines for AngularJS". Archived from the original on 2017-02-04. Retrieved 2017-03-04.
  22. ↑ Gechev, Minko (2024-05-23). "Meet Angular v19". Medium. Retrieved 2024-06-02.
  23. ↑ Gechev, Minko (2024-05-23). "Angular v18 is now available!". Medium. Retrieved 2024-06-02.
  24. 1 2 Gechev, Minko (8 November 2023). "Introducing Angular v17". Medium. Angular Blog. Retrieved 12 November 2023.
  25. ↑ Gechev, Minko (2022-11-21). "Angular v15 is now available!". Angular Blog. Retrieved 2024-06-02.
  26. ↑ Twersky, Emma (2022-06-03). "Angular v14 is now available!". Angular Blog. Retrieved 2022-06-03.
  27. ↑ Thompson, Mark (4 November 2021). "Angular v13 is now Available". Angular Blog. Retrieved 10 January 2022.
  28. ↑ Thompson, Mark (2021-05-12). "Angular v12 is now available". Medium. Retrieved 2021-05-17.
  29. ↑ "Version 11 of Angular Now Available". 4 December 2020.
  30. ↑ "Version 10 of Angular Now Available". 25 June 2020.
  31. ↑ Fluin, Stephen (2019-02-08). "A plan for version 8.0 and Ivy". Angular Blog. Retrieved 2019-06-07.
  32. ↑ Fluin, Stephen (2018-10-18). "Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more". Angular Blog. Retrieved 2019-06-07.
  33. ↑ "Version 6.0.0 of Angular Now Available" . Retrieved 4 May 2018.
  34. ↑ Fluin, Stephen. "Version 5.0.0 of Angular Now Available" . Retrieved 2 November 2017.
  35. ↑ "Angular 5 JavaScript framework delayed". 18 September 2017.
  36. ↑ "Angular 4.0.0 Now Available". angularjs.blogspot.ca. Archived from the original on 2018-01-08. Retrieved 2017-03-23.
  37. ↑ Fluin, Stephen (6 February 2020). "Version 9 of Angular Now Available — Project Ivy has arrived!". blog.angular.io. Retrieved 22 March 2022.
  38. ↑ "Angular". angular.io. Retrieved 2019-06-07.
  39. ↑ "Angular". angular.io. Retrieved 2022-06-10.
  40. ↑ "Angular Material". material.angular.io.
  41. ↑ "How to create Angular 6 Custom Elements and Web Components". 29 September 2018.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.