06 May 2013
First off, we need to have a reference to the AngularJS file, which you can download from here. In this example I downloaded the Uncompressed build of the Stable branch (1.0.6).
Then we create a simple html file:
Go ahead and open the site. You should see just a simple textbox.
Now try typing into the textbox and watch what happens. What you type in the textbox automatically appears beside it. It’s magic!
Well, it’s not really magic. It’s AngularJS data binding in action. Let’s take a look at how it all works.
There are only three things that are new in the file: the
ng-app attribute, the
ng-model attribute, and the double curly braces.
ng-app attribute tells AngularJS what the scope of the Angular application is. In this case, it will be the entire html file. This attribute is required in all Angular applications. Including this attribute is more of a setup step rather than affecting actual behavior (though of course no behavior will happen if this step is skipped).
Now let’s look at the
ng-model attribute. In the first paragraph I mentioned that AngularJS supports an MVC pattern and data binding. This is the syntax of binding an input control to a model called myInput. It’s basically saying: “Whatever gets written to this textbox will also be the value of the myInput variable, and vice-versa”.
Finally, we have the double curly braces. This is a binding from the model to the view. It’s saying: “Whatever the value of the myInput variable is, that will also be my value”.
Congratulations, you have now made your first Angular application!