Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

3.1 The UI-Bootstrap Component

It’s time now to take a look at Angular UI components. In this lesson, you’ll discover the UI-Bootstrap component, which makes it incredibly simple to build all the Twitter Bootstrap components.

Related Links

3.1 The UI-Bootstrap Component

In this lesson, we're going to move on from talking about AngularUI-Modules. You'll recall that we've talked about UI-Utils here, and then we talked about some of the UI-Modules. However, there are a few other libraries that we're going to discuss that are definitely not utilities and are not considered modules, but have, I guess you could say, a larger feature set. These are UI-Bootstrap, NG-Grid, UI-Router, and UI-Select. And we're going to start with UI-Bootstrap. UI-Bootstrap is really, really cool. Let's click on the site button here and I'll show you what's really, what's so neat about it. Now Bootstrap here refers to the Twitter Bootstrap library, which of course includes a huge set of UI components. Now, these components can be a little tricky to build yourself because bootstrap really often requires a lot of markup, a lot of classes, et cetera. And that can be a little tiresome to write out. So the AngularUI Team has written a bunch of directives to make this much simpler. As you can see from this directives list up here, we have a whole bunch of directives. Let's look quickly at the Tabs directive. We have a couple of different tab examples, but the code down here at the bottom is the cool part. Right here is the primary code. You can see we have a tab set element, and then inside those we have a tab, and the tab has a heading, and the tab has a bunch of content. Another tab here with a heading and content, et cetera. Now, if we were actually to write this in native HTML, this would require a lot more coding, but the AngularUI Bootstrap library makes this really quite simple. Now obviously in one lesson here, I can't show you every single component of the Angular Bootstrap library. This library will be most useful to you, I think, if you are familiar with Bootstrap and have used it before. But for this lesson, we're gonna look at just one of these components, and that is the accordion component. So, I'm here in our Bootstrap project, and we'll go ahead and install it with bower install angular-bootstrap. All right. Now, let's go ahead and open up our index.html page. And we'll replace utils here with angular-bootstrap and then a ui- bootstrap.min.js. Now, if you think about it, since Bootstrap is primarily about HTML, there's not a whole lot that we need to do in the JavaScript here. But of course, we do need to remember to require our dependency. So I'll go ahead and say ui-bootstrap, there we go. And we will come back to add something to this file a little bit later. But for now, let's begin our accordion. It's actually very simple. We can just start with an accordion tag, and then inside of this, we have accordion-group tags. And the way this works is actually very simple. Each accordion group element has a heading object, for example, let's say first heading, and then inside of this we can have some content, so let's say, this is the content for the first heading. Now, let me go ahead and copy this and we can paste it down here for the second heading, and I'll just change this to second and I'll change this to second as well. Now, if we try to load this up in the browser right now, it won't look exactly like what you would expect. As you can see, we currently have absolutely nothing at all, and that's because of a bunch of errors here. It says it has something to do with templates. And this brings me to something I forgot to mention. If we look at our project here, and look inside angular-bootstrap, you can see here that we have ui-bootstrap, but we also have ui-bootstrap-tpls, and that's short for templates. See, the way these Bootstrap directives work is they need to load in the HTML templates that take the place of this HTML. Those templates are not built in by default to ui-bootstrap. It's expecting to pull those HTML files via an AJAX request from the server. We want to use them built-in here, so we need to use -tpls. So, I'm just gonna add -tpls. All right. So now, if we refresh this page in the browser, notice we do have our content here, but it doesn't really look like much of an accordion. Of course, if we go into the HTML here, you can see that this has been replaced with exactly the right content here. We have a div with a panel group, and then another div inside here that is a specific panel. And then we have a panel heading, and then we have the panel collapse. What you can see here is that our library has successfully replaced the little bit of HTML that we wrote with all the necessary HTML for these UI elements. However, we need to add the Bootstrap styling. Now by default, the Bootstrap styling doesn't come with the Angular Bootstrap library, so we have to do bower install bootstrap. So, up at the top here, let's add our link with a rel with a rel of stylesheet. And we'll set the href equal to public/lib/bootstrap/dist/css/bootstrap.m- in.css. There we go. So now, if we come back to the browser and refresh the page, you can see that we have something that looks a lot more like an accordion. We can click these headings, and we can see the different content. Excellent. Let's add some dynamic content, though. So back at app.js, let's add a few we'll say scope.sections and let's make this an array, and we can have an object here where we have the let's say heading, which will be a First Dynamic Section. And then we can also have a content. Then I'll duplicate this a few times and we'll replace this with a Second Dynamic Section and, and finally, Third Dynamic Section. So now, we can actually, just like any other Angular directive, use these to create dynamic elements. So we can say accordion-group, ng-repeat, and we'll say, for s in sections, and then we can give this a heading of s.heading, and then let's create our ending tag here, and in here we can say s.content. Excellent. So now, if I refresh the page here, you can see we have a bunch of dynamic sections, which work exactly the same way as the static ones that we created. So, while we didn't look at all of the different Angular Bootstrap UI utilities, I hope you can see that this would be a really helpful library to have when you're building web applications that use Bootstrap pretty heavily. The only drawback I can see to a library like this is that if your application is made up of a lot of Bootstrap UI components, that's a lot of HTML to replace when the page is loaded, instead of just loading directly from the server. However, depending on your application, that may be a drawback that you're willing to accept.

Back to the top