Material Design: Angular Material as an Application of Material Design Lite

Google’s Angular Material provides a well-built toolkit for any developer that wants to use material design principals in their applications. The framework was designed to be a reference for developers to learn Material Design Lite (MDL) and subsequently Material Design philosophy.

So the big question is…

In this article, we’ll discuss some of the benefits of using Angular Material (AM), and some of the challenges a developer who has already worked with a similar framework may face when learning it. We’ll do a brief walkthrough of a sample application built using AM. The samples are built on top of ASP.NET MVC 5 with Angular Routing on the client for navigation.

Built on Angular

AM leverages Google’s AngularJS which gives developers a client side framework capable of two-way databinding, templating, reusable code, and many other features that would otherwise need to be handled with a server-side framework such as ASP.NET Web Forms or MVC.

Directive-Based Architecture

Modern UI frameworks such as MDL require a good deal of boilerplate HTML to function as intended. Angular Material offers directives which encapsulate this boilerplate markup so that developers can focus on building the application rather than implementing the components.

Here is an example:

Implementing a progress bar with AM looks like this:

<md-progress-linear md-mode=”determinate” value=”{{percentOfProgress}}”></md-progress-linear>

And the generated markup you would otherwise have to manage looks like this:

Easy Theming with Built-in Services
If you are using only MDL and you want different color palates for different sections of your site you will need to reference multiple copies of the style sheets. We have an overview of MDL theming located here if you would like to review in the context only MDL. Angular Material offers a built-in Angular service which lets you change the color of your site on page load without needing to reference different style sheets. Simply change the primary and accent colors in the config to whichever you would prefer using $mdThemingProvider (example here) and bootstrap Angular with a different configuration where you would like the colors to be different.

With only MDL this would require separate style sheets for each combination and color, but with AM it looks like this:

angular.module("SampleApp")
.config(function ($mdThemingProvider, $mdIconProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('amber');

If you would also like to handle changing icons you can do that as well pretty easily:

    $mdIconProvider
.defaultIconSet("Content/svg/avatars.svg", 128)
.icon("menu", "Content/svg/menu.svg", 24)
.icon("share", "Content/svg/share.svg", 24)
.icon("google_plus", "Content/svg/google_plus.svg", 24)
.icon("hangouts", "Content/svg/hangouts.svg", 24)
.icon("twitter", "Content/svg/twitter.svg", 24)
.icon("phone", "Content/svg/phone.svg", 24);
})

Now all we need to know is what colors you want to use.

A Word from a Developer

As a developer I found a lot of “cognitive friction” while learning how to use Material Design. This I believe this was mainly due to having worked extensively with Twitter’s Bootstrap for years. The paradigms and terminology are just different enough to be easily misinterpreted when you already think you know what they mean. We’ve written short tutorials for using bootstrap and an introduction to the Material Design Language (MDL) that might helpful if you’re looking for additional details.

I found that using Angular Material as a toolkit alongside MDL helped to clue me in on how certain layout paradigms were implemented within MDL. It also allows me (the developer) to learn via osmosis while still making progress. Given that the developers here are well versed in Angular as a framework; we could use this competency to accelerate our learning of MDL through the eyes of AM.

A Sample Site

Below is a screenshot of the front page of the sample site, featuring a simple left navigation menu that collapses and opens with a button in the top left when the display is small, a header with the site title, and a section for content:

The view from a smaller display:

Here is the HTML that created it (main navigation and content section):

<body ng-cloak layout=”column” ng-controller=”AppController”><br />
<md-toolbar layout=”row” class=”md-toolbar-tools”><br />
<md-button class=”menu md-icon-button” hide-gt-sm ng-click=”toggleMenu()”><br />
<md-icon md-svg-icon=”menu”></md-icon><br />
</md-button>
</md-toolbar>

<div flex layout=”row”><br />
<md-sidenav class=”md-whiteframe-4dp” md-is-locked-open=”$mdMedia(‘gt-sm’)” md-component-id=”left” ng-click=”toggleMenu()”><br />
<md-list><br />
<md-list-item ng-repeat=”page in pages”><br />
<md-button ng-href=”#{{page.url}}” ng-click=”$mdSidenav(‘left’).toggle()” flex><br />
{{page.name}}<br />
</md-button><br />
</md-list-item><br />
</md-list><br />
</md-sidenav>

<md-content flex id=”content”><br />
<div ng-view></div><br />
</md-content><br />
</div>
</body>

The markup for the content section (Home & Sample Controllers):

<div layout=”column” layout-padding><br />
<h1>{{ title }}</h1><br />
<md-card md-theme=”‘default'” md-theme-watch><br />
<md-card-title><br />
<md-card-title-text><br />
<span class=”md-headline”>Content</span><br />
<span class=”md-subhead”>Sub heading text</span><br />
</md-card-title-text><br />
<md-card-title-media><br />
<div class=”md-media-lg card-media”></div><br />
</md-card-title-media><br />
</md-card-title><br />
<md-card-actions layout=”row” layout-align=”end center”><br />
<md-button>Ok</md-button><br />
<md-button>Close</md-button><br />
</md-card-actions><br />
</md-card><br />
</div>

Aside from theming the app (sample above) and the routing configuration, the only other necessary JavaScript was this:

    angular.module("SampleApp")
.controller("AppController",
function ($scope, $mdSidenav) {
$scope.pages = [
{ name: 'Home', url: '/' },
{ name: 'Sample Page 1', url: 'sample1' },
{ name: 'Sample Page 2', url: 'sample2' }
];

    scope.toggleMenu = function toggleMenu() {
$mdSidenav('left').toggle();
}
});

Conclusion

Angular Material provides a solid foundation to build and learn Material Design principles. The implementation of Angular allows for easy reusability of code within an application. This leads to a cleaner, more stable application, which is something that we at IT Solutions value highly, both as a standard for ourselves to maintain as well as a way to add value for our clients.

If you would like more information on building an application that is easy to use or have an existing need please contact IT Solutions today.