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

2.1 The IDE Modules

You’ll start your discovery of AngularUI modules with the CodeMirror and ACE modules, which wrap those libraries and make them easy to use from within your Angular application.

Related Links

2.1 The IDE Modules

In this lesson, we're going to move on in AngularUI, and look at some of its modules. If you recall from the AngularUI homepage, we have the UI-Utils, which was a utility packet with no external dependencies, and that's what we've just looked at. So we're now moving onto UI-Modules. Now just to show you how up to date AngularUI is, the Select2 module here was not deprecated when I recorded the introductory lesson to this course. And now you can see it's deprecated, and instead you're supposed to use UI-Select. So we will be looking at UI-Select later on. But for now, let's look at a few of these UI-Modules. Three of these modules are very similar. We have the Codemirror IDE, the Ace IDE and the TinyMCE. Codemirror and Ace are text editors and TinyMCE is a more general purpose content editor. We're not gonna look at all three of them. We're just gonna look at Codemirror and Ace, which are the two code IDEs, and how you can use these in Angular. Now remember, all of these projects here that are considered UI-Modules in AngularUI, are free standing projects that have been around for probably longer than Angular, in most cases, on their own. What these UI-Modules are, are wrappers that allow you to use these libraries within your Angular application as Angular directives. So, we're going to have to install not only the module for that specific library, but also that library itself. We're here on the desktop. So, I'm gonna copy -r and copy our template, and we'll just call this ides, and let's cd into ides. And right now, if I list what's in public/lib, you can see that we have two packages, angular and angular-ui-utils. We actually don't need utils anymore, so I'm gonna go ahead and remove public/lib/angular-ui-utils. Okay. So now that that's gone, you can see the only library we have is angular. But let's start with CodeMirror. To use CodeMirror, we need to do bower install and first of all we need to install CodeMirror itself. So, we can go ahead and do that. That was quick and easy. But then we need to go ahead and install angular-ui-codemirror. And this is the library that we'll use to wrap codemirror. Now notice we didn't actually have to install codemirror first. As you can see here, that was a dependency of angular-ui-codemirror. This is actually more clear when we install the ace editor. Instead of installing ace first, let's do bower install and we'll say angular-ui-ace. As you can see, angular-ui-ace installed ace-builds, which is a bower repository for the ace library. So now we can do ls public/lib and you can see how we have a little bit more going on here. We have codemirror and the codemirror angular-ui wrapper, and we also have ace and the angular-ui-ace wrapper. Okay, so now let's go ahead and open up our index.html file. Now currently the only script that we have here, we'll remove the ui utils and we only have angular and our app.js, but we need a little more than that. Let's start with codemirror, which means we need to add a link to both the codemirror source code and the angular module for codemirror. Let me flip back here and open up public/lib so we have a look at this. We have codemirror and angular-ui-codemirror. So for codemirror, we need codemirror/lib/codemirror.js, and for the ui, we just need that and then ui-codemirror.js. Okay. So let's copy this script tag here. And we can say, public/lib/codemirror/lib/codemirror.js, public/lib/angular-ui-codemirror, and then ui-codemirror.min. So, those are the two files we need. We actually also need a CSS file, this one right here, lib/codemirror/css. So, up here let's add a link and then we can add an href of public/lib/codemirror/lib/codemirror.css. All right. Let's open up app.js and in here let's add ui.codemirror. Okay, so now that we have codemirror being added, let's actually use it. So inside our main controller here, let's go ahead and add a div and we can just add ui-codemirror to this div, and let's close the div, and let's see what happens. Head back to the browser, and if we refresh the page, we can't actually see anything, but if I click here, you can see that we can actually start writing some simple code-like stuff here. Okay, that's pretty impressive, but let's see what else we can do. So right now, there's actually not that much to see. Let's see if we can change some options and get this to look a little different. In this div here, where we have codemirror UI, we can actually add some options. And let's add a cmOpts object, which means that over here in our controller, we need to create our cmOpts object right here. And now we are ready to add some options. So let's do a lineNumbers: true. We could do indentSize: 4. And tabSize: 4. Right? So these are basic. And now if I come back and refresh the page, you can see that now these things are being taken into play. Now we have line numbers, and it's looking a little better. However, there are two things we don't really have. First of all, the coloring is very basic. There's no actual theme involved here. And second of all, it would be nice if we had some syntax highlighting. So let's go ahead and add both of these. Now, to do these things with codemirror, we need to do two things. First of all, we need to add options for them. So we can add a theme here, for example, let's say the theme is solarized. And second of all, we need to add a mode, which we'll say is JavaScript. And the mode is basically the syntax highlighting, what language are we expecting to be written in this text area. However, if I refresh the page, this doesn't actually happen by default. What we need to do is add some links to files for the theme and the mode. Now if we come back and look at what came in this bower package, you can see we have a theme folder and a mode folder. The mode folder, we need mode/javascript/javascript.js, and then in the theme folder, we have a whole bunch of CSS files, and we can see right down here solarize.CSS. So, all we have to do is add another style sheet here. Codemirror slash, instead of lib, it's slash theme, and the theme is solarized. And if we do that we should see some immediate changes in the coloring here. But, to get the syntax highlighting we need to, let's copy the first one here. And codemirror/mode/javascript/javascript.js. Okay. So now, when I refresh the page, and there you go. And so now you can see we have the solarized theme as well as JavaScript being highlighted just fine. Okay. So that is codemirror. Let's look at the Ace editor now. If we come back to our project here, you can see AngularUI ace. We just need UI ace, and then in builds all we want is source min no-conflict. And then in here we want, there's tons of file here, thankfully, we only have to worry about one of them. And that is the top one here, ace.js. Amazingly, there is no style sheet that we need to add for ace, and there is no syntax highlighting sheet that we ever need to add. All of it can be done simply by, so we have public/lib/ace-builds/src-min-noconflict/- ace.js. And then the other one is lib/angular-ui-ace, and then we have ui-ace.js. So now we're ready to actually add our div and it's, works exactly like codemirror, we can say ui-ace. And we can patch it, let's say aceOpts and we'll close the div. And now we can do something very similar, we'll do $scope.aceOpts and we can say theme equals, let's say twilight and we'll set the mode equal to html, and as I already mentioned, we don't have to add a theme or a mode file. And, of course, before I forget, while we're in this file, we do need to add ui-ace as one of our module's dependencies. So now if we come back to the browser and refresh the page, notice that we're not actually seeing our ace editor down below here. However, if we go to our elements here and inside our controller, you can see we have our ace element here, and it certainly has a lot inside of it. The problem is that by default, the ace editor class has no height. So what we need to do is give it some styling of our own. And we'll say the class ace_editor, and we will give it a height of 400 pixels. And if I refresh the page, you can see now we have this editor right here, and it's black, so that probably means our twilight theme's working just fine. Let's see how it does in styling HTML. So I can say, H2, and look at that. It actually auto completed our H2, that's pretty impressive. We can say AngularUI. And let's have, maybe a paragraph. That's pretty impressive, I think, with the whole completion of the elements there. And, if we add new lines, you can see that we are getting indentation just fine. Notice we're even getting some error messages here. Wow, look at that. Hover over it, and we even get expected tag, name, and got something else instead. Pretty impressive. Oh, we have an information bubble here. Wow, start tag without seeing a doctype first, expected doctype html. This is a pretty impressive editor, ace is, here. I think if I were gonna use these in one of my projects, I would wanna use ace. It's pretty impressive that we only need to add the one ace file, and if you look inside the ace code, it's using a version of require js to require other files as necessary. So that's pretty cool, but of course, codemirror is very customizable as well. So if you would prefer, you could go ahead and use that. Now, for both of these great editors, there's a lot of customization you can do. If you go to their respective websites, which I'll have links to underneath this video, you'll be able to see all of the different options you can set. And, there are many, many more options. And, I should say, that all of the options that are available on the respective websites, even though those have nothing to do with the angular wrappers, you can use in set just as we did by passing them in an options object to the directives in your own angular application. So AngularUI as we're using in here is really just a very helpful and easy to use wrapper for these very mature projects. So if you need an IDE within your Angular application, you have two great choices to choose from right there.

Back to the top