VenCKi Code: AngularJS + Material Design = ngMaterial

Image Reference
http://material-design.storage.googleapis.com/

Google’s Material Design is beautiful. A lot of work seem to have gone into building such a sophisticated UI design paradigm. Material Design aims to get UI elements close to real world objects like paper. They carefully observed light, shadows and various other aspects before coming up with design paradigm for Material. As a side note, it has some inspiration from Metro design but improved it further.

Material design understandably has lot of presence in Android. Many developers adopted design guidelines and built beautiful apps.

image ref: www.polymer-project.org

On the other hand web too is getting traction towards Material Design. Polymer’s paper elements look and perform smooth. AngularJS community is aiming to come up with UI elements that confine to Material design standards. Angular Material is an internal Google project in that direction.

How do I get started with Angular Material?

npm install angular-material

bower install angular-material

Angular Material has following dependencies. Include these scripts to get started.

i) AngularJs – of course

ii) ngAria – ARIA stands for Accessibility Rich Internet Applications, a W3C spec for assistive technologies.

iii) ngAnimate – For animations of UI elements and transitions.

iv) ngMaterial – All directives and services of Angular Material Library

Create your module for the app

// Angular Material module name is ngModule angular.module(‘ngMaterialSample’, [‘ngMaterial’]);

</script>

</body>

Responsive UI

Material design aims to fit all screensizes and devices. That’s

a huge spectrum from big screen TVs all the way to smart watches.

Angular Material depends on Flexbox CSS3 for consistent UI across screensizes, devices and responsive aspects of the UI. It is attribute driven.

Use layout=”row” or layout=”column” to arrange elements horizontally or vertically.

Following creates a Material Design style toolbar using ngMaterial directive. It has a Button and Title. Just so that they don’t wrap over to next row, it’s called-out to be a row.

<md-toolbar layout=”row” layout-padding>

<div class="md-toolbar-tools" layout="row" >
    <md-button >
        <ng-md-icon icon="menu" size="24" style="fill:white" layout="row" layout-align="center center"></ng-md-icon>
    </md-button>
</div>

<h2>Welcome to Angular Material</h2>

</md-toolbar>

Note: all ngMaterial directives start with md-. Following code snippet has another directive md-content which is like workspace of the page or widget in question.

<md-content layout-padding>
    <div>

<!--

The directive “input container” expects two elements Label – the text that animates as you click and start typing in the text box and the text box it self. -->

        <md-input-container >
            <label>First Name</label>
            <input type="text"/>
        </md-input-container>

        <md-input-container >
            <label>MI</label>
            <input type="text"/>
        </md-input-container>

        <md-input-container >
            <label>Last Name</label>
            <input type="text"/>
        </md-input-container>
    </div>
</md-content>

Code above aligns all elements vertically. To make first name, middle initial and last name appear in one line add layout=’row’ on the div parent.

But on a smaller screen it gets congested. They need to be lay'ed out in one column. use layout-sm=’column’. "sm” being small, under 600px screen width.

Following is the complete list of attributes you could use. They could be used with most/all of flexbox attributes.


-sm	Devices less than 600px wide.
-gt-sm	Devices greater than 600px wide.
-md	Devices between 600px and 960px wide..
-gt-md	Devices greater than 960px wide.
-lg	Devices between 960px and 1200px.
-gt-lg	Devices greater than 1200px wide.

I’ve the following seed project to get started with Angular Material.

https://github.com/kvkirthy/angular-material-seed-project

It uses various directives (md-tab, md-cards, md-grid, md-sidenav, md-toolbar etc.) and services ($mdMedia, $mdToast $mdBottomSheet).

Calling out $mdMedia service – helps figure screen dimensions by previously listed table. Consider following code,

// variable is true if screen is greater than medium

$scope.isVisibleOnCurrentScreenSize = $mdMedia("gt-md");

Little more about the seed project,

How do I get started with the Seed Project?

1. Clone seed project from here

2. Open command prompt at project location and perform npm install.

3. Run the project on any local web server.

Note: As you make changes to the project run browserify main.js o- app.js

Tech Stack

1. Angular Material

Angular Material Library. It makes it easy to develop Material design app using AngularJS. It depends on AngularJS, Angular Aria and Angular Animate.

2. NPM

Node Package Manager - takes care of installing the library in question and all it's dependencies.

3. Common JS

Module loading within JavaScript made easy. NodeJS style of writing code. It works pretty well with NPM packages.

4. Browserify

Unlike node servers, browsers by default don't work with CommonJS. This makes it compatible.

In conclusion, I’m excited about ngMaterial. At this point, one need to tread carefully as it’s still RC4 (at the time of writing this blog). But it’s promising for developing rich Material Design apps with AngularJS pretty soon.

VenCKi Code

Monday, June 22, 2015

AngularJS + Material Design = ngMaterial