Chapter 2 ■ the BasiCs of angularJs
■ Note the ninth and later versions of internet explorer are supported. at the time i write this, support for internet
explorer 8 is about to be dropped.
Of course, you should always know your target audience and test your applications across as broad a range of
devices and platforms as possible. Fortunately, the AngularJS community is large (and growing fast), so it’s definitely
worth heading in that direction if you have questions. Of particular interest are the case studies that you can use to get
a sense of AngularJS in action (see http://builtwith.angularjs.org)..)
Your First AngularJS Application
Let’s start our journey toward AngularJS enlightenment by creating a very small and simple application, albeit one
that demonstrates little more than how to include AngularJS on a web page, and use it to display the traditional Hello
World greeting.
Save Listing 2-1 into your BeginningAngularJS folder.
Listing 2-1. Hello World
<!DOCTYPE html>
Hello {{'Wor' + 'ld'}}
While this is about as simple as it gets, there is actually quite a lot going on here. It’s well worth dissecting this and
reviewing how each line works, as there are a few important concepts at play—concepts that are fundamental to the
way AngularJS works and, therefore, key to how to think in AngularJS.
■ Caution angularJs isn’t quite like other frameworks, and it may require you to think a little differently than you
are used to. i initially found that i was writing angularJs code with my jQuery hat on, and this proved extremely
counterproductive! i will talk more about this shortly in the section “Declarative vs. procedural programming.”
In the first line of the program, we have the HTML5 doctype. Though this is not strictly necessary for AngularJS to
work, it is the doctype you should be using for today’s rich Internet applications.
The second line is where it becomes interesting. We have declared an ngApp directive within the opening HTML
element. I will expand on this directive (and directives in general) a little bit later in this chapter and then much more
in Chapter 5. We use ngApp to let AngularJS know which element is to be considered the root of the application. As we
have declared it within the HTML element, we are declaring that the whole document is to be “under the control”
of AngularJS.
Moving down to the fifth line, you can see that we have included the AngularJS library using the script element.
If we didn’t include the AngularJS library, we wouldn’t see any AngularJS goodness.