Angular.js in a Nutshell

Michael Heydt

November 2015

In this article by Michael Heydt, author of the book D3.js By Example, we take an overview of the importance of MVC in AngularJS, and the benefits of AngularJS for a D3 developer.

(For more resources related to this topic, see here.)

AngularJS is a JavaScript library that allows us to implement the Model-View-Controller (MVC) pattern (https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) on the client side using JavaScript. It is normally used to build web applications, but it is also quite useful in creating data visualizations. AngularJS will allow us to build visualizations that are modular, that are decoupled from the source of the data, and finally, that help us hook up different parts of our visualization to update themselves upon data changes and user interaction.

AngularJS allows us to break up our application into pieces that perform specific types of tasks. Splitting our code up this way allows components to be easily swapped out for other components. It also helps with connecting our components to other components, allowing a visualization to be driven by another one or update themselves automatically when their underlying data changes.

AngularJS provides us with all of these capabilities by giving us what is known as an HTML compiler that is available with our JavaScript application. This compiler examines the HTML and JavaScript in our application and rewrites the DOM based upon how we have defined various constructs within our HTML.

Model-View-Controller

Most modern web-application frameworks encourage the break-up of the code into three broad categories of objects: models, views, and controllers.

A model is the information that the application shows the user and allows the user to modify. Views are code that generate visual representation of the model. Views also capture user input, and route that input to an appropriate piece of code that knows how to modify the model based upon the user interaction—those pieces of code are the controllers.

The overall structure of this pattern is represented in the following diagram:

MVC is a popular pattern because it gives us a practical way of separating application logic into these three respective parts, and giving a us clean separation of responsibility. When implemented properly, we can make those components Plug and Play with other implementations, as well as enable us to support Test Driven Development.

Most web MVC frameworks run the models, views, and controllers at different parts of the application. Views are run in the browser, and controllers are run by the web server. The model is often a database. The framework then semiautomatically wires everything up from the browser back to the database to make all of the magic happen.

AngularJS is a little different in that it is entirely run within the browser, giving your JavaScript code all of the capabilities of MVC just within the browser. This is very important as it allows us to create reusable view elements, and to represent data models and controllers that live totally within the browser.

Concepts of importance in AngularJS

Learning about AngularJS itself warrants its own book (and there are many on Packt Publishing's website). We will look at it with the perspective of just effectively supporting the creation of a single model in the browser, being able to hide the D3.js code from other application logic, and supporting the three criteria that I outlined in the introduction on dashboards.

To that extent, we will look at just a few concepts in AngularJS, each of these are explained briefly in the following subsections.

Scopes – the M in MVC

A scope is an object that refers to the application model. You can think of a scope as the data and properties that are used to generate the view. Data in AngularJS is always bound to a scope.

There is exactly one root scope at the AngularJS application level, but you can create hierarchical scopes by declaring a new scope at various levels of the DOM. These new scopes are either a child scope or an isolated scope. A child scope will inherit the properties of its parent scope, while an isolated scope will not.

A very important feature of scopes is that they allow us to observe changes to the application model. Each scope gives us an API, $watch, which lets us observe data in any scope for a change in its properties values, or even changes in properties or the state of a collection.

Controllers (the C in MVC)

A controller in AngularJS is a piece of JavaScript code that is used to augment a scope. We can create a controller using JavaScript, and assign that controller to a scope using the ng-controller directive. When doing this, Angular will create a new controller and scope, and pass the new child scope to the constructor of the controller.

This pattern allows us to create the controller that is able to set the initial state of the scope and add behavior to the scope. In essence, the controller either responds to changes in the applications model via messages from the bound scope, normally informing the view to update, or handles requests from the view to make a change to the application model.

Views – the V in MVC

A view in angular is a piece of HTML or JavaScript that renders DOM/SVG to create the user interface of the application. A view will have access to a controller to call methods on the controller to update data, and also to bind data in the controller to the visual elements of the UI.

Directives

A directive is a marker on a DOM element that tells AngularJS to attach a specific behavior to a DOM element or to change the DOM element and its children. They let us extend the functionality of HTML by allowing us to create custom HTML tags or attributes, which we can use to guide how visualizations are created.

As we will see, one use of directives is to declare a new HTML tag that AngularJS will treat as a view object. On seeing this tag, Angular will create the associated view and wire it to the appropriate controllers and services, allowing us to very easily reuse our D3.js code.

Modules

A module is a container for the different parts of your app; the other AngularJS controllers, services, directives, and so on. Angular uses modules because there is no "main" method in an AngularJS application. Therefore, you declare modules explicitly, and AngularJS uses these declarations to figure out how to start up your application.

Benefits of Angular.js for D3 developer

A question may be, "Why would I, a D3.js developer, want to use AngularJS?"

To answer this, let's get back to our definition of a dashboard, where we have at least two views, one or more sets of data are loaded, and updates/interactions in one view may effect what is displayed in another view. With this in mind, AngularJS provides the D3.js developer with the following:

  • We can create visualizations that can be reused by creating a directive that injects our D3.js visualization code into the DOM.
  • We can take the loading of data out of the D3.js code, and add it to a controller or a service. Placing it into a service that is loaded at app start can allow us to centralize the loading of code to provide efficiency, over having all the views doing this and perhaps loading redundant data.
  • We can use $watch() on a scope or the data model to update one or more views simultaneously upon either a change of data in the scope or upon a user interaction.

Summary

This article gave us an overview of the importance of MVC in AngularJS and the benefits of AngularJS for a D3 developer.

Resources for Article:


Further resources on this subject:


You've been reading an excerpt of:

D3.js By Example

Explore Title