https://scotch.io/bar-talk/angular-material-vs-material-design-lite
In this article we’re going to explore the options that Google provides us when implementing Material Design in our websites & apps. While both Angular Material and Material Design Lite follow the Material Design specs,each library implements it in a different way.
It’s important to mention that both libraries have decent online documentation. They also have fast releases cycles and good support on github and related forums.
It’s also important to mention that both libraries,namespace their classes with themd-@H_301_12@ormdl-@H_301_12@prefix. Which is a good practice that helps preventing classes conflicts. Unlike the classes provided with bootstrap (btn@H_301_12@for example).
#Material Design
Material Design is a design language developed by Google. It aimed to make a consistent experience across all Google apps & platforms (YouTube,Android,Play,InBox,Gmail,etc.).
Google announced Material Design at the 2014 Google I/O conference.
Material Design emphasizes on responsive interactions,mainly through ripple effects.
Examine how the Material Response makes the element responsive to our touch input:
Source:https://www.google.com/design/spec/animation/responsive-interaction.html
Material Design also emphasizes on shadow effects to convey depth.
Watch the video again and notice how the element is being lifted on touch.
After the success that Material Design received with the Launch of Android 5,which was the first Material Design implementation,Google decided to release SDKs that allowed developers to integrate Material Design in their apps. Hence,Angular MaterialandMaterial Design Lite.
It’s not a competition between Angular Material and Material Design Lite. Google released those 2 SDKs so they can give us more choice depending on our use case.
#Getting started with Material Design Lite
Since Material Design Lite does not have any dependency,it’s going to be easy to set up.
You can use your favorite tool to grab its source code.
bower:
bower install material-design-lite --save
npm:
npm Or you can just browse togetmdl.ioand grab the source code.Next,we need to create an
index.html@H_301_12@file and include MDL’s CSS file and JS files:<html> <body> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.3/material.min.js"></script</body> </html>
Now we can immediately use any of theMDL components.
Let’s say we want to add a raised button with ripples,we just need to add the following to the body:
<button class"mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect> Button </button>
Although MDL has a Javascript library included,in most scenarios you won’t need to use Javascript at all. You only need to use the javascript library to register components when dynamically injecting templates.
componentHandler.upgradeAllRegistered();
Material Design Lite offers a variety of components such as buttons,cards,tabs,menus,sliders,text fields and more..
Here are some other elements using Material Design Lite:
Input
#Theming
Customize page. They have a cool widget that lets you choose complementary colors according to the Material Design color palette specs. And then download the corresponding CSS and include it in our project,or you can simply link to the CDN.
#Getting started with Angular Material
Angular Material depends on angular,angular-animate and angular-aria. If you’re usingbower@H_301_12@ornpm@H_301_12@to manage your dependencies,then they will be automatically installed alongsideangular-material@H_301_12@.
Let’s start by grabbing the source code for Angular Material.
install angular-material --save
Or if you’re not using any command line tool to download your dependencies,then continue reading and use the CDN links provided below.
Let’s setup theindex.html@H_301_12@page:
<html ng-app"app"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js>
"main.js Notice that we addedng-app="app"@H_301_12@to our HTML tag because we need to bootstrap our angular app insidemain.js@H_301_12@
(function(){
"use strict";
var app = angular.module('app', ['ngMaterial']);
})();
We addedngMaterial@H_301_12@as a dependency to ourapp@H_301_12@module. And now we we can get started and add another raised button with ripples,but this time using Angular Material:
<
md-button "md-raised>Hello There!</md-button