Chapter 2 ■ the BasiCs of angularJsHere we have declared the expected ngApp directive and AngularJS script reference with which, it is hoped,
you are already comfortable. The two important lines are the two lines contained within the body element. The first
declares a standard HTML text input, but with one very important addition—the ngModel directive, which we have
assigned the value of city. The second line, via an expression binding, uses this value to reference the text that the
end user enters into the text field.
Save Listing 2-3 and load it up in your browser. This is where the magic starts to happen. Start typing into the text
field and watch as the text in the paragraph below the text field updates in real time. What makes it so magical is the
amount of code that it took to achieve this result—not very much code at all, no?
It’s not really magic, of course. At least not in the Harry Potter sense. However, something very sophisticated is
clearly taking place. Already, we can see that AngularJS must be hard at work for us, monitoring the application for
data changes, updating the DOM to show these changes to the end user, and other things that we are yet to encounter.
Other frameworks require that you tackle some or all of this work yourself. AngularJS wants you to focus on your
primary concern—your application, not its plumbing.
Another interesting point is that we didn’t actually write any JavaScript code! You will find that AngularJS has
a strong lean toward a declarative, as opposed to a procedural, coding style. Obviously, you have to write JavaScript
at some point or other, but AngularJS encourages you to put this in the right parts of your application. As you might
expect, a good portion of this book will look at just what constitutes these “right parts.”
Declarative vs. Procedural Programming
A classic example of a declarative programming language to which many developers can easily relate is SQL. When
you write an SQL query against a database such as MySQL, you don’t really do the heavy lifting yourself. Instead, you
give rather high-level instructions to the database engine via a relatively simple select statement. You don’t worry
about how the database engine should pull the data together in the most efficient way, and you don’t worry about
things such as control flow and looping constructs—you just issue a select statement and expect the database to give
you back the data that you want. In a sense, you declare what you want, and it does the work for you.
Procedural programming, on the other hand, requires a more detailed and lower-level set of instructions. In
the extremely procedural C language, for example, you must take great care to reserve memory, detail the specific
instructions you want to be executed, and then worry about freeing up memory, making sure your algorithms perform
well and are thoroughly tested, and all sorts of other things.
Declarative programming is much more convenient than procedural programming, because it is often faster and
easier. You generally don’t have the same kind of granular control that you do with procedural programming, but you
often don’t need it. In fact, as you will see, AngularJS won’t mind at all if you want to adopt a procedural approach
when it suits you.
Directives and Expressions
Let’s have a look at a few more AngularJS directives. Directives are a great example of the declarative programming
style that AngularJS encourages you to adopt. They are also at the heart of AngularJS, and they are a crucial part of
how you will deliver a great user experience.
What Is a Directive?
AngularJS uses directives to augment HTML with extra functionality. Essentially, directives are a convenient way to
declaratively call JavaScript functions. We will look at directives in much more detail in Chapter 5. For now, though,
following is a decent overview of directives.
Let’s try out the very handy ngShow directive. Check out Listing 2-4.