I recently had the opportunity to review a number of angular.js compatible UI frameworks. All of these frameworks are fairly new, and therefore they all give some thought to how they appear on phones and tablets.

Angular Material

Angular Material has been created by Google to follow the guidelines for Android’s Material UI. In my opinion this is the best UI for angular. Given its ties to Android it works great on mobile, but it also is designed to scale up to also look good on larger screens. Additionally, the flex box based layout system for Angular Material is more complete and more reliable than what is offered by the other frameworks.

Ionic

The Ionic framework by Drifty is a mobile focused UI that I have used before. Ionic has good looking controls, and mostly follows the design found in iOS 7. Compared to the other frameworks, the touch targets for Ionic are larger and better optimized for phones. By design, Ionic is meant to be used for creating Cordova apps, but can also be used for websites if you copy two files from their github.

UI Bootstrap

Unlike the other frameworks, Bootstrap does not include any JavaScript and is implemented strictly through css. While this lightweight approach is great, UI Bootstrap is also the least optimized for mobile and is the least integrated with angular.

LumX

Created by LumApps, Lumx is another framework that follows Android’s Material design guidelines. Unfortunately, when compared to Angular Material, it is not quite as good. Also LumX has the far more third party dependencies than the other frameworks, making it more difficult for set up. On the plus side, it has the best selection of built in colors for theming your app.

Using multiple frameworks

Additionally there is the option to use a number of these frameworks together at the same time. This is not always an option as the css for Bootstrap and Ionic conflict with one another. But sometimes it can work. In particular the components of Ionic make a good compliment to the layout and navigation of Material.