Modules, Apps, and Controllers

A free video tutorial from Anthony Alicea
Software Developer, Architect, and UX Designer
4.6 instructor rating •
8 courses •
278,440 students
Lecture description
AngularJS enables you to control the DOM via modules, apps, and controllers -- all without polluting the global namespace.
This lecture contains downloadable source code. Download the file below and unzip (or extract) it.
Learn more from the full course
Learn and Understand AngularJSMaster AngularJS and the Javascript concepts behind it, design custom directives, and build a single page application.
06:51:33 of on-demand video • Updated September 2020
- Learn fundamental Javascript concepts that power AngularJS.
- Write quicker, better AngularJS code by discovering how AngularJS itself is built.
- Become fluent in AngularJS terminology, such as dependency injection, services, directives, transclusion, and more.
- Realize the power of dependency injection, and how AngularJS accomplishes it.
- Design custom directives and save time and energy with easily reusable components.
- Understand what a Single Page Application (SPA) is, and how they work.
- Build a Single Page Application (SPA) in AngularJS.
- Be the coder that explains AngularJS to everyone else, because you understand it better than anyone else.
- Get new free lectures during 2015, keep up with the development of AngularJS 2.0, and get a MASSIVE discount on a future AngularJS 2.0 course in 2016!
English
I know what you're thinking. We haven't done any AngularJS code yet. Well, that all stops now. Let's get into the structure
of an AngularJS application. Modules, apps, and controllers. We'll start here. All right, let's start off by setting
up our AngularJS application. I have some HTML here. The same HTML basically that
I had with some Bootstrap, but now I'm loading AngularJS. Let's go over there for a moment and
let me show you what that looks like. If you go to angularjs.org. This is the website for AngularJS. You can read the documentation here, but
it actually can be pretty confusing. But all I wanna show you here is,
under Develop > Download, you can then go to this list of
all the versions of Angular that have ever existed, at least to what
they have stored here, since 0.1. We're gonna go all the bottom to
the release candidate for 1.3. I go on there and there's lots of files. So we're going to ignore most of these for
now, we'll come back a bit later. But here is angular.js. This file is the non-minified version. Let me zoom in just a little bit. It has lots of comments and lots of code. This is angular.js, this is all this code
that's been written and given to you freely, so that you can build web
applications using all of these features. Now what I'm going to do is I'm
going to grab the minified version, which gets rid of all
the unneeded whitespace and renames variables to really short names,
just to make the download size smaller. And I grab this address. And I just plop it in
a script tag in my HTML page. And now I have Angular. And I'm ready to go. That's all you have to do. Now, I still have an app.js file. And I'm going to go over there and we're
going to start building my AngularJS app. Now, remember that whole concept about
not polluting the global namespace? Well, AngularJS is gonna make
sure that we don't do that. In fact, we're only going to put one
variable into the global namespace. And that variable is our app,
our application. So, I'm gonna call it myApp. And then I'm going to use all of this
code that was available to me inside the AngularJS source code. So if you look around,
there's this global angular object, if you find it around
in the code eventually. And inside that global angular object,
there's all kinds of code, and one of those things is a module. So that's hidden down deep down inside
the core of Angular code as well. And that module is a function
that takes a name, which is the name of your app, I'm just
going to name it the same as my variable, it's a nice convention, and
it takes an array of dependencies. Now, we're not going to have
any dependencies right now, and we'll explain what those are pretty soon. But for now, we have one object
in the global namespace, and only one, that is an Angular module. That is to say, an app. Now, remember how we said that the model,
that is the data and the objects, want to be connected
to the view automatically? That's that MV star,
that MV whatever concept? Well, this is where we start doing that. We're going to tell Angular where
in the view this app lives, that is to say, what part of the view
is going to be controlled by the app. Now, I usually like to just
put it at the very top. ng-app=myApp. What is this doing? Well, remember, we're allowing
ourselves a custom attribute. This is one that all that code over here, this AngularJS code, it looks for
this particular attribute. And it says, okay, everything inside
of this, everything from where this tag starts to the bottom, or everything
inside that area of the DOM tree, the Document Object Model, stores all
this stuff as basically kind of like a tree where this is the top and this is
the child, and this is the grandchild. So everything inside
of it is now connected to this variable in the global namespace. And from here that means that
this app now has this view. Get that? So ng-app, this custom attribute
is what AngularJS looks for, and it looks at the value of that and
matches that to a module name. And notice, I just happened to name the
variable the same as the module name, but the string that you pass in,
that's what it looks for. You could name this
variable whatever you want. But that's what it matches on, it finds an Angular module with that name,
so I can connect it to this part of the DOM,
to this part of the HTML. At this point, then,
everything else we add, we're going to add to the myApp variable. Everything else will be
underneath that object so it doesn't pollute the global namespace,
and it will take advantage of all of the special things that
an Angular module can do. The first thing we're going to do, the
thing you really are always going to do, is declare a controller. So we do .controller. That's available to you because
myApp is an Angular module. And this controller object or
function that was defined inside all that AngularJS code,
for any Angular modules, takes a name. I'm just going to call it mainController. And it takes a function. I'm going to finish the function,
finish the controller, and that's it. I've just created a new controller. It has a name and a function. In other words, a place to put the code
associated with this controller. Now, again, we're looking to
connect the view to the model. This is the controller for the view. Now, while this whole thing is the app,
I can actually define, then, a view inside my HTML. It can actually be a sub-part of my HTML. I can make a div and do ng-controller, and
then give it that name. AngularJS does something very
similar to what it did with the app. It sees that custom attribute in the DOM, in the HTML, and it says,
I'm gonna look for a controller on this app with that name. And it'll find it,
cuz I named it the same. And then now any code inside of here
will be associated with controlling the HTML inside of here. Get that? The controller in here will be the model,
and this is the view. And AngularJS is going to
keep those things bound for me without me having to do
any special work myself. All that code in that angular.js
file does that already. So now you have the bare bones
of an AngularJS application. A module, just one variable
sitting in the global namespace. And a controller with that
same app defined in the HTML, using these custom attributes and the controller defined using
these same custom attributes. And now you have essentially your very first AngularJS application.