Content deleted Content added
Update latest preview version & date |
m Link to more up to date StackOverflow survey Tags: Mobile edit Mobile app edit iOS app edit App section source |
||
| (44 intermediate revisions by 26 users not shown) | |||
Line 1:
{{short description|Open source web application framework}}
{{for|
{{Infobox software
| name = Angular
| logo =
| logo_size =
| developer = [[Google]]
| released = 2.0 / {{Start date and age|2016|09|14|df=yes}}<ref>{{cite web |url= http://angularjs.blogspot.com/2016/09/angular2-final.html |title= Angular, version 2: proprioception-reinforcement |date= September 14, 2016 |website= blogspot.com |access-date= 2017-03-18 |archive-date= 2017-03-12 |archive-url= https://web.archive.org/web/20170312063434/http://angularjs.blogspot.com/2016/09/angular2-final.html |url-status= dead }}</ref>
| latest_release_version = {{wikidata|property|reference|edit| Q28925578 |P348}}
| latest_release_date = {{start date and age|{{wikidata|qualifier| Q28925578 |P348|P577}}}}
| latest preview version =
| latest preview date = {{Start date and age|
| repo = {{URL|https://github.com/angular/angular|Angular Repository}}
| programming language = [[TypeScript]], [[JavaScript]]
Line 16:
| genre = [[Web framework]]
| license = [[MIT License]]
| website =
}}
'''Angular''' (also referred to as
==Differences between Angular and AngularJS==
[[File:Architecture of an Angular 2 application.png|thumb|right|upright=1.5|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.<ref>{{cite web|url=https://angular.io/guide/architecture|title=Angular Docs|website=angular.io}}</ref> Angular has a different expression syntax, focusing on <code>"[ ]"</code> for [[Property (programming)|property]] binding, and <code>"( )"</code> for [[Event (computing)|event]] binding.<ref>{{cite web |url=https://gorrion.io/blog/angularjs-vs-angular/ |title= What's the difference between AngularJS and Angular?
== Features ==
=== Component-
Angular uses a [[Software component|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.<ref>{{Cite web |title=Composing with Components · Angular |url=https://angular.dev/essentials/components |access-date=2024-06-02 |website=angular.dev |language=en}}</ref>
=== Data
Angular supports two-way data binding,<ref>{{Cite book |last=Chidester |first=Ashlan |title=Discover Angular |date=2024-04-23 |isbn=9798224446049}}</ref> 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.<ref>{{Cite web |title=Understanding binding · Angular |url=https://angular.dev/guide/templates/binding |access-date=2024-06-02 |website=angular.dev |language=en}}</ref>
=== Dependency
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.<ref>{{Cite web |title=Dependency injection in Angular |url=https://angular.dev/guide/di |access-date=2024-06-02 |website=angular.dev |language=en}}</ref>
=== Directives ===
Line 42:
=== Angular CLI ===
The Angular CLI ([[Command-line interface|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.<ref>{{Cite web |title=Angular CLI · Overview · Angular |url=https://angular.dev/tools/cli |access-date=2024-06-02 |website=angular.dev |language=en}}</ref>
=== 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.<ref>{{Cite web |last=Żurawski |first=Paweł |date=2024-05-09 |title=Angular SSR: Your server-side rendering implementation guide |url=https://pretius.com/blog/angular-ssr/ |access-date=2024-07-17 |website=Pretius |language=en-US}}</ref>
==History==
Angular 2.0 was announced
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.<ref>{{Cite web |last=Thompson |first=Mark |date=2021-11-04 |title=Angular v13 is now Available |url=https://blog.angular.dev/angular-v13-is-now-available-cce66f7bc296 |access-date=2024-06-02 |website=Angular Blog |language=en}}</ref> Angular 14 introduced standalone components and Angular 17 made them the default, de-emphasizing the use of modules.<ref>{{Cite web |last=Gechev |first=Minko |date=2023-11-08 |title=Introducing Angular v17 |url=https://blog.angular.dev/introducing-angular-v17-4d7033312e4b#586d |access-date=2024-05-16 |website=Angular Blog |language=en}}</ref>▼
Angular 18, released in 2024, introduced several improvements such as standalone components defaulting to true, built-in control flow syntax, zoneless support previews, and modern SSR debugging tools.<sup>[44]</sup>
▲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.<ref>{{Cite web |last=Thompson |first=Mark |date=2021-11-04 |title=Angular v13 is now Available |url=https://blog.angular.dev/angular-v13-is-now-available-cce66f7bc296 |access-date=2024-06-02 |website=Angular Blog |language=en}}</ref>
===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.<ref>{{Cite web|url=http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html |archive-url=https://web.archive.org/web/20170204142402/http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html |archive-date=2017-02-04 |title=Angular: Branding Guidelines for AngularJS|access-date=2017-03-04}}</ref>
===Version
{| class="wikitable mw-collapsible"
|-
! Version !! Release date !! New features
|-
|
|by default Angular CLI will not generate suffixes for components, directives, services, and pipes.<ref>{{Cite web |last=Gechev |first=Minko |date=2025-05-28 |title=Announcing Angular v20 |url=https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301 |access-date=2025-05-28 |website=Medium |language=en}}</ref>
|-▼
|{{Version |co |Angular 19}}
|Angular directives, components and pipes are now standalone by default.<ref>{{Cite web |last=Gechev |first=Minko |date=2024-11-19 |title=Meet Angular v19 |url=https://blog.angular.dev/meet-angular-v19-7b29dfd05b84 |access-date=2024-11-19 |website=Medium |language=en}}</ref>
|-▼
|{{Version |o |Angular 18}}
|May 22, 2024
|Experimental zoneless change detection support and server-side rendering improvements.<ref>{{Cite web |last=Gechev |first=Minko |date=2024-05-23 |title=Angular v18 is now available! |url=https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe |access-date=2024-06-02 |website=Medium |language=en}}</ref>
▲|
|-
|{{Version |o | Angular 17}}
|-
| {{Version |o |Angular 16}} || 3 May 2023 ||Partial [[hydration (web development)|hydration]] for Angular Universal
|-
| {{Version |o |Angular 15}} || November 18, 2022 ||Standalone APIs, directive composition API.<ref>{{Cite web |last=Gechev |first=Minko |date=2022-11-21 |title=Angular v15 is now available! |url=https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8 |access-date=2024-06-02 |website=Angular Blog |language=en}}</ref>
|-
| {{Version |o |Angular 14}} || 2 June 2022 ||Typed forms, standalone components, and new primitives in the Angular CDK (component dev kit).<ref>{{Cite web |last=Twersky |first=Emma |date=2022-06-03 |title=Angular v14 is now available! |url=https://blog.angular.dev/angular-v14-is-now-available-391a6db736af |access-date=2022-06-03 |website=Angular Blog |language=en}}</ref>
|-
| {{Version |o |Angular 13}} || 4 November 2021<ref name=":2">{{cite web |last1=Thompson |first1=Mark |title=Angular v13 is now Available |url=https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296 |access-date=10 January 2022 |website=Angular Blog|date=4 November 2021 }}
</ref>||Removed deprecated View Engine renderer.
|-
| {{Version |o |Angular 12}} || 12 May 2021<ref name=":3">{{Cite web |last=Thompson |first=Mark |date=2021-05-12 |title=Angular v12 is now available |url=https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49 |access-date=2021-05-17 |website=Medium |language=en}}</ref>|| Deprecated support for Internet Explorer 11.
|-
| {{Version |o |Angular 11}} || 11 November 2020<ref name=":4">{{Cite web |date=4 December 2020 |title=Version 11 of Angular Now Available |url=https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7}}</ref>||Experimental [[Webpack]] 5 support
|-
| {{Version |o |Angular 10}} || 24 June 2020<ref name=":5">{{Cite web |date=25 June 2020 |title=Version 10 of Angular Now Available |url=https://blog.angular.io/version-10-of-angular-now-available-78960babd41}}</ref>||New Date Range Picker (Material UI library).
|-
| {{Version |o |Angular 9}} || 6 February 2020 ||Improved build times, enabling [[Ahead-of-time compilation|AOT]] on by default
|-
| {{Version |o |Angular 8}} || 28 May 2019 ||Differential loading for all application code, Dynamic imports for lazy routes, Web workers, TypeScript 3.4 support, and Angular Ivy as an opt-in preview.<ref name=":0">{{Cite web |last=Fluin |first=Stephen |date=2019-02-08 |title=A plan for version 8.0 and Ivy |url=https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7 |access-date=2019-06-07 |website=Angular Blog}}</ref>
|-
| {{Version |o |Angular 7}} || 18 October 2018 ||Updates 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.<ref name=":10">{{Cite web |last=Fluin |first=Stephen |date=2018-10-18 |title=Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more |url=https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c |access-date=2019-06-07 |website=Angular Blog}}</ref>
|-
| {{Version |o |Angular 6}} || 4 May 2018<ref name=":6">{{cite web |title=Version 6.0.0 of Angular Now Available |url=https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4 |access-date=4 May 2018}}</ref>||Experimental custom element support, added ng update command
|-
| {{Version |o |Angular 5}} || 1 November 2017<ref name=":7">{{cite web |last1=Fluin |first1=Stephen |title=Version 5.0.0 of Angular Now Available |url=https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced |access-date=2 November 2017}}</ref>|| Support for [[progressive web app]]s, a build optimizer and improvements related to Material Design.<ref name=":8">{{cite web |date=18 September 2017 |title=Angular 5 JavaScript framework delayed |url=https://www.infoworld.com/article/3225511/javascript/angular-5-javascript-framework-delayed.html}}</ref>
|-
| {{Version |o |Angular 4.3}} ||18 July 2017 ||HttpClient for making HTTP requests, conditionally disabling animations, new router life cycle events for Guards and Resolvers.▼
▲|HttpClient 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.
|-
| {{Version |o |Angular 4}} || 23 March 2017<ref name=":9">{{Cite web |title=Angular 4.0.0 Now Available |url=http://angularjs.blogspot.ca/2017/03/angular-400-now-available.html |url-status=dead |archive-url=https://web.archive.org/web/20180108131700/http://angularjs.blogspot.ca/2017/03/angular-400-now-available.html |archive-date=2018-01-08 |access-date=2017-03-23 |website=angularjs.blogspot.ca}}</ref>||Added
|-
| {{Version |o |Angular 2}} || 14 September 2016 ||Initial release
|}
Line 120 ⟶ 115:
=== Support policy and schedule ===
All the major releases are supported for 18 months. This consists of 6 months of active support, during which regularly
{| class="wikitable"
|+Supported Angular Versions
Line 130 ⟶ 125:
!Duration
|-
|^
|Active
|
|
|
|1.5 years
|-
|^
|LTS
|
|
|
▲|-
▲|May 3, 2023
▲|Nov 08, 2024
|1.5 years
|}
Angular versions v2 to
== Libraries ==
Line 161 ⟶ 149:
=== 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.<ref>{{cite web|url=https://www.freecodecamp.org/news/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a/|title=How to create Angular 6 Custom Elements and Web Components|date=29 September 2018 }}</ref><ref>[https://www.wedowebapps.com/angular-18-features-enhancements/ Angular 18 Features & Enhancements]. Published [20 May 2025]. Accessed [20 May 2025].</ref>
==See also==
{{Portal|Free and open-source software}}
* [[React (software)]]
* [[Vue.js]]
* [[Svelte]]
* [[Comparison of JavaScript-based web frameworks]]
* [[Web framework]]
==References==
{{
==External links==
* [https://angular.io Official website]
{{Application frameworks}}
| |||