Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.




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



    Become a Member to view code

    You must be a Pro 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
    orLog In




    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.

    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.

    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.