Perfect MVC code: Tips and Best Practices for the AngularJS Framework

AngularJS is one of the most popular JavaScript libraries for front-end development. It’s developed and supported by Google, and it allows developers to create fast, efficient client-side web applications. Some long-time JavaScript developers find some AngularJS functionality and syntax new and a bit challenging, especially those new to the Model-View-Controller (MVC) structure, which can be difficult to learn. If you’re diving into AngularJS for the first time or just looking for a better way to manage your Angular projects, here are some tips you might want to keep in mind along the way.

1. REWORK THE DEFAULT DIRECTORY STRUCTURE

It’s helpful to know that you can restructure Angular’s default directories. The default directories you’re given will depend on the type of software you’re writing. For example, you’re given directories for controllers, views, services, templates and models. This structure works fine for smaller projects where you can easily locate files for a specific module. If you’re working with 10 files for an app, you can use this default structure with little hassle.

However, once the application grows to a medium or large size, you could be working with hundreds of files. Trying to find a file for a specific module can be very tedious, making it more effective to rework your directory structure to group your project by logical sections. For instance, the following directory structure could work:

app/
app.js
dashboard/
frontpage.html
frontpagecontroller.js
frontpageservice.js
order/
order.html
ordercontroller.js
orderservice.js

In this example, two logical components (front page and order) are given their own directories. If one of these modules breaks, you know immediately where to find it.

2. KEEP PRESENTATION LOGIC OUT OF CONTROLLERS

It’s easy for a programmer to fall into the habit of presentation manipulation of the DOM in a controller, which can be problematic in an MVC architecture.

In an MVC architecture, every module is separated into either the model, view or controller. The view is where your presentation logic is coded. The presentation is anything to do with the DOM. If you need to change a value in any HTML element, you should only use the presentation layer to do it.

When you perform presentation execution in the controller rather than the view, you break the separation of layers. When you or another developer goes back to maintain the code, you can miss the code in your controller that shouldn’t be there. This can lead to bugs.

Bear in mind that MVC architecture is much different than old-school, linear web languages. Once you get used to it, however, you’ll find it much more manageable when you need to deal with large-scale applications.

3. USE THE TRACK BY FEATURE ON REPEATED LISTS

It’s common to write lists from objects in AngularJS. Whenever you need to work with the DOM, though, your code becomes a little less efficient. Of course, you can’t avoid working with the DOM altogether, but you can minimize the amount of times it’s interfaced.

One way to limit the number of times a list must be re-rendered is to use the “track by” item.

As an example, let’s take a look at this list:
<div ng-repeat="listitem in orderList">

</div>

In the above code, every time the DOM is rendered, the list is rewritten to the page. This means your code manipulates the DOM every time it runs. There is a more efficient way to handle this type of procedure. Take a look at the following code:

<div ng-repeat=" listitem in orderList track by item.orderid">
</div>

Notice the second set of code uses the “track by” statement. It does the same process—it still lists all orders in a list section—but the second block of code speeds up the process and makes your application much more efficient by allowing you to specify your own key instead of generating random unique IDs.

4. USE DEPENDENCY INJECTION

Dependency injection is a very broad topic, but we’ll explain it briefly here. Dependency injection is a way to decouple parts of your application from the main logic. The idea is that you can make major changes to the business logic or models of the main application. The dependency is seen as a service, and you pass this dependency to the client.

If you’ve worked in other MVC applications, you’ve probably worked with dependency injection. If you haven’t, here’s how it looks in AngularJS.

angular.module(‘YourAppName’).controller('YourControllerName', ['$scope', 'YourServiceName',function($scope, YourServiceName) {
// controller code goes here
}
]);

With this, you can change the controller code without directly affecting the service. Dependency injection is a more advanced topic, but it’s essential for enterprise-level applications where code changes often and you have several developers working on the same solution.

5. USE ANGULARJS-SPECIFIC TESTING TOOLS

There are options when it comes to testing, but be sure to choose carefully. Chrome comes with its own developer tools, and many developers use Firefox plugins to test JavaScript code. But AngularJS is a highly modified form of JavaScript. Because Google developed AngularJS, the most common (and probably the safest) tool to use is the Chrome extension ng-inspector.

