AngularJS is a frontend JavaScript framework for building web applications, and it is a core component of the MEAN stack. It provides developers with the ability to use custom HTML attributes and elements to drive behavior within an app. It also provides some handy features such as two-way data binding and dependency injection.
AngularJS began as a side project of two Google developers, but eventually became an official Google open source project. Since its inception, it has undergone many changes in its methodology, including a transition away from touting MVC as its pattern of choice. Instead, the AngularJS team now labels it as a JavaScript MVW framework (at the time of writing).
The reason for the declaration of AngularJS to be MVW was in response to extensive debate and confusion from the developer community over what pattern AngularJS follows. The label itself may not be important to some developers, but it is important in highlighting the fact that the architectural pattern AngularJS uses is more complex than traditional MVC. AngularJS does, however, include a Controller component, among others. Let's take a closer look at what those components are.
AngularJS is designed for creating web applications, and as such, it includes conceptual components that do not exist in traditional MVC. Also keep in mind that AngularJS is a frontend framework only, so it is agnostic of what server-side framework and database solution is used.
A Template in AngularJS is an HTML document that contains special markup allowing it to be parsed to handle dynamic data, as with any web template system. AngularJS uses its own proprietary web template system as opposed to a third-party one, such as Handlebars. Just like Handlebars, however, AngularJS uses double curly brace notation to identify expressions within the HTML markup:
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="UsersController">
<ul>
<li ng-repeat="user in users">
{{user.first_name}} {{user.last_name}}
</li>
</ul>
</body>
</html>
This is an example of a simple AngularJS template. You can see that it is constructed like a normal HTML document, but it also includes AngularJS expressions. You will also notice that there are special HTML attributes prefixed by ng-, which convey different types of application information to the AngularJS framework.
Directives are special HTML markup that AngularJS uses to drive behaviors within the DOM. A directive can be driven by a custom HTML attribute prefixed with ng, a custom HTML element name such as <my-element></my-element>, a comment, or a CSS class.
You can define your own directives for your application, but AngularJS also includes some predefined directives for common use cases. For example, the ng-repeat attribute shown in the previous example uses the built-in ngRepeat directive, which is used to render template markup once per item while iterating over a collection:
<ul>
<li ng-repeat="user in users">
{{user.first_name}} {{user.last_name}}
</li>
</ul>
In the example, the users object is iterated over and properties of each user are rendered from the template.
The Model is a representation of the variable data available for use within expressions in the current View. The Model available to a View is confined to a particular Scope, or context:
$scope.users = [
{
id: 1,
first_name: 'Peebo',
last_name: 'Sanderson'
},
{
id: 2,
first_name: 'Udis',
last_name: 'Petroyka'
}
];
In this example, an array of users is registered on the $scope object. This exposes the users variable to a template that has access to this particular scope.
The Scope is a JavaScript object that defines the Model context for variables within the View. As shown in the previous example, $scope.users would be accessed in the View for that Scope as {{users}}.
An Expression in AngularJS is just like an expression in any web template system, as explained earlier. Double curly brace notation is used to identify expressions in AngularJS:
<ul>
<li ng-repeat="user in users">
{{user.first_name}} {{user.last_name}}
</li>
</ul>
In this example, {{user.first_name}} and {{user.last_name}} are AngularJS expressions.
The Compiler parses Template markup and evaluates it for Directives and Expressions to drive the behavior and data within the View. The AngularJS compiler is internal to the framework and not something that you will often access or interact with directly.
A Filter is used to format an Expression in the View to be presented in a particular way. For example, the View may be passed a currency amount from the Model in the form of a number. A Filter can be added to the Expression in order to format what the user sees as a monetary value with a currency symbol. The pipe | symbol is used within the double curly brace notation to append a filter:
<p><strong>Cost:</strong> {{ total | currency }}
In this example, total represents the Expression and currency represents the Filter.
Just as with traditional MVC, the View in AngularJS is the user interface. Views are composed of Templates, and the terms are largely interchangeable in the context of an AngularJS application.
Data binding in AngularJS is bidirectional, or two-way, so data changed in the View is updated in the Model, and data changed in the Model is updated in the View. This is done automatically, without the need for any additional business logic to handle the changes.
A Controller is really a View Controller in AngularJS, since it is a purely frontend framework. Like traditional MVC, the Controller contains business logic, but that business logic only pertains to the View:
var myApp = angular.module('myApp', []);
myApp.controller('UsersController', function($scope) {
$scope.users = [
{
id: 1,
first_name: 'Peebo',
last_name: 'Sanderson'
},
{
id: 2,
first_name: 'Udis',
last_name: 'Petroyka'
}
];
});
A UsersController could be created, for example, that contains the users Model shown previously and exposes it in the View through its $scope object.
The term dependency injection is commonly used with respect to JavaScript as the ability to asynchronously add resources to the current web page. In AngularJS, the concept is similar, but only with regard to other AngularJS components. For example, Directives, Filters, and Controllers are all injectable.
The Injector is the container for dependencies and is responsible for finding them and adding them when needed. It is decoupled from the application code using declarative syntax within the View and is typically not accessed directly.
The Module is a container for all the main components of an app. It gives the app a main namespace reference to all associated Directives, Services, Controllers, Filters, and any additional configuration information:
Var myAppModule = angular.module('myApp', []);
If your Module depends on any other Modules, you can add them to the empty array parameter shown in the previous example.
To apply a Module to an SPA using AngularJS, you can simply declare the name of the module within your main page's HTML using the custom ng-app attribute on your app container element:
<body ng-app="myApp">
The Service is a component that differentiates AngularJS from traditional MVC in that it is used to contain reusable business logic that you may want to share across different Controllers within your app. This helps to keep Controllers from becoming too large and complicated, and also allows different parts of the app to share some commonly used business logic. Currency conversion, for example, is something that could be written as a Service because you may want to use it in multiple Controllers.
The following diagram illustrates how the components of AngularJS interact with each other:
(Diagram from https://dzone.com/refcardz/angularjs-essentials)
AngularJS 2.x (in beta at the time of writing) differs in its architectural pattern from v1.x, which is the version represented here.
Now that you have a better understanding of the components that comprise the AngularJS MVW architectural pattern and how those components pertain to a frontend SPA architecture, let's apply some of these MVW principles to a simple JavaScript SPA example.