TechCast #103 – Christopher Thielen on the Angular UI Router

Tags: , , ,

Chris Thielen (@ChrisThielen) is a developer who is a key team member on the Angular UI Router, an independent effort to provide a view routing mechanism for the Angular platform. The UI Router was developed for Angular JS version 1, and quickly became the gold standard for routing in any application that needed multiple view areas and more sophisticated routing rules.

The UI Router is a state-machine based router, which allows it more power to vary the steps taken when making a routing decision. Not all states provide bookmarkable URLs, so you can prevent your users from stepping into the middle of a series of intermediate states later when that route is no longer valid.

We talked to Chris about the history of the router, what the team is working on for the upcoming 1.0 release, and how they plan to support the router in Angular 2 and even React.

We talk to Chris about:

  • As a current Java developer, how he found his way from writing enterprise-grade Java apps in Struts, Spring, Groovy, and Grails to contributing to the Angular UI router, the de facto routing framework for a single page application.
  • How the UI router differs from ng-route. First, the UI router is tree-based and supports nested routes and states, allowing for subviews inside of a main view. Similar to ng-route it also supports resolves, but with more functionality – in the UI router, resolves themselves can be injected into other resolves. It also makes Angular hybrid apps possible, providing a means to route to both Angular 1 and Angular 2 components in the same app. Last, it allows for optional parameters, queries, and flags within the the routing path, using the URL matcher factory.
  • What it’s like to support a project like this, in terms of time and effort.
  • Managing expectations for 1.0. What were the team’s goals? By identifying the deficiencies they saw using their issue tracker, Chris and Nate Abele were able to pinpoint the areas where users were fumbling, and address those problem areas. To ensure they weren’t wrecking existing use cases by releasing new features, they relied heavily on an extensive suite of unit tests.
  • Supporting more than just Angular 1 on the router. The team redesigned to utilize solely public APIs, and in doing so created the uirouter-core. The focus on public APIs made for simple Angular 2 and React implementations.
  • Whether or not his router is stable and ready for people to use in Angular 2.
  • The future of UI router extras. In fact, extras are how Chris got involved with being a UI Router core maintainer. Though not yet compatible in UI router 1.0, Chris hopes to develop more of them for additional functionality in the future.
  • Enhancements he’s looking forward to beyond 1.0: an official story about lazy loading, sticky states to allow multiple states, and his personal project, the UI router visualizer.