Modules, Apps, and Controllers

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.