- select the contributor at the end of the page -
This article is the first in a series about understanding AngularJS. The first two articles will provide an overview of AngularJS, how it fits into Web development, and the overall design of the library. After that, we’ll go deeper into the various aspects of development with AngularJS, including in-depth information about the architecture of the library.
But let’s get back to the primary tools for a moment.
HTML, of course, provides the semantic markup of the content on a page. HTML 5 offers several new tags primarily focused on the semantic structure of a document including Article, Section and Footer, just to name a few. Over the years developers have moved away from HTML markup to provide visual or design structure, and now rely more on CSS to define these things. CSS not only defines visual attributes like font size, colors and visibility, but also the size and alignment of items on the page. As CSS evolved it added more advanced features like transforms, which add a level of interactivity through the declarative language. CSS is also a major component of making websites responsive so they can render on various devices and screen resolutions.
Frameworks and libraries
Keeping up with all the new libraries is difficult and not necessary for everyone. As libraries and frameworks are introduced to the community, developers with a distinct need for that functionality will use and test the new solutions. After feedback cycles and several versions, the most viable solutions will rise to the top, be featured at conferences and on blogs, and become well known as trusted tools. The aforementioned jQuery, created by John Resig, is a great example of this. It started out as a lightweight library to simplify the modification of the DOM, which is the representation of the HTML structure of a Web page.
As developers struggled to build applications that worked across browsers using the various APIs available, Resig created jQuery as a way to simplify selecting DOM elements. He did this by using the same selector syntax found in CSS. Once selected, elements could easily be manipulated, have event handlers attached, or be removed completely from the document. As developers tested this in their applications and gave feedback, the library improved and is now a default option in many applications. In fact, many other libraries and frameworks now depend on jQuery rather than rewriting the functionality it provides.
Single Page Applications
As more applications were built with Web technologies, user demands increased. One common requirement today is that an application be responsive. This can either mean that it adapts to different screen sizes and resolutions or that it responds quickly to user input without reloading an entire page. The first is generally achieved with CSS and frameworks like Bootstrap that focus on CSS layouts which adjust based on the screen size. The second is achieved using a number of techniques to respond to user input and by manipulating the DOM to change just those portions of the page that need updating, while leaving those that don’t (like navigation elements and sidebars). Not surprisingly, there are challenges associated with this.
Take bookmarking, for example; if a user navigates to a page, then the content changes, adding a bookmark generally creates a pointer to the original content. This doesn’t exactly create an ideal user experience. Retrieving data from the server, while not incredibly challenging, requires use of the XmlHttpRequest object provided in modern Web browsers. The model used to retrieve data requires a series of callbacks and checking of status codes, as well as managing the parsing or processing of the response data to get it into a usable format.
AngularJS, and the various modules, can be added to an application by using a package manager like NPM, Bower or NuGet, to name a few. All package managers provide individual packages for the core and additional modules, and all applications require the installation of the core module with optional modules like Route or Resource added as needed.
Templates can be defined in several ways, but it’s common to define each in its own HTML file deployed with the application. Each template file includes the HTML fragment that defines the template for the view. This enables the application views, despite being included in a single page, to be managed and considered separately. Another important aspect of templates is flexibility. AngularJS templates can include markup known as filters, which provide useful functionality such as formatting of currency, numbers, and date/time data, allowing the use of a single template across cultures and regions.
As mentioned previously, managing the URL of a resource (to enable navigation within a single page application, and support linking and bookmarking to different views) can be a challenge. The Routing module takes advantage of the HTML anchor and hyperlinking features to create unique URLs for the various views in your application. For example, the following two URLs point to the same page, but a different anchor in that page:
This means users can bookmark their place in the application and return to the specific view rather than the default view in your application. In addition, the routing module enables you to handle routing parameters such as an ID to identify a customer.
A big part of building responsive applications that work across networks is asynchronous programming. Asynchronous programming uses additional threads to process longer running work without stopping the updating of the user interface. Promises have become the de facto model for managing asynchronous work and AngularJS provides a promise model based on the popular Q library but focused on just the core features. This service is used throughout AngularJS and provides a simplified interface for developers working with asynchronous operations in their Angular applications.
HTTP / AJAX
Following a common pattern of layering abstractions, AngularJS provides the Resource module which provides a typed interface over the HTTP service for RESTful Web APIs. Using this module allows you to focus on the resources in your RESTful API and extends objects with functions such as Query, Save and Delete. Like the HTTP service, the Resource service can be extended with custom methods and take advantage of transformations and interceptors.
AngularJS was conceived and built to be highly testable. It includes a mocking module and support for mocking things like the HTTP service in your unit tests. Because AngularJS leverages dependency injection heavily in the runtime, the various components can be more easily tested with mock implementations for any dependencies.
Now you have an overview of AngularJS and where it fits in the world of Web development and single page applications. You know that AngularJS provides a framework to simplify and speed the development of single page applications, addressing many common challenges. The next article in the series will examine the overall architecture of AngularJS applications and how the MVC model is used to build your application. After that, we’ll go more in depth with articles that dive into the various components of AngularJS applications such as controllers, models, views, services, filters and directives.
For more of the pros, cons, and features of Angular, check out our "Angular 101" post.