Friday, 11 December, 2015 UTC
Summary
Angular Material is a robust implementation of the Material Design specification and it perfectly captures aesthetic principles of the initiative in an impressive collection of easy to use components and services.
My first attraction to Angular Material was based on the value proposition of easy to use Angular components that I could leverage to build a proof of concept very quickly. As I started to work with Angular Material, I began to notice a bunch of subtle things that were profound and intriguing. Why did everything move so well? Why did the UI elements seem to just draw a person in? It wasn’t until I went and read about Material Design that I began to understand the aesthetic concepts that were driving the Angular Material project.
I encourage you to watch the video above to see how easy it is to get started with Angular Material and use the snippets below as a reference point for your next project. Go and build something awesome!
Getting Started
Getting started with Angular Material consists of two required steps and from there you can iteratively compose your application by adding Angular Material components to suit your needs. The one point that I stress when talking about Angular Material is that the Angular Material documentation is amazing!. There are working examples for every single component with snippets that you can copy and use immediately. This is a huge bonus!
Step One: Include Angular Material
The first thing that we need to do when spinning up an Angular Material application is to include the necessary source files.
The first file we need is the Angular Material stylesheet.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc5/angular-material.min.css">
Then we need to include the Angular Material JavaScript file with the necessary dependencies. Angular is obviously a dependency, but we also need to include ngAria and ngAnimate. You can also include ngMessages which is handy if you are doing any work with form elements.
<!-- Angular Material requires Angular.js Libraries --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <!-- Angular Material Library --> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc5/angular-material.min.js"></script>
Step Two: Bootstrap Your Angular Application
The next step is to define your Angular module and include the ngMaterial submodule as a dependency.
angular.module('myApp', ['ngMaterial'])
.controller('MainCtrl', function($scope) {
$scope.hello = 'Hello Angular Material';
})
;
The next two steps are basic Angular techniques, but we will cover them anyways. First, we will add ng-app=”myApp” to our html tag to bootstrap our Angular application.
<html ng-app="myApp">
Then we will add ng-controller=”MainCtrl” to our body tag to control our view.
<body ng-controller="MainCtrl">
At this point, we have a functional Angular application with Angular Material up and running. The next step is to add components to our application to do something useful.
Step Three: Add Components
Angular Material ships with over 50 components with working examples for each one. For someone new to the project, I recommend finding an interesting component and copying the source right from the example and pasting it into your project.
For instance, you can look up the toolbar component in the documentation and copy the md-toolbar snippet and modify it for your page.
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Hello Angular Material</h2>
</div>
</md-toolbar>
We now have a toolbar in our application and so let us put some content on the page. We will use the md-content component with two additional div elements to handle the layout. Angular Material is built on top of flexbox and so layout so layout is a huge improvement to slaving in the CSS salt mines of yesteryear.
<md-content>
<div layout="row" layout-align="center start">
<div layout-fill>
</div>
</div>
</md-content>
We will then add in a material card component by with some reasonably contrived content.
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Hello!</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
Whatever you do, do not click the button below.
</p>
</md-card-content>
<md-card-actions layout="column" layout-align="start">
<md-button ng-click="releaseKraken()" class="md-primary md-raised">I Dare You!</md-button>
</md-card-actions>
</md-card>
The md-button component is calling a method called releaseKraken() on ng-click which we want to use to create a material dialog. All of the complexity of managing dialogs within an Angular Material application is handled via the $mdDialog service which we are injecting into our MainCtrl.
.controller('MainCtrl', function($scope, $mdDialog) {
$scope.hello = 'Hello Angular Material';
$scope.releaseKraken = function() { }
})
Showing a dialog in your application consists of creating the alert and the showing the alert. To create an alert, we will call $mdDialog.alert and pass in an object with the properties for our alert. You can also do this via a promise syntax which may be more stylistically appealing to some people. To show the alert we just created, we will pass that instance into a $mdDialog.show method call.
$scope.releaseKraken = function() {
$mdDialog.show(
$mdDialog.alert({
title:'Danger',
textContent: 'You asked for it!',
ok: 'Run!'
})
);
}
And the end result will look something like this.
Review
Just to review what we have covered, getting started with Angular Material consists of three main steps.
- Include Angular Material source files and Angular dependencies.
- Create your main Angular module and include ngMaterial as a submodule.
- Add in Angular Material components to meet your requirements.
And to reiterate my main point, the Angular Material documentation is amazing!. You could make an entire application just by copying and pasting source code from the component examples on the site.
Resources
Material Design
Angular Material
5 Reasons to Fall in Love with Angular Material
The post Getting Started with Angular Material appeared first on AngularClass.