Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Basic Binding in AngularJS

1:27 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Terrance

Hi John, I ran the code and it worked, but I wasn't able to replicate the dom actively binding the div class with data.message. For example, http://plnkr.co/edit/iOj6QWX3c56hZhD25vdp?p=preview

Wrap me in a foundation component

Any thoughts about how to replicate the lesson with this sample code?

In reply to egghead.io
Avatar
Terrance

Thanks John. Appreciate the quick turn around. I general, I am going to move content delivery network (CDNs).

I see that you chose cdnjs. Is this the service you would recommend across the board?

Thanks,

Terry

In reply to John
Avatar
John

I personally concatenate and minify all of my files (even my angular templates) for the types of apps I work on.

In reply to Terrance

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?