AngularJS Material Design in your MEAN Stack

In this tutorial video we’ll add the angular-material package to meanjs, and set up the mean stack to use the angular material toolbar header example.

We’ll do the following:
1. Install angular-material and add it to our bower.json file
2. Have a look through the angular-material files
3. Add the key angular-material and angular-aria files to the MeanJS stack
4. Add ngMaterial as a dependency to the app
5. Add the angular material toolbar to our app
6. Have a look at angular material in action!


# To save the bower settings for future use:
bower install angular-material --save


# map the Assets:

    "/angular/angular.js"
    "/angular-aria/angular-aria.js"
    "/angular-animate/angular-animate.js"
    "/angular-material/angular-material.js"


# Include app dependency ngMaterial
angular.module( 'YourApp', [ 'ngMaterial' ] )


# set user-scalable=no

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

Video Transcript

Hi I’m Shristi. I’ve been getting a lot of questions in the last couple of weeks from people asking me about how they can get started using angular material design package. I thought it would be really cool to spend a couple of minutes and just take you through that process.

I’m just about to create a new app, and I thought this is a perfect time to do that. If you’re not familiar with Angular’s Material Design, if you jump across to material.angularjs.org you can check out the website there’s a little video on here as well.

I’ll jump across to the demos, and you can get a little bit of a feel for what material design is all about. The ideas is, I guess to involve the user in the interactions that they’re having with your app and particularly for touch screen type devices. If you have a look at the check box it’s got this nice little ripple that indicates that you’ve actually kind of interacted with it and there’s quite a few cool little bits and pieces.

One of my favourites are these inputs, the inputs kind of let you put something in there and then change around as you go and add data to the field, so it’s quite interactive, quite fun for the users to have a bit of a play with.

So how do you actually get started? Well, it’s actually very, very simple and I’ll go ahead and show you how to do that so I’m just going to jump across to my Bower.json file and I actually have Angular Material in my Bower.json file, if you don’t I’ll show you how to add that in there but before you do that, one of the things that you need to make sure you do is have Angular 1.3 or above in order to use the Angular material package.

To install Angular material we just need open up a terminal and in here you can you can just type in ‘bower’ if you don’t have Webstorm or you don’t want to use this terminal you can just go into any command-line utility such as command prompt or PowerShell, x-code etc or something like that.

So, I want to do ‘bower install angular-material’ or bower install angular-material –save so that’s all we need to do.

If you want it to automatically be added to your bower.json file once you have installed it. You can just add a space and then minus minus save (–save) on the end. For some reason the ‘e’ has disappeared off the end should be ‘save’.

I’ll try that again. Nope it doesn’t like it, it should be save.

Just throw that in there and it should go and install for you, I’ve actually got it installed so what I’m going to do is just go through and update to give you a better feel for what we need to so let’s let that happen cool, that was nice and quick, I actually did have it installed previously, so that’s what you should end up with.

We know it’s done once the command prompt is returned back to you, now that we’ve got it installed, we need to actually reference we’ve installed so if you have a quick look at it, just jump to public and down to lib, just going to make it smaller so you can see it.

Angular material is the package that we’ve got but there are a few other packages that are installed with it, such as Angular Aria. So that wouldn’t have been in your initial file that’s been installed as part of Angular Material.

What we need is the CSS file, the JS file, and we also need to grab the JS file from Angular Aria as well and so it’s pretty straightforward but there’s a little trick to how you actually make sure that packages are installed in a particular order so that they can work for you.

Jump up to Config and go to Assets and we’ll go across to default and I’m just going to pop down again to Angular Material. So we want to reference this CSS here.
Quick short-cut when you’re using Webstorm just right click, click on copy reference and just put in a comma, jump to the next line and single quotes and that’s the CSS done.
The next thing we need to do is just grab the Angular Aria package, just grab a reference to that one and we want to put that one just after Angular JS, so plug that in there and just make sure you’ve got a comma on the end.

Then the next one is Angular Material, the JavaScript file for that. If you’ve gone through my previous videos you’ll know that when we’re looking at Default, we’ve got the actual CSS and JS files going in here the minified versions go into your Production Assets.

