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!
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 - 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.