Angular

Angular is a free, open-source framework that is TypeScript-based and used for building single-page applications. It was created in 2016 by developers at Google and serves as the second, revamped version of the orginal, JavaScript-based AngularJS.

Unlike React, which is technically a JavaScript library, Angular is a full-fledged framework.

From AngularJS to Angular

AngularJS was released in 2010 as one of the first modern front-end frameworks. It came to market in 2010 and rapidly grew popular with developers. Among the features that grew popular with developers were dependency injection, routing, and two-way data binding. It significantly changed how front-end developers wrote code.

Later in 2016, a new version was released that turned out to be a complete revamp of the original framework. Unlike AngularJS, which was written in JavaScript, this version, just called Angular, is written in TypeScript.

Support by Google for AngularJS (1.x) was discontinued in January 2022 and migrating to the newer Angular (2.x) is highly recommended.

The MVC Pattern

Angular uses the model-view-controller (MVC) pattern for structuring the code into the following three sections:

  • The model represents the data that may eventually be stored in a database and used to populate a web page.
  • The view represents the model data in an interface to be seen and interacted with by the user.
  • The controller contains the logic for the web application and connects the model data with the views.

Routing and Binding

Single page applications (SPAs) are built with Angular and feature a URL that doesn’t require a page reload to function. Angular uses routing to map the URL in the web browser to a specific state in the web application.

Angular also uses two-way data binding to inherently link the views and model data with one another. Updates in one causes updates in the other. This allows for data to be readily shared between components throughout the application.

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn More on Codecademy