What is AngularJS? Architecture, Features & Advantages

What is AngularJS?

AngularJS is an open-source Model-View-Controller framework written in JavaScript. AngularJS was one of the most popular web frameworks of the 2010s, and it is used for developing mostly Single Page applications. This framework has been developed by a group of developers from Google itself.

Because of the sheer support of Google and ideas from a wide community forum, the framework was kept up to date throughout its active life. It also incorporated the leading development trends of that period, which is why so much production code still runs on it today.

One point of terminology is worth settling early. AngularJS is widely described as an MVC framework, which is a useful starting point. The AngularJS team itself, however, preferred the label MVW (Model-View-Whatever), because the runtime behaves closer to Model-View-ViewModel than to classical MVC. The official AngularJS documentation calls it a structural framework for dynamic web applications. With that settled, here is how the pieces fit together.

AngularJS Architecture

AngularJS follows the MVC architecture. The diagram of the MVC framework is shown below:

AngularJS Architecture Diagram

Each of the three layers has a clear job:

• The Controller represents the layer that has the business logic. User events trigger the functions which are stored inside your controller. The user events are part of the controller.
• Views are used to represent the presentation layer which is provided to the end users.
• Models are used to represent your data. The data in your model can be as simple as just having primitive declarations. For example, if you are maintaining a student application, your data model could just have a student id and a name. Or it can also be complex by having a structured data model. If you are maintaining a car ownership application, you can have structures to define the vehicle itself in terms of its engine capacity, seating capacity, etc.

In practice the controller rarely pushes data into the view by hand. AngularJS watches the model and refreshes the view for you, and that automatic synchronisation is powered by the feature set described next.

Features of AngularJS

AngularJS has the following key features which makes it one of the powerful frameworks in the market:

1. MVC – The framework is built on the famous concept of MVC (Model-View-Controller). This is a design pattern used in all modern day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different sections is done so that each one could be managed more easily.
2. Data Model Binding – You do not need to write special code to bind data to the HTML controls. This can be done by AngularJS by just adding a few snippets of code.
3. Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to be written to design any application. But with AngularJS, you will be amazed with the lesser amount of code you need to write for DOM manipulation.
4. Unit Testing ready – The designers at Google not only developed AngularJS but also developed a testing framework called “Karma” which helps in designing unit tests for AngularJS applications.
5. Directives – Markers such as ng-app, ng-model and ng-repeat add behaviour to ordinary HTML elements.

These features are easiest to understand once you have run them, so the next section builds a working page from scratch.

How to Set Up AngularJS and Build Your First Application

Reading about data binding is one thing, and watching it work is another. AngularJS needs no package manager, no bundler and no compiler, so your first application is a single HTML file that runs straight from your hard disk.

Step 1) Add the AngularJS library

Load the library from a CDN with one script tag. Version 1.8.3 is the final AngularJS release, so pin your page to that exact version rather than to a floating one.

Step 2) Mark the application root with ng-app

The ng-app directive tells the AngularJS compiler which part of the page it owns. Putting it on the html tag hands the whole document to the framework, and the value you give it names the module you are about to create.

Step 3) Bind data with ng-model and an expression

The ng-model directive binds an input element to a property on the scope, and a double-brace expression prints that same property elsewhere on the page. Because binding is two-way, typing in the box updates the heading immediately, with no event handler of your own.

Step 4) Add a controller for the logic

A controller is a plain JavaScript function that receives the $scope object and sets initial values on it. Registering it on the module makes it available to the ng-controller directive.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Step 5) Run the page and check the result

Save the file as index.html and open it in any browser. The heading reads “Hello World!” at first, and it rewrites itself on every keystroke. No web server and no build step are involved.

If nothing appears, open the browser console and confirm that the CDN script loaded and that the module name inside ng-app matches the name passed to angular.module exactly, because a mismatch fails silently. That small page already demonstrates the strengths described next.

AngularJS Advantages

Here are the advantages of AngularJS:

• Since it is an open source framework, you can expect the number of errors or issues to be minimal.
• Two-way binding – AngularJS keeps the data and presentation layer in sync. You do not need to write additional JavaScript code to keep the data in your HTML code and your data layer in sync. AngularJS will automatically do this for you. You just need to specify which control is bound to which part of your model.
• Routing – AngularJS can take care of routing which means moving from one view to another. This is the key fundamental of single page applications; wherein you can move to different functionalities in your web application based on user interaction but still stay on the same page.
• AngularJS supports testing, both Unit Testing, and Integration Testing.
• It extends HTML by providing its own elements called directives. At a high level, directives are markers on a DOM element (such as an attribute, element name, and comment or CSS class) that tell the AngularJS HTML compiler to attach a specified behavior to that DOM element. These directives help in extending the functionality of existing HTML elements to give more power to your web application.

Advantages of AngularJS

A balanced view matters just as much, so the trade-offs are set out next.

Disadvantages and Limitations of AngularJS

Every framework trades something away, and AngularJS is no exception. These are the limitations most often reported by teams that maintain AngularJS applications:

• No security layer of its own – AngularJS provides neither authentication nor authorisation, so both must be enforced on the server.
• Total dependency on JavaScript – If a visitor disables JavaScript, the page falls back to bare markup and does not render.
• Digest cycle performance – Changes are detected by repeatedly comparing watched values, so pages with several thousand bindings can feel sluggish.
• A steep learning curve – Scopes, directives, factories, services and providers overlap, and several ways often exist to achieve the same result.
• Search engine visibility – Views are assembled in the browser, so extra work such as pre-rendering is needed before crawlers index pages reliably.
• No further updates – Since 31 December 2021 no official patches exist, so a newly discovered vulnerability stays unfixed unless a commercial vendor supplies a fix.

That last point pushes most teams towards the successor framework, which is a different product despite the shared name.

AngularJS vs Angular: What is the Difference?

AngularJS and Angular are frequently confused because the names are so close, but they are separate frameworks with different languages, architectures and release lines. AngularJS refers only to the 1.x series described on this page. Angular means version 2 and every version after it, a full rewrite released in 2016 that is still actively developed. Code does not move between them without deliberate migration work.

The practical consequence is that an AngularJS controller cannot simply be dropped into an Angular project. Migration means rewriting each controller as a component, so plan it as real engineering work rather than an upgrade. In short, treat AngularJS as a maintenance skill and Angular as the platform for new development.

FAQs