1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Basic Binding in AngularJS

    angularjsAngularJS

    Binding is a core feature of AngularJS. It provides a simple mechanism for integrating your HTML with your data via {{bracketed expressions}}. In this video, John covers the basics of binding to get you started.

    Code

    Code

    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
    Discuss

    Discuss

    Transcript

    Transcript

    Double curly braces and angular represent binding, so anything you put inside of them will be rendered out. A string of hello renders hello. Two plus two renders out four. So a simple hello world might look like hello and then another binding of world.

    To make this work all you need to do is include the angular script, so just from a CDN or wherever you want to grab it from. The ng-app attribute on the HTML tag, you'll see if I remove ng-app that it no longer renders those out. But if I add it back it renders it out just fine.

    Let's go ahead and extract this greeting. We'll say, "first.greeting" and move that into an input to something called an ng-model where we say, "first.greeting," meaning that this is a property and then this is an object. We're watching for changes to this property.

    Whenever this changes and I type something like hello, we get hello world. Bonjour, I get bonjour world. Salutations and so on and so forth. Where it gets really cool is if we start using that to render out into other attributes. If I wrap this with a div and move him up inside the div, add an ng-class and say, "first.greeting here," anything I type in here will apply a CSS class like well or alert, alert-danger.