One of the interesting features of the modern Web is the single-page application (SPA), where all the code and content you need to run an application is delivered either when the page is opened or dynamically as you interact with the page. The single-page app is the logical endpoint of the JavaScript-HTML5 world, but also a complex way of building an application, making it harder to test and debug applications and services.
While you can build a single-page application by hand, it’s an often arcane process of juggling CSS, dynamic HTML, and self-assembling JSON callbacks. Luckily there are tools to help build effective SPAs, using JavaScript frameworks to handle the complexities of coding server interactions in a single page.
Perhaps the most popular of these tools is AngularJS. An open source framework, with contributions from Google and others, Angular offers a mix of declarative and imperative programming tools to separate user interface from business logic. It’s an implementation of the familiar Model View Controller pattern, so you can use it in conjunction with tools like ASP.Net MVC to build server-side and client-side application elements in a single project.
Although Angular is designed to focus on typical data operations, it gives you plenty of options for building your own behaviors and for delivering an application with your own look and feel. Angular also provides a set of tools to help you test and debug complex JavaScript code.
Much of Angular is focused on simplifying code. By relying on declarative statements to handle the user interface and service integration, Angular frees you from writing complex DOM (document object model) manipulations to display responses. Further, Angular handles the marshaling of the data between server and client with two-way data binding, so you no longer need to write code to handle HTTP requests and responses. That leads to what is perhaps the biggest benefit of using Angular: You no longer need to handle callbacks. That means your code is cleaner and easier to read, and you don’t have to parse JSON on the fly.
The heart of an Angular app is an HTML file, used as a template. While it looks like normal HTML, it’s not the code that’s delivered to a browser. When the app is run, your template is passed through the Angular compiler to create a DOM view. Angular uses a few extra HTML directives to define how it works with your code. You’ll start by initializing an app, with directives to define key variables and initial values. These are stored in the app’s model, which can be updated on the fly. Code that’s wrapped in double curly braces -- that is, {{…}} -- is evaluated as an expression and passed through a filter to format it for display.
Code can be pulled out from HTML templates and used in modules that can be called from your HTML using Angular directives. Methods and variables can be declared in the module, which can encapsulate calls to services as well as elements of business logic. In terms of the Model View Controller pattern, templates are a view and modules are a kind of controller (though distinct from an Angular controller proper), with the model shared between the two. In practice you’ll keep business logic in separate modules from a controller, using the controller to call functions as needed -- as well as using Angular’s built-in services to handle, for example, calls to remote APIs.
If you’ve worked with Java or C#, then you’ll be familiar with data binding, the technique Angular uses to link its model and views. The model is the heart of the app, as it’s where all your data is defined. As your model data changes, your view changes to reflect the model’s current state. Unlike some MVC frameworks, Angular’s approach means that controller and view are kept separate.
Each controller has its own scope object, which is used to pass methods and data to a view. One option is to attach a function to a scope object that can be called and evaluated in your view template. Need to get data from a database and display it in a table? Create an appropriate function in your controller to get the data and use a call in your template to construct the table from the controller’s data binding to the model. It’s important to remember that Angular doesn’t evaluate code in the same way as traditional JavaScript. That is, Angular works within its own scope rather than within the frame of a browser window.
AngularJS is a powerful tool, though building apps using it requires some thought. You’ll need to clearly define your model first, as it’s the model that controls what’s displayed and how controllers and services communicate with the view. Each view you have has a separate controller, and it’s best to ensure they don’t get too complex. Rather, keep them simple by pulling your business logic into discrete services that can be updated as required. Controllers can inherit scope from each other, making it easy to quickly build complex business logic by nesting controller calls in a view template, for example by nesting <div> blocks.
Once you’ve built a template, you can use CSS to style the results. You can even construct a complex template from a series of HTML files, loading partial templates as required. While not all JavaScript UI frameworks work with Angular, more and more are supporting it. This week Microsoft announced AngularJS support in its WinJS framework -- a move that means you’ll be able to use Angular in HTML5-based Windows 10 apps.
There’s a lot to like about AngularJS. It’s well designed and makes building a Web endpoint relatively easy. It’s not the answer to every JavaScript development question, but it does its one thing very well, and it works in conjunction with other tools to round out a more holistic solution. Working with Angular, you can choose a server framework and a UI toolkit, then bring them all together to build the app you need.