Beginning AngularJS

Chapter 2 ■ the BasiCs of angularJs

Hello {{'Wor' + 'ld'}}

All that we have done here is to move the ngApp directive out of the opening HTML element and place it on the first
paragraph element. We also added another paragraph element, which is almost identical to the first. However this one
is without an ngApp directive. Save Listing 2-2, and load it up in your browser.
Two interesting things happen:

The first interesting thing is that the expression binding in the first paragraph worked just
as it did before. Even though we relocated the ngApp directive, the expression binding is
still nested within its boundaries and, therefore, still under AngularJS control.

The second interesting thing is that the second paragraph uses an expression too.
However, this expression binding simply renders as is; it is not evaluated at all. AngularJS
simply isn’t interested in it, because it is not contained within the boundaries of an ngApp
directive. In fact, AngularJS has no knowledge of this particular paragraph element or
anything contained within it.

In this book, I will always declare the ngApp directive on the HTML element. While it is handy to know that you
can tell AngularJS to manage only a specific portion of the DOM, I want you to see the effect of it being in the wrong
location, or missing altogether. Forgetting to add the ngApp directive is one of the most common mistakes that
beginners make.

■ Note it is technically possible, though not terribly common, to use more than one ngApp directive per page. there are

a couple of limitations, however. first, they must not be nested within each other. second, you have to write extra code to

make angularJs recognize all but the first one. it’s a relatively advanced scenario that i will not be covering in this book.

This sets us up nicely with some working AngularJS code, but it doesn’t really hint much at what makes AngularJS
such a powerful framework. Listing 2-3, while still small and simple, starts edging toward this.

Listing 2-3. Live Updates

<!DOCTYPE html>

Listing 2-3

City:

You entered: {{city}}

Beginning AngularJS

Get our desktop app

Company

Features

Documentation

Resources