AngularUI Fundamentals

AngularUI has established itself as the companion framework of choice for building great AngularJS applications. This code-focused course shows how to build apps with AngularUI.
Course info
Rating
(314)
Level
Beginner
Updated
Jan 29, 2015
Duration
3h 44m
Table of contents
Introduction
UI-Bootstrap
UI-Router
UI-Modules with External Dependencies
UI-Modules - Native
UI-Utils
Description
Course info
Rating
(314)
Level
Beginner
Updated
Jan 29, 2015
Duration
3h 44m
Description

AngularUI has established itself as the ultimate companion framework for building AngularJS applications. In this course, we'll see how to quickly get up and running with AngularUI. We will cover UI-Bootstrap so we can leverage the Bootstrap framework without a jQuery dependency. We will then dive into UI-Router to see how this powerful routing alternative can be fully leveraged in your apps. We will cover numerous modules, including UI-Calendar, UI-GMap, UI-Grid, UI-Select, and more! By the end of the course, you'll be able to start building your own apps using AngularUI on top of AngularJS!

About the author
About the author

Steve is a Program Manager with Microsoft on the Azure Global Engineering team. Prior to joining Microsoft, he was a 7-time Microsoft ASP.NET MVP.

More from the author
Dapper: Getting Started
Beginner
1h 28m
Jun 12, 2019
ng-bootstrap Playbook
Beginner
2h 48m
Nov 20, 2018
More courses by Steve Michelotti
Section Introduction Transcripts
Section Introduction Transcripts

UI-Bootstrap
In this module, we'll start our exploration of AngularUI with UI-Bootstrap. In short, UI-Bootstrap provides a native Angular experience for the well-known Bootstrap library. This module will be extremely code intensive. I'm going to start with a very brief introduction to UI Bootstrap so that we have a baseline understanding of what it is and why it was created. I'm then going to walk you through the installation of UI-Bootstrap into our application. Then we'll spend almost the entire module in code showing the various components. But before we dive into code, I think it's a good idea to have a basic understanding of why UI-Bootstrap was created. As I mentioned in the beginning, UI-Bootstrap provides a native Angular experience for the Bootstrap library. Out of the box, the components you get with Bootstrap are dependent on jQuery, and UI-Bootstrap enables us to eliminate that jQuery dependency from our application. If we have an application that's not using jQuery, this enables us to have a smaller download size because we don't have to have a script reference to the jQuery library. The other benefit is that by implementing all of the Bootstrap components into our Angular code, in many cases we get performance enhancements because these components can be optimized to do things the Angular way. In this module, we'll be covering all the components that you see below. As I mentioned, this module will be very code intensive. Rather than show a bunch of contrived examples, I think it is better to use these components in a more real-world application so we can understand them more fully.

UI-Router
In this module, we'll examine the AngularUI UI-Router. As you'll see, UI-Router is a very powerful alternative to the router that is built in to Angular out of the box. We're going to start by looking at the core concepts and components of UI-Router because it's important to have a foundation of understanding before we dive directly into code. I'll then show the various ways you can activate a state. Next, I'll dive into URL parameters. Then we'll see how we can incorporate nested states and views into our app to enable a more elegant solution for our previous deep-linking of tabs. After that, I'll show all of the state change events that you have available. I'll conclude with a demo of multiple named views. We'll cover a lot of code in this module, so let's get started.

UI-Modules with External Dependencies
In this module, we'll explore several AngularUI modules. The common thread of these modules is that they have external non-Angular dependencies. This is important because JavaScript, of course, had a rich ecosystem well before Angular came along. The components I'll show in this section are essentially examples of AngularUI putting an Angular facade over these already-established components. We're going to start by looking at the UI-Calendar. This is an Angular wrapper over the extremely feature- rich fullcalendar. js component. I'll then show UI-GMap, which is an Angular wrapper over Google Maps. There are actually two such components listed on the AngularUI website--UI-GMap and UI-Map. I'll be showing UI-GMap as it's been under more active development in the last year. Finally, I'll show UI-Ace, which is an Angular directive for the Ace editor that you can embed directly into your apps.

UI-Modules - Native
In this module, we're going to continue our exploration of AngularUI modules. However, whereas in the last section we looked at modules that had third-party dependencies like jQuery, in this next section, we're going to look at native modules that have no third-party dependencies. Not only does this result in a simpler management experience, but also in many cases, it results in better performance because the libraries can take advantage of native Angular features. The first module we'll look at is UI-Grid. This started out as ng-Grid, which did have a third-party dependency on jQuery. But now ng-Grid is being rewritten as UI-Grid to be a true native module. This grid supports a ton of features. The next module we'll look at is UI-Select. Similar to ng-Grid morphing into UI-Grid, UI-Select took a similar path. It started out as UI-Select2, which had a direct dependency on jQuery and Select2, but now we have UI-Select, which is a native Angular module with no direct dependencies. This directive allows grouping, multi-select, custom HTML, and more. Finally, we'll look at UI-Alias. Simply put, UI-Alias allows us to rename directives, which can greatly simplify our code by making template definitions more concise. We'll look at all these components in the upcoming section.

UI-Utils
In this module, we're going to look at AngularUI UI-Utils. The UI-Utils are a collection of small utility libraries and are described on its website as the Swiss Army Knife of AngularJS tools. These tools are not related to one another. You may only opt to use one of the utils. You don't have to use them all. They are all native tools, so there are no external dependencies on any other JavaScript libraries. Installation is pretty simple. You can include a single script file if you want the ability to easily access any of the utilities, or you can just reference the individual script file of the utility that you're using. In practice, I found that it's usually easiest to just include the single script file so you have access to all of them, but it's your choice depending on how far you're going with your optimization. This screen shows the utilities that are currently available in UI-Utils. As you can see by just glancing at the list, these tools span a wide range of uses. In this module, I'll cover a large number of the most commonly used utilities. I'm going to do this with a series of online CodePens rather than forcing them into the Elite Schedule admin app that we've been building throughout this course. So, the following will be a series of quick and independent demos so that you can easily get an idea of what each one does and how to quickly get up and running with them. Let's have a quick look at the website. Here I am on the regular AngularUI website. If we scroll down a little bit, we can see the first one is UI-Utils, and it lists a bunch of them right here. If we click on Site, here on the UI-Utils site we can simply scroll down, and we can see that we have event binder, format, highlight. As we scroll down, we can see all of the different utils that we have available to us, and we can get a quick description and demo of each one. Now, let's jump into our first demo.