Creating a Basic AngularJS Application

Now that you understand the basic components in the AngularJS framework, the intent and design of the AngularJS framework, and how to bootstrap AngularJS, you are ready to get started implementing AngularJS code. This section walks you through a very basic AngularJS application that implements an HTML template, an AngularJS module, a controller, a scope, and an expression.

For this example it is expected that you have created a basic Node.js web server as described in Chapter 1, “Jumping Into JavaScript.” The folder structure for this example will be as follows. Future chapters will have a similar code structure for their examples with just the chapter folder changing:

■ ./server.js: Node.js server that serves up the static content.

■ ./images: Contains any images used in examples in all chapters.

■ ./ch01: Contains any HTML files used for the examples in this chapter.

■ ./ch01/js: Contains the necessary JavaScript for the examples in this chapter.

■ ./ch01/css: Contains the necessary CSS for the examples in this chapter.

After the server.js web server is running, the next step is to implement an AngularJS HTML template, such as first.html in Listing 2.1, and an AngularJS JavaScript module, such as first.js in Listing 2.2.

The following sections describe the important steps in implementing the AngularJS application and the code involved in each step. Each of these steps is described in much more detail in later chapters, so don’t get bogged down in them here. What is important at this point is that you understand the process of implementing the template, module, controller, and scope and generally how they interact with each other.

The web page defined by Listings 2.1 and 2.2 is a simple web form in which you type in first and last names and then click a button to display a message, as shown in Figure 2.1.

Figure 2.1 Implementing a basic AngularJS web application that uses inputs and a button to manipulate the model and consequently the view.