AngularJS — Single-Page Applications in Enterprise

Our enterprise applications shared one common trait: server-rendered JSP pages, jQuery spaghetti, and painfully slow user interfaces. When Google introduced AngularJS, we saw a chance to change that.

Why AngularJS¶

AngularJS caught our attention with two-way data binding, dependency injection (a concept from Java), directives for reusable components, and Google’s backing. Angular is “opinionated” — it tells you how to structure your application. For an enterprise team where you need consistency across projects, that’s an advantage.

First Project: Internal Dashboard¶

angular.module('dashboard', ['ngRoute', 'ngResource'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/projects', {
        templateUrl: 'views/projects.html',
        controller: 'ProjectsCtrl'
      })
      .when('/projects/:id', {
        templateUrl: 'views/project-detail.html',
        controller: 'ProjectDetailCtrl'
      });
  });

Two-Way Binding: Magic and Curse¶

Change the model, the view updates. Day-one magic. The problem arrives with 2000+ watchers — dirty checking slows down the digest cycle. Solutions: one-time bindings, track by in ng-repeat.

Architecture and Testing¶

We split the application into modules by business domain. Dependency injection makes testing easy — Karma, Jasmine, Protractor. For Java developers used to Spring, DI is a natural concept.

Challenges¶

SEO: SPA generates HTML on the client — an empty page for search engines. Learning curve: Scopes, digest cycle, transclusion — a steep curve. Angular 2.0: The announcement of a complete rewrite concerns us.

SPA Is the Future of Enterprise UI¶

Despite the challenges, we are convinced that single-page applications are the right direction. The user experience is incomparably better. AngularJS isn’t perfect, but it’s currently the best choice for teams coming from the Java world.