Router

Angular ships with a full-featured router that not only allows for basic routing with parameters, but also allows for child routes, named router outlets, route guards, and some fairly sophisticated code splitting and preloading strategies for dynamic routes. The Angular router is also observable based, which allows us to create immersive user experiences as we detect route changes and communicate those changes via an observable stream.

Enterprise applications often require a large set of features that complement the business objectives and strategy. These applications are critical to the business and must imbue users and managers alike with the ability to perform necessary daily actions and monitor the state and health of the business. This translates to the need for a feature-rich router that drives the flow of actions and data in an application. The Angular router is not a separate open source project; rather, it is an integral aspect of the framework, built and maintained by the Angular team at Google.

Enterprise applications can run behind a firewall on premises and be fetched over a local area network (LAN) built with high-speed copper or fiber. Enterprise applications can also be executed in a controlled environment in which the organization’s information technology can specify the browser vendor and version. This can often lead an organization’s leadership to relying on these controlled environments, which in turn lessens the demand for applications that are highly performant and minimizes the time to interactivity (TTI). Further, users might be accustomed to outdated enterprise applications that require significant load and wait times. The result is large unrealized costs that enterprises pay for slow and unresponsive applications.

This is not the case with Angular. Angular provides mechanisms for engineering to create applications that are quick to load, minimizing TTI through techniques such as code splitting and preloading. Code splitting is built into the Angular router, which provides a simple and elegant solution to defer loading code that is not necessary at the time the user is interacting with a specific feature of the application. This results in file sizes that are minimal and quick to fetch, either over a LAN or over a slow 3G connection. Further, preloading soon-to-be-used features enables Angular applications to begin prefetching resources while the user is interacting with the application. This results in a very responsive application that enables users and management to quickly perform their daily tasks, reducing enterprise costs.

HttpClient

Almost all applications need to communicate with the outside world, either a server or backend developed within an organization or another organization’s data. The de facto standard for this communication is the Hypertext Transport Protocol (HTTP). Fortunately for Angular developers, deciding which HTTP library to use is not a factor, because we have everything we need right out of the box with the HttpClient class.

HttpClient makes communicating with RESTful APIs incredibly simple because it has convenient methods for each of the REST verbs. We can also configure HTTP headers as simple JavaScript objects to modify our requests as necessary. To make things even easier, we can create an HTTP interceptor to intercept all HTTP calls and modify our request in one place. This is pretty handy when you need to add an authorization token to the request header and you would prefer not to do this on a per-call basis!

It is worth mentioning that we can also intercept all incoming calls with an interceptor, which significantly simplifies handling asynchronous errors across your application.

Animations

Animations are often treated as an afterthought or something that we bolt on after the main functionality is in place. There is indeed a natural progression when developing a feature, but the line between core functionality and improving the UX becomes blurry in Angular because it provides a very powerful animation engine right out of the gate. The strategic placement of motion can pay huge dividends in conveying meaning through movement and turn a fairly boring application into something that is easy to comprehend and delightful. The beauty of animations in Angular is that they are immediately available, easy to implement, and yet entirely nonintrusive.

Progressive Web Applications

Angular ships with service-worker API support right out of the box, which is a key component for building progressive web applications (PWAs). Angular has a PWA library that you can enable with a single command to start using service workers in your application. The command installs a prebuilt service-worker implementation, configures strategies for installing and updating your application, and creates the web manifest that is necessary to instruct browsers on your application. The command takes advantage of the Angular CLI, which is a critical tool for Angular developers.

PWAs are often not considered within the context of the enterprise. Rather, most developers see them as a futuristic solution for web applications to inherit the functionality of mobile applications, such as hardware integration, push notifications, background synchronization, and offline capabilities. Although this is one aspect of a PWA, it is important that enterprises do not overlook the other capabilities provided by the modern APIs that enable PWAs, especially the caching strategies.

Enterprise application users might follow a similar pattern: they arrive at work, or begin working from home, open their laptop or turn on their desktop, and then proceed to start the application or applications that they need to accomplish their job functions. These applications are open for a long duration, perhaps the entire working day. At the end of the day, the laptop is closed, the desktop is turned off, and the application is closed. Then the next day begins, and they perform the same thing.

Even though an application can be fetched and executed every single time, enterprises can employ caching strategies to keep the necessary application resources and assets on the user’s computer itself. So, every morning that the application is started, the application is right there, ready to go. This reduces the time users are waiting for applications to load. Engineers can manage updating and installing new versions of the application when new features are ready for production, providing users with a reliable experience each and every day.

Creating a PWA has never been easier, thanks to Angular. As support for PWAs continues to increase, the necessity for large enterprise applications to use the service-worker API, along with its caching strategies, will continue to increase toward the ultimate goal of providing users with a seamless install and a blazing-fast application.

Summary

Enterprises rely on consistency and best practices in application architecture for success. Angular is not merely a library for building modular web applications using component architecture; indeed, Angular provides a suite of modules that are built together, tested together, and scale together.