This tool can help you debug, review, test, and determine if you have any errors in your code. It keeps track of the scope, and you can view the element attached to the scope.

The Elevator Pitch: AngularJS in a Nutshell

AngularJS is a new, powerful, client-side technology that provides a way of accomplishing really powerful things in a way that embraces and extends HTML, CSS and JavaScript, while shoring up some of its glaring deficiencies. It is what HTML would have been, had it been built for dynamic content.

In this article, we will cover a few of the most important AngularJS concepts to get the "big picture." It is my goal that, after seeing some of these features, you will be excited enough to go and build something fun with AngularJS.

Feature 1: Two Way Data-Binding

Think of your model as the single-source-of-truth for your application. Your model is where you go to to read or update anything in your application.

Data-binding is probably the coolest and most useful feature in AngularJS. It will save you from writing a considerable amount of boilerplate code. A typical web application may contain up to 80% of its code base, dedicated to traversing, manipulating, and listening to the DOM. Data-binding makes this code disappear, so you can focus on your application.

Think of your model as the single-source-of-truth for your application. Your model is where you go to to read or update anything in your application. The data-binding directives provide a projection of your model to the application view. This projection is seamless, and occurs without any effort from you.

Traditionally, when the model changes, the developer is responsible for manually manipulating the DOM elements and attributes to reflect these changes. This is a two-way street. In one direction, the model changes drive change in DOM elements. In the other, DOM element changes necessitate changes in the model. This is further complicated by user interaction, since the developer is then responsible for interpreting the interactions, merging them into a model, and updating the view. This is a very manual and cumbersome process, which becomes difficult to control, as an application grows in size and complexity.

There must be a better way! AngularJS' two-way data-binding handles the synchronization between the DOM and the model, and vice versa.

Here is a simple example, which demonstrates how to bind an input value to an <h1> element.

<!doctype html>

<html ng-app>

  <head>

    <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>

  </head>

  <body>

    <div>

      <label>Name:</label>

      <input type="text" ng-model="yourName" placeholder="Enter a name here">

      <hr>

      <h1>Hello, {{yourName}}!</h1>

    </div>

  </body>

</html>

This is extremely simple to set up, and almost magical…

Feature 2: Templates

It's important to realize that at no point does AngularJS manipulate the template as strings. It's all the browser DOM.

In AngularJS, a template is just plain-old-HTML. The HTML vocabulary is extended, to contain instructions on how the model should be projected into the view.

The HTML templates are parsed by the browser into the DOM. The DOM then becomes the input to the AngularJS compiler. AngularJS traverses the DOM template for rendering instructions, which are called directives. Collectively, the directives are responsible for setting up the data-binding for your application view.

It is important to realize that at no point does AngularJS manipulate the template as strings. The input to AngularJS is browser DOM and not an HTML string. The data-bindings are DOM transformations, not string concatenations or innerHTML changes. Using the DOM as the input, rather than strings, is the biggest differentiation AngularJS has from its sibling frameworks. Using the DOM is what allows you to extend the directive vocabulary and build your own directives, or even abstract them into reusable components!

One of the greatest advantages to this approach is that it creates a tight workflow between designers and developers. Designers can mark up their HTML as they normally would, and then developers take the baton and hook in functionality, via bindings with very little effort.

Here is an example where I am using the ng-repeat directive to loop over the images array and populate what is essentially an img template.

function AlbumCtrl($scope) {
 scope.images = [
  {"thumbnail":"img/image_01.png", "description":"Image 01 description"},
  {"thumbnail":"img/image_02.png", "description":"Image 02 description"},
  {"thumbnail":"img/image_03.png", "description":"Image 03 description"},
  {"thumbnail":"img/image_04.png", "description":"Image 04 description"},
  {"thumbnail":"img/image_05.png", "description":"Image 05 description"}
 ];
}

<div ng-controller="AlbumCtrl">

  <ul>

    <li ng-repeat="image in images">

      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">

    </li>

  </ul>

</div>

It is also worth mentioning, as a side note, that AngularJS does not force you to learn a new syntax or extract your templates from your application.

Feature 3: MVC

AngularJS incorporates the basic principles behind the original MVC software design pattern into how it builds client-side web applications.

