AngularJS

Chapter 2. Anatomy of an AngularJS Application

Unlike typical libraries where you pick and choose functions as you like, everything in Angular is designed to be used as a collaborative suite. In this chapter we’ll cover all of the basic building blocks in Angular so you can understand how they fit together. Many of these blocks will be covered in more detail in later chapters.

Invoking Angular

Any application must do two things to start Angular:

1. Load the angular.js library
2. Tell Angular which part of the DOM it should manage with the ng-app directive

Loading the Script

Loading the library is straightforward and follows the same rules as any other JavaScript library. You can load the script from Google’s content delivery network (CDN), like so:

<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>

Using Google’s CDN is recommended. Google’s servers are fast, and the script is cacheable across applications. That is, if your user has multiple apps that use Angular, she’ll have to download it only once. Also, if the user has visited other sites that use the Google CDN link for Angular, she won’t need to download it again when visiting your site.

If you prefer to host locally (or anywhere else), you can do that too. Just specify the correct location in the src.

Declaring Angular’s Boundaries with ng-app

The ng-app directive lets you tell Angular which part of your page it should expect to manage. If you’re building an all-Angular application, you should ...