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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Building a Template

Before you get to the actual learning, you’ll build a small template to use for each of the following lessons; this will cut down on duplicate code throughout the rest of this course.

1.2 Building a Template

In this course we're going to be creating a bunch of mini projects, if you will. Each one showing off one of the features of angular UI. So in this lesson before we actually look at angular UI, we're going to build a little template that we can copy for each of our future projects. On the desktop here, I will make a directory, and we'll just call it template, and then we'll cd into template. Before we go any further, I should mention that we're going to be using Bower to install the front-end packages that we're going to be using throughout this course. That includes angular and angular UI, which is broken up into many different packages. If you don't have Bower installed, you can go ahead and install it by doing NPM install -g bower. And then we'll go ahead and install the latest version of Bower for you. Bower is kind of like NPM except for front-end libraries. And you can find out more about it at bower.io. Now, I don't just have Bower installed, I've also done a little bit of configuration. And to show you that, I'll just cat out my home directory slash bower dot .rc. And you can see that I've set the directory equal to public/lib. If this is not set, Bower will install its components into a Bower components folder. But I prefer to put them into a public/lib folder. So, you can do whatever you want, just know whenever I use public/lib instead of our script elements and things like that, that is because I've chosen to install Bower components to the public/lib folder. Okay so with that out of the way, let's go ahead and install some components. I will do Bower install angular for starters. And give it a second and that will install. And now I'm gonna do Bower install angular-ui-utils. Now when that installs, let's go to a browser and if you go to angular-ui.github.io, you might remember as we saw in the last screencast that AngularUI is broken up into several suites and UI-Utils is the first suite. As you can see, these are the tools in Utils here. Now all the rest of the angular UI components that we'll be looking at are separate Bower repositories. However, the UI-Utils is one single repository. And so since we're gonna be using that, in the next couple of screen casts I decided to go ahead and install it in our template so we don't have to do it in every single one. Okay, so, now, if we look at what we have here, we have public. And, inside public/lib, we have angular and angular ui utils. So, those are the libraries that we need. So, now, let's go ahead and open up an appt.js file. This will just be our basic application. And so, let's say angular module. And we'll just call it MyApp. For now, we will have no dependencies for each of the different Angular UI components that we want to use, we will have to add some dependencies there. So, let's go ahead and create a blank controller here. So, we'll say, controller. We'll call it MainController. And for now we'll just leave this blank, there's nothing to put in here. Let's also open up an index.html file and we'll just create our basic index template here, we can have a doc type of HTML, let's crate our HTML tags, we'll have a head and a body. Inside the head I'll put a title and the title will be Angular UI. Then, on the body, let's do ng -app='MyApp'. That is the module that we just created here. And then inside the body, let's have a div. And this div will have an ng-controller attribute and it will use the the main controller. Then, let's add a couple of script tags here. The first one will be for public/lib/angular/ I think it's angular UI, but let's just check, if I open public lib here, you've got angular, and then we want Angular.min.js and utils is utils.min.js. Okay, so lets come back here and we'll say angular/angular.min.js, and then for this one we can say public/lib/angular .-ui-utils/utils.min.js. And then the last one will be app.js. There we go and we can just make sure this is all in place by putting in a message in our main controller there. And in here, let's just do scope.msg equals hello angular ui. And now, if we come back here and open index.html, and there you go. Hello angular ui. So we know that our little template here is working just fine. So we'll be able to copy this and use it in each of our future lessons.

Back to the top