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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.1 Introduction

In this first lesson you will get an introduction to AngularUI and a preview of what we’ll cover in the lessons ahead. We’ll take a look at utilities, modules, and other AngularUI components, all of which we’ll cover in more detail later in the course.

Related Links

1.1 Introduction

Welcome to this Tuts+ course on AngularUI. My name is Andrew Burgess, and I'm going to be your instructor for this course. AngularJS is a popular JavaScript framework for building front-end web applications. One of the reasons that it's so popular, I think, is because it's very extensible. Now, in a previous course here on Tuts+, I showed you how to build a web application from scratch with AngularJS. And if you've seen that course, you hopefully learned a lot about how to use the many tools that AngularJS gives you. However, in this course, we're not gonna discuss Angular directly. We're going to discuss the AngularUI library. Now AngularUI is a set of tools that you can use to complement the features that Angular has built in. As you can see here, its tag line is, the companion suites to the AngularJS framework. Now, AngularUI is divided up into a bunch of different sections. As you can see here, we have the UI utilities, which is a utility package which interestingly enough has no external dependencies. Basically, what this means is when you install the AngularUI utilities, it doesn't install any extra packages or have any other needs to use these. All you need is Angular and the UI Utils file. Then there's also the UI-Modules. And these, as you can see here, are standalone AngularUI modules with external dependencies. And the idea here is that all of these are basically angularized versions of other libraries. So for example here, the CodeMirror IDE, or the Ace IDE, or the TinyMCE are all libraries on their own that you can use outside of Angular. And were actually created originally for use outside of Angular. These are all libraries that allow you to do rich text editing or code editing in the browser. Now, what these three AngularUI modules do is basically convert these to Angular versions of those libraries so that you can use them in your Angular application. Theres also Google Maps here. And if you've used Google Maps before, you know that that is a standalone JavaScript library. But this version wraps that with some Angular code so that you can use Google Maps easily in your Angular application. Theres the small UI-Alias which allows you to rename plugin directives and create mini templates. Basically, it's an easy way to give shorter or alternative names to things. There's UI-Bootstrap, which is Twitter Bootstrap written natively in AngularJS. There's NG-Grid, which is almost like a high tech table or a spreadsheet type thing within the browser, and we'll be able to use that in Angular. There's a special router, which extends the built-in routers that we can use in Angular. And finally, we have some IDE Plugins which is not really part of AngularUI. But if you use TextMate, Atom, SublimeText, or Brackets, use these to get AngularJS support in your favorite text editor. Now, I should say before we begin, that we wont be discussing every single feature of all of these different components of AngularUI. Primarily because some of these features are actually built into Angular now. I think when AngularUI originally came out, Angular was pretty new. And some of these things, particularly some of the Utils things, couldn't be done in native Angular just yet. And so the authors of AngularUI made those things possible through some of their own code. So we won't talk about the things that you can do in Angular natively. But what we are gonna do in this course is cover the best of the features that AngularUI gives us. And talk about the things that I think you'll find most useful when you build your own Angular applications. So with all that behind us, we are ready to get started. So I'll see you in the next screen cast.

Back to the top