The MVC or Model-View-Controller pattern means a lot of different things to different people. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel).

The Model

The model is simply the data in the application. The model is just plain old JavaScript objects. There is no need to inherit from framework classes, wrap it in proxy objects, or use special getter/setter methods to access it. The fact that we are dealing with vanilla JavaScript is a really nice feature, which cuts down on the application boilerplate.

The ViewModel

A viewmodel is an object that provides specific data and methods to maintain specific views.

The viewmodel is the $scope object that lives within the AngularJS application. $scope is just a simple JavaScript object with a small API designed to detect and broadcast changes to its state.

The Controller

The controller is responsible for setting initial state and augmenting $scope with methods to control behavior. It is worth noting that the controller does not store state and does not interact with remote services.

The View

The view is the HTML that exists after AngularJS has parsed and compiled the HTML to include rendered markup and bindings.

This division creates a solid foundation to architect your application. The $scope has a reference to the data, the controller defines behavior, and the view handles the layout and handing off interaction to the controller to respond accordingly.

Feature 4: Dependency Injection

AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.

Dependency Injection (DI) allows you to ask for your dependencies, rather than having to go look for them or make them yourself. Think of it as a way of saying "Hey I need X', and the DI is responsible for creating and providing it for you.

To gain access to core AngularJS services, it is simply a matter of adding that service as a parameter; AngularJS will detect that you need that service and provide an instance for you.

  function EditCtrl($scope, $location, $routeParams) {
       // Something clever here...
  }

You are also able to define your own custom services and make those available for injection as well.

  angular.
      module('MyServiceModule', []).
      factory('notify', ['$window', function (win) {
      return function (msg) {
          win.alert(msg);
      };
  }]);

  function myController(scope, notifyService) {
      scope.callNotify = function (msg) {
          notifyService(msg);
      };
  }

  myController.$inject = ['$scope', 'notify'];

Feature 5: Directives

Directives are my personal favorite feature of AngularJS. Have you ever wished that your browser would do new tricks for you? Well, now it can! This is one of my favorite parts of AngularJS. It is also probably the most challenging aspect of AngularJS.

Directives can be used to create custom HTML tags that serve as new, custom widgets. They can also be used to "decorate" elements with behavior and manipulate DOM attributes in interesting ways.

Here is a simple example of a directive that listens for an event and updates its $scope, accordingly.

  myModule.directive('myComponent', function(mySharedService) {
      return {
          restrict: 'E',
          controller: function($scope, $attrs, mySharedService) {
              $scope.$on('handleBroadcast', function() {
                  $scope.message = 'Directive: ' + mySharedService.message;
              });
          },
          replace: true,
          template: '<input>'
      };
  });

Then, you can use this custom directive, like so.

<my-component ng-model="message"></my-component>

Creating your application as a composition of discrete components makes it incredibly easy to add, update or delete functionality as needed.

Bonus Feature: Testing

The AngularJS team feels very strongly that any code written in JavaScript needs to come with a strong set of tests. They have designed AngularJS with testability in mind, so that it makes testing your AngularJS applications as easy as possible. So there's no excuse for not doing it.

Given the fact that JavaScript is dynamic and interpreted, rather than compiled, it is extremely important for developers to adopt a disciplined mindset for writing tests.

AngularJS is written entirely from the ground up to be testable. It even comes with an end-to-end and unit test runner setup. If you would like to see this in action, go check out the angular-seed project at https://github.com/angular/angular-seed.

Once you have the seed project, it's a cinch to run the tests against it. Here is what the output looks like:

The API documentation is full of end-to-end tests that do an incredible job of illustrating how a certain part of the framework should work. After a while, I found myself going straight to the tests to see how something worked, and then maybe reading the rest of the documentation to figure something out.

Conclusion

We have covered six of the many AngularJS features that I love. I believe that these six features are essential for not only getting up and running with AngularJS, but also putting your application together in a way that is maintainable and extensible.

The website for AngularJS, http://angularjs.org, has plenty of working examples and plenty of excellent documentation. I also recommend checking out the amazing community on the AngularJS mailing list.

Let me know what you think!

Perfect MVC code

Thursday 8 June 2017

Tips and Best Practices for the AngularJS Framework