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?
AngularJS is a JavaScript framework designed to extend the syntax of HTML. AngularJS empowers developers to build rich internet applications (RIAs) more easily.
Where many JavaScript frameworks focus on expanding the capabilities of JavaScript itself, AngularJS instead provides methods for enhancing HTML. AngularJS expands the capabilities of HTML beyond being a simple markup language. By adding features such as data-binding, AngularJS allows developers to avoid the complex workarounds that are traditionally necessary when attempting to build responsive web applications with HTML front ends.
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.
As technology advanced and webpages became increasingly interactive, the nature of HTML required developers to employ clever techniques to create interactive web experiences that weren’t bound to the static nature of HTML. This often meant incorporating JavaScript code and technologies such as jQuery and AJAX that allowed applications to make changes to webpages without reloading the page.
The Introduction of Client-Side Javascript
The new era of interactive web applications began by adding client-side JavaScript code that would run in a user’s web browser and send information between the web browser and the website’s back-end. This meant using JavaScript to communicate with a web server and update the browser’s Document Object Model (DOM) to change HTML elements displayed in the viewer’s web browser.
Early interactive web applications relied heavily on different JavaScript solutions that acted as a middleman between the presentation layer and the underlying model. Seeking to eliminate this barrier, AngularJS was created to allow for direct coupling between data and presentation. Known as two-way data binding, this approach provides synchronization between the underlying model and the presentation shown to the viewer. This is part of AngularJS’s model-view-controller (MVC) framework that separates the user interface from the application’s logic, creating three distinct layers within an application.
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:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="TestApp" ng-controller="locationTest">
Location: <input ng-model="location"><br />
Current Location:
</div>
<script>
var app = angular.module('TestApp', []);
app.controller('locationTest', function($scope) {
$scope.location = "Phoenix, Arizona";
});
</script>
</body>
</html>
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.
Upon loading the page, we see the value of our Location input and the Current Location field both say “Phoenix, Arizona.” This is the location we defined in the JavaScript code.
But, upon changing the value in the input field, the Current Location 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.
In this example, we’ve simply changed the location using an input form, but if we wanted to update the display based on data from another source, we can change the variable directly from inside the JavaScript code. This allows us to have truly two-way data binding, whereby the webpage presentation can be updated by input from the front end or the back end. This allows for the creation of interactive web applications that receive information from the user and from server-side sources to create a cohesive experience that doesn’t require the page to reload.
AngularJS in Comparison to Other Frameworks
AngularJS is far from alone in the front-end JavaScript framework space. Although some of the alternatives, such as Vue.js and React, present themselves as more modern or simplified solutions, the fine-grained control and extensive capabilities of AngularJS have ensured the framework's popularity has persisted. This is especially true amongst enterprise applications that require a lot of heavy lifting, as well as experienced developers who require some of the advanced capabilities offered by AngularJS.
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.
Examples of AngularJS
There are a variety of extremely popular websites that rely on AngularJS. Here are a few examples:
1. Upwork
This is a popular platform for freelancers and employers which uses AngularJS to create an interactive SPA experience for many of its key features.
2. T-Mobile
As one of the leading mobile providers, T-Mobile uses AngularJS for its primary website.
3. Scholastic
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
Despite being one of the older front-end JavaScript frameworks still in use, AngularJS remains a powerful and capable web development solution. Allowing developers to quickly add interactive capabilities and make use of powerful two-way data binding capabilities, AngularJS remains relevant for any developer interested in creating interactive web applications and SPAs.
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.
