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 so if you have a
look at the check box got this nice little
ripple that indicate that you've actually
kind of interacted with it and there's quite a few
cool little bits and pieces, and one of my favourite
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 so 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
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 and
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 lets 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.
and that we it's done once the command prompt is returned back to you
cool so 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 smaller so you can see it
Angular material is the package that we've got but there are are 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 comma, jump to the next line
and single quotes and that's the CSS done, the next thing we need to do
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
and then the next one is Angular Material the JavaScript file for that
If you've gone through any of my previous videos you 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.
okay 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 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
Alright so 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, underneith 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 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
so 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
the layout
we're using the flex, flexbox system
so 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 that
paste that in there
so that will give me that top part, but that won't give me the content bit down the bottom
so to do that what I'm going to do is this time 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 channel if you haven't already, checkout
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