To put the Angular Material JavaScript file in we’ll plug that one after Angular Animate so put that one down there, and make sure you’ve got a comma on the end. So now we’ve got references to those three files they are the key ones that we’re going to need.

Alright the next step is to actually add a reference to the module so that Angular knows that there is a module there, once the files are available for it. To do that I’m just going to close config and close public as well, jump down to modules, we’re going to go to Core and across to Client and go to App and config and here are our dependencies.
As we’ve come across before, what we need to do is add ‘ngMaterial’ here, so it’s just single-quote its n g and then Material with a capital M, now that we’ve got that.
We’ve got the package, we’ve put in the references to the particular files we will need, we’ve told Angular that we need to load the particular dependencies as part of initiating Angular and now there are a couple of other things that I’ll show you that might come in handy for you.

Go across just down to Server – > down to Views, and just open the layout view we’ve got this line in here which refers to the view port, just after that ‘=1’, put in a little comma and just put in user-scalable = no. And what that will do, is just help to reduce the latency for when we’re using our app on touchscreen devices, so there’s usually a 300ms delay so that should help fix that up.

Now while we’re here, wouldn’t it be cool if we could actually bring in part of Angular material and use it in our app? Before I do that, I’m just going to load up the app and show you what I’ve currently got so I’ll just jump into Gulp and get that up and running cool, so let’s have a look at the app – refresh that so let’s have a look at our app, we’ve got the default black bootstrap header at the top.

Let’s have a look at what Angular Material provides to us, and let’s see how we actually set our app up to use it. So I’ll jump over to demos, jump down to Toolbar. Toolbar is the bar at the top. Let’s say we wanted to do something like this, it’s blue and it’s got a little shadow here if you look closely, underneath the toolbar there. So to add that, this is the code that we need I’m going to make that a little bit smaller – bring it over here like that and just put Webstorm over here.

Thankfully enough, I’m actually already in the layout server view so this is where I can update the header. At the moment when we set up the app we have a body which sets up header and then it goes and finds the content which is the rest of the Angular app around all of this.

I’m just going to plug in, so if you’re not sure what I’m doing, I’ll just show you what I’m actually trying to do here. So if I go down to layout and just have a look at the grid system, and even the container elements, it’ll give you a bit of an idea of what we’ve got to play with. We’ve got rows and columns – for the layout we’re using the flex, flexbox system.

What I’m going to do is put in here div layout=”column” because I want this to be a column layout and I’m going to do layout-fill, and then within that what I’m going to do is just jump back to demo and Toolbar so you can see what I’m looking at, so what we’re going to do is just put in the md-toolbar reference here, now plug that in here and the closing tag there and then align that together and then I’m going to grab the header and paste that in between these two tags.

I’ll just make that a little bit smaller so that you can see it. The other thing that I’m going to do is remove what’s currently in that class, because this is a bootstrap class at the moment, and I’m going to change that up here, which is md-toolbar-tools so I’ll copy and paste that in there so that will give me that top part, but that won’t give me the content bit down the bottom.

To do that, what I’m going to do is this time is md-content, because I want to scroll all the way around this content and within that I’m going to put a little bit of padding. Just class md-padding just like that, and now what I can do is just copy this bit, I don’t want any of the other bits, I just want that which will help us load up our app, and clean it up like that so it looks something like this.

We’ve got a div with layout column, which gives us the column (stacked grid) that we had a quick look at before, we’ve got md-toolbar which then encapsulates our header, and our header has a class of md-toolbar-tools, and then underneath that we’ve got md-content, with a class of md-padding and that is where I’m going to leave that so hopefully that’s not too much, or too scary, but let me save that up and show you what that will do for us.

So I’ll just jump across to the app, and there you go, now I have and nice bright blue header, and I’ve got that nice gentle kind of shadow underneath that which gives that Material Design kind of feel so I hope that helped!

Please subscribe to the YouTube channel or check out www.bossable.com for more details. Let me know if you’ve got questions that I can help you out with, and I’ll see you again very soon.