Beginning AngularJS

(WallPaper) #1
Chapter 2 ■ the BasiCs of angularJs

Now for something very exciting: if you move down to the eighth line, you will see an AngularJS expression,
as delimited by the opening and closing double curly braces—{{ and }}. We keep things nice and simple here and
concatenate the two string literals 'Wor' and 'ld'.
AngularJS expressions are powerful, and you will see many of them in this book. Here we use one in a somewhat
contrived way, simply to illustrate how they are put into action. The interpolated value is, of course, the string World.
When we place an expression between double curly braces like this, we create an expression binding. In a
nutshell, this means that the value of the expression is bound. Anytime it changes, the binding will update too.
Bindings and expressions will be second nature to you in no time, as these are at the core of how AngularJS works.
You can see the result of this in Figure 2-2.


Figure 2-2. The output of our Hello World listing


I said it was very exciting, didn’t I? Well, perhaps I exaggerated a little bit. Nonetheless, it is an AngularJS
application, and it gets you started on your journey. We will do something a little more interesting shortly, but let’s
summarize the key steps we took in Listing 2-1.


•    We used the ngApp directive to inform our page that it should consider itself under the control
of AngularJS.

•    We then used a script element to include the AngularJS library.

•    Just to prove everything was hooked up correctly, we used a simple AngularJS expression
binding to do some basic string concatenation.

That wasn’t difficult at all, but let’s tinker with Listing 2-1 a bit, just to get a little bit more insight into how
AngularJS ticks. Listing 2-2 is a revised version.


Listing 2-2. Tinkering with the Hello World Listing


<!DOCTYPE html>




Listing 2-2


Free download pdf