Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Controllers

    John LindquistJohn Lindquist

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

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss