AngularJS Front-end Material design2 oktober 2015

Material design is popping up everywhere and it is becoming a standard for websites, apps and other graphical user interfaces. There are a few ways to implement material design into your workflow. Since Trivento loves working with AngularJS, this blog/tutorial specifically takes a look at implementing Angular Material.

Angular Material provides a series of modules, directives, css classes and so on which help create a modern looking interface conform the material design system. Angular Material covers graphics and animations like the look and feel of buttons and inputs, but it also has a layout system which creates responsive layouts. Therefore it could replace frameworks like Bootstrap and Foundation.

Setting up Angular Material in your project

To save some time, fork this codepen which includes all the dependencies. If you like to stick to your own project, include the scripts below in your index.html. Don’t forget to include the modules in your app.js: ngAnimate,ngAria,ngMaterial

Angular Material CSS
https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css
https://fonts.googleapis.com/icon?family=Material+Icons

Angular Material Dependencies
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-aria.min.js

Angular Material Javascript
https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js

Layout

To get a responsive layout Angular Material uses flexbox. Flexbox is explained very briefly on the Angular Material website so for better understanding of flexbox it might be smart to take a look at it separately. In the codepen project you will see an implementation of a whiteframe, Angular Materials’ implementation for the paper element. To give this whiteframe responsive measures we can wrap it into a div with the following attributes:

flex=“50" offset=“25”

You will notice the content within the div now has a width of 50% with a margin left and right of 25%. To add responsiveness, add the same attributes for small devices like this:

flex-sm=“90" offset-sm=“5”

The content will have a margin of only 5% on small devices.

Basic input

We will create a simple register page using some inputs from the Angular Material demos. First create a user object in javascript with a default gender on the $scope:

$scope.user = {
 gender : "MALE"
}

Then add a basic textfield by adding the following code to the html:

<md-input-container>
 <label>Name</label>
 <input ng-model=“user.name" required>
</md-input-container>

And add a select for the gender by adding the following code to the html:

<md-input-container>
 <label>Gender</label>
 <md-select ng-model=“user.gender">
  <md-option value=“MALE”>Male</md-option>
  <md-option value=“FEMALE”>Female</md-option>
 </md-select>
</md-input-container>

To finish this simple register page, we add a submit and a cancel button:

<div layout="row">
 <md-button flex>cancel</md-button>
 <md-button flex class="md-raised md-primary">Register</md-button>
</div>

The page should look like this:

angular materail tutorial

Validations

To give users some feedback on the input, we can use the ng-messages module. To use this we first wrap up the inputs in some form tags and give the form a name:

<form name=“registerForm">
 //the input
</form>

Since the gender input always has a default value, we only have to check if the name field is filled. Add a name to the name input field:

<md-input-container>
 <label>Name</label>
 <input ng-model="user.name" name="name" required>
</md-input-container>

To use ng-messages we need to import this module. In codepen simply add this url to the javascript settings:

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js

Afterwards, include the module ‘ngMessages’ to the list of dependencies so that the directive ‘ng-messages’ can be used. Add the following code below the <input> :

<div ng-messages="registerForm.name.$error">
 <div ng-message="required">
  Sorry but we don't register people who don't have a name
 </div>
</div>

When the field now is left empty the message should look like the image below. The cool thing about ng-messages is that you can add multiple ng-messages who all trigger by a different validation.

angular material tutorial validatie

Colors

Colors are a very important part of the material design system. Angular Material has a predefined color palette. A color palette consists out of 4 types of colors: a primary color, an accent color, a warning color and a background color. These colors are automatically used where they should be used according to the material design system . For example, a validation message on an input automatically has the warn color. When starting a project the default colors are set to:

  • primary = indigo
  • accent = pink
  • warn = red
  • background = grey

This is a nice palette, but default is boring so lets change it. Do this using the $mdThemingProvider by adding this piece of code to the javascript:

amtApp.config(function($mdThemingProvider) {
 $mdThemingProvider.theme('default')
 .primaryPalette(‘your-primary-color‘)
 .accentPalette('your-accent-color')
 .backgroundPalette('your-background-color')
 .warnPalette('your-warn-color');
});

There are only a few colors available to pass as an argument. These colors are listed on the Angular Material website. However, with this cool tool you can create your own color palette.

Final result

The final result should look like the codepen here. I added some icons to get an idea of the accent colors.

For now this is the end of this small introduction to Angular Material. The examples given in this tutorial are a small collection of what Angular Material has to offer so hopefully they made you curious enough to find out what else is out there! Good luck!