AngularJS was created in 2009 by Miško Hevery, a developer working at Google. While it began as a semi-independent pet project, the success of Hevery’s creation eventually won AngularJS an important role at the company as Google quickly took over the development and maintenance of AngularJS.
In 2014, Google announced a new version of AngularJS, originally called Angular 2.0, and later shortened the name to Angular. A complete rewrite of the original AngularJS, Angular added many new features, expanded existing capabilities, and made important changes to AngularJS — such as changing the expression syntax. The term Angular is now used to refer to version 2+, while the old moniker of AngularJS refers to the original 1.0 releases.
As of January 1st, 2022, Google has stopped providing updates for the original AngularJS, encouraging developers to adopt the newer Angular, which is still actively maintained and updated by Google.
In this post, we’ll explain what AngularJS is, what you can do with it, and provide examples of websites that operate on AngularJS.
What is AngularJS?
What can you do with AngularJS?
To understand the benefits of using AngularJS or Angular, we first need to take a look at what HTML can and can’t do.
HTML was originally designed as a static markup language. It allows developers to stylize the appearance of documents displayed in a web browser. In the early days of the web, webpages were largely static and offered little opportunity for interactivity. Developers would mark up their documents with HTML to create a single presentation that would be the same for all users.
Interactive Experiences With AngularJS
With data binding, applications can create interactive experiences where the presentation actively updates in response to any underlying changes in the model. This allows applications to update themselves dynamically without the need to reload the page. For example, if a user clicks an element on the page to update a specific value in the underlying model, AngularJS synchronizes these changes between the presentation shown in the browser while simultaneously updating the underlying data in the model, creating a webpage with capabilities far beyond traditional static HTML.
A single-page application (SPA) is a web application that can perform all of its functions without reloading the webpage. SPAs have become a standard for interactive websites and are a foundational element of the modern internet. AngularJS has been a key technology driving the creation of SPAs, with its two-way, data-binding features being at the forefront of these capabilities.
Working With AngularJS’s Two-Way Data Binding
Let’s take a look at some simple code that demonstrates the two-way, data-binding features available in AngularJS.
Imagine we have an application that asks the user for their location and automatically updates the webpage’s HTML to display the location that the user typed in. If we were to use HTML alone, this would require us to get input from the user via a form, submit the form, and then reload the page to display the location they input.
With AngularJS, we can actively update the page as the user is typing to create an interactive experience in real time. Let’s look at the code:
Because AngularJS extends the syntax of HTML, we start off by defining a normal <div> element. We use two directives from AngularJS to turn our static HTML into interactive AngularJS applications:
ng-app — Defines our AngularJS app and gives it a name.
ng-model — Uses two-way data binding to link the value of the input field to the $scope.location variable defined in the code.
But, upon changing the value in the input field, the CurrentLocation field actively updates as we type in a new location.
This illustrates the principle of two-way data binding. The model “location” will always have the same value, both in our presentation to the browser and in our underlying model.
AngularJS in Comparison to Other Frameworks
While there is much similarity and overlap between the capabilities of these frameworks, there are a few key differences. React does not feature two-way data binding by default and is often complemented by another technology known as Redux to add these features. React also focuses on the Virtual DOM model, as opposed to AngularJS’s MVC model.
Similarly, Vue also utilizes Virtual DOM with its model-view-viewmodel (MVVM) framework, which adds another layer to handle user interface logic.
A multi-national publishing company, Scholastic leverages AngularJS to keep its website dynamically updated with new content and provide interactive experiences.
Check out 50 more examples in this video below:
Seeing What AngularJS Can Add to Your Projects
Interested in building an interactive SPA? Or just want to add a bit of extra flair to your web apps? Dive in with AngularJS and see what you can build.
Originally published Jun 27, 2022 9:00:00 AM, updated June 27 2022