7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.1 Modules Primer

This episode provides a short primer on the syntax for creating Angular modules, and getting Angular to boot them into the page.

4.1 Modules Primer

Let's take a look at creating modules in Angular. You may have noticed in the other examples we looked at, that we never said what part of the app started first. We just put the ng-app attribute on the page and Angular did the rest, including with all the models and data that we were using. This is a really important part of Angular, that we don't explicitly define how the app bootstraps itself to the page. Angular looks at what we've written and figures out on its own how it needs to load things. Another important part of Angular is modular code, and so being able to write modules which cleanly separate their functionality will be important part as you start to build bigger Angular apps. So let's create ourselves a simple module, and I'll show you how it all fits together. So we start off by using the Angular variable. Angular introduces this global to the page, and it's kind of like the jQuery dollar sign. So we say angular.module, and give our module a name, I'll call it myApp. The next argument is an array. This, later on, will be to specify what dependencies the module has, but for now we'll leave it blank. Now we're gonna create a controller, so I'll again use the dot syntax and create a controller and give it a name and call it Example. Then we can do exactly the same as we would before by supplying a function for the controller, and this takes the scope parameter again. Now we can do things like set scope.name is Example. And create a div that will have the ng-controller directive, and we'll specify the Example controller and close the div off, and then use the name in here. But you'll notice that this is the template variable, this hasn't been swapped out for the real data we have down here. Well that's because now we've put all the data in a module, in this case, myApp. Angular doesn't know how to start itself, we have to tell it that our main module is the myApp module, and we do this by setting a value on the ng-app attributes. Ng-app is equal to myApp, and now you'll see that our word Example has been swapped into the page, and I can add things to this and it will update. So that's just a really quick intro to Angular modules and the basic syntax for declaring them. We'll go into using this in more detail in the next videos.

Back to the top