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 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.
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.
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)
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 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.
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.
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:
- Learning D3.js Mapping[article]
- Visualizing my Social Graph with d3.js[article]
- Simple graphs with d3.js [article]