Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Angular Material: UI Components with Dynamic Data

Angular Material UI components have been designed from the ground-up to use dynamic, live data. Supporting AngularJS interpolation, expressions, and databindings… each component exposes an intuitive API and fully supports the existing ng- directives published in AngularJS.

Let’s replace the hard-coded, static HTML with dynamic, mock data using AngularJS data bindings, ng-repeat, and the ng-click directives. Our UX remains unchanged, yet now we are using custom application logic and dataservices.

This course has been created by Thomas Burleson & Aaron Frost.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Angular Material UI components have been designed from the ground-up to use dynamic, live data. Supporting AngularJS interpolation, expressions, and databindings… each component exposes an intuitive API and fully supports the existing ng- directives published in AngularJS.

Let’s replace the hard-coded, static HTML with dynamic, mock data using AngularJS data bindings, ng-repeat, and the ng-click directives. Our UX remains unchanged, yet now we are using custom application logic and dataservices.

This course has been created by Thomas Burleson & Aaron Frost.

Avatar
Hector

Hi, is very difficult to follow the instructions in the video because the code available is not the same, i.e. the code needed for de Users.js, UserController.js and UserService.js is in one single file in the available code, separate the code in 3 files doesn't work for me, obviously for my lack of knowledge of course but for people like me, self-taught, is hard to track the guidance. Any chance of getting the code exactly like in the video?

In reply to egghead.io
Avatar
Peter

I feel exactly the same.

In reply to Hector
Avatar
Ian Poston

I noticed the sidenav avatars are overriding the border-radius 50% in this example. You can fix this by adding .avatar svg {border-radius: 50%;} to the app.css file. It was bugging me so I found the answer here http://stackoverflow.com/questions/31115101/styling-md-icon .

In reply to egghead.io
Avatar
Sina

How to generate the "avatars.svg" ????

Now let's replace the hard-coded user data in our templates with live mock data from some services. I added onto the page there are users, user service, and user controller. Let's take a quick look at them. Start with user service. It's a simple Angular service, and it returns just this array of mock users.

It has a name. They have content. They also have this avatar ID that we'll come back and talk about in a second. Let's look at the controller. It's a simple Angular controller. It uses our user service to fetch the users, and it sets them onto the controller.users property.

It also has a select user function which we'll use as we click on the lists over here to update the content area. Then let's look at the users file. It simply defines the users module. Because we put it all in the users module, we need to make sure our app depends on that module. Let's go ahead and add it over here, users.

Since that's set up, let's go ahead and start adding these pieces to our page. We'll go ahead and an NG controller, user controller as UL. Let's start replacing some of this data. We'll get rid of the second list item because we only need one. Let's repeat on this, NG repeat equals U in UL.users. Perfect.

Let's add our click right here. We'll say NG-click equals UL.select user. We'll pass in the user that's currently in the iteration. We can see we've got a lot more of these here in the list now. Let's replace their names and watch them update. We'll say u.name, looking good.

Let's update the avatar. We'll say u.avatar and they should all disappear. We'll come back and talk about that in a second. Now let's come down here and update the current selected user, say UL.selected.name. Perfect.

We'll say UL.selected.content and now the content pops up. Let's get rid of that one as well and say UL.selected.avatar. Great. Now when we click, the content area updates with the users content and name. It's looking good. We still need to fix these avatars. Each user in our system has an avatar ID on them.

Those avatar IDs can also be found in avatars.svg which is the list of all of our users' avatars. We're going to pre-populate these users, these avatars, into our app by using the MD icon provider. This way, our MD icon directives can load avatar images by simply passing the IDs from our user objects.

Let's come back to our main page. We're going to use a config block to do this preloading. We're going to get rid of our run block and say .config. We're going to say function. Let's inject that MD icon provider. Down here we're going to use. We're going to call a specific function on it, default icon set.

Because of how powerful Angular material is, we just pass it, the avatars.svg, and it knows how to go ahead and populate those. We're going to say 128 because each of the avatars in that file are 128 by 128.

You'll notice our icons are back. When we click, everything updates. I want to point out that, because we preloaded all the avatars into MD icon service, the MD icon directive...All we have to do is simply pass it in ID, and it uses the MD avatar service to go ahead and inject those into the dom.

If we look here, we check out the SVG. Those are straight SVGs from the file. Now our starter app is loading live mock data for the list in details view...

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?