Controllers are the 'glue' of an AngularJS application. They connect your markup with your data and act as a sort of switchboard. 

Controllers

[00:00] To add a controller to our document here, we'll say NG-controller, specify the name we'll call it when we create it in our JavaScript, and then specify the name we'll call it when we refer to it in our HTML. To create our controller, I'll create a script tag and say, "angular.module," which is where we'll store our controllers. We'll give it a name of "app," which needs to match up with the name we refer to it in our HTML.

[00:27] App here needs to match the app here. We'll pass in an empty array of dependencies which doesn't matter for now, and then say ".controller." Now we give it the name that we refer to it earlier, first control, and then we'll pass in a named function of first control, and we're naming this function to make debugging easier later on down the road. Lastly, for convenience, we'll say first equals this, just to handle JavaScript scoping issues later on down the road, and then we can say first.greeting equals first.

[01:01] Then we finally have our controller hooked up to our HTML. As you can see, the property greeting of first is hooked up to the greeting in our NG model.

Controllers

Share this video with your friends