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-<xxx> 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.
[00:01] 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.
[00:22] 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.
[00:40] 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.
[01:05] 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.
[01:29] 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.
[01:55] 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.
[02:12] 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.
[02:51] 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.
[03:15] 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.
[03:46] 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.
[04:02] 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.
[04:24] 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...