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, AngularJS module, controller, scope, and expression.

The first step is to implement a basic Node.js webserver. The code in Listing 20.1 shows a basic Node.js webserver that serves static files that serve the following routes:

/static: Maps to ./static in the project directory and contains the HTML documents to be served statically.

/static/js: Contains the necessary JavaScript for the examples.

/static/css: Contains the necessary CSS for the examples.

/images: Maps to ../images from the project directory and serves any images used in examples.

The basic static server in Listing 20.1 is used in the AngularJS examples in the following chapters.

Listing 20.1 node_server.js: A basic Node.js static webserver

Click here to view code image

01 var express = require('express'),
02 var app = express();
03 app.use('/', express.static('./static')).
04     use('/images', express.static( '../images')).
05     use('/lib', express.static( '../lib'));
06 app.listen(80);

The next step is to implement an AngularJS HTML template, such as first.html in Listing 20.2, and an AngularJS JavaScript module, such as first.js in Listing 20.3.

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 webpage defined by Listing 20.2 and 20.3 is a simple web form that allows you to type in first and last names and then click a button to display a message, as shown in Figure 20.1.

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