- Why AngularJS?
- Understanding AngularJS
- An Overview of the AngularJS Life Cycle
- Separation of Responsibilities
- Integrating AngularJS with Existing JavaScript and jQuery
- Adding AngularJS to Your Environment
- Bootstrapping AngularJS in an HTML Document
- Using the Global APIs
- Creating a Basic AngularJS Application
- Using jQuery or jQuery Lite in AngularJS Applications
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
Loading the AngularJS Library and Your Main Module
Before you can implement an AngularJS application, you need to get the library loaded in an HTML template. The following lines in Listing 2.1 load the angular.js library and then load the first.js JavaScript custom module:
15 <script src="https://code.angularjs.org/1.2.9/angular.min.js"></script> 16 <script src="/js/first.js"></script>
Defining the AngularJS Application Root Element
The next step is to define the ng-app parameter in the root element so that AngularJS knows where to begin compiling the application. You should also define the module in your JavaScript code to provide a namespace to use when adding controllers, filters, and services.
Line 2 of Listing 2.1 defines the DOM root for an AngularJS module. Notice that ng-app is assigned the module name firstApp, which corresponds to the module in the JavaScript code:
02 <html ng-app="firstApp">
Line 1 in Listing 2.2 shows the firstApp module object being created in the JavaScript code:
01 var firstApp = angular.module('firstApp', []);
Adding a Controller to the Template
Next, you need to add a controller for HTML elements that you want the AngularJS module to control. You also need to define the controller in your module code.
Line 7 in Listing 2.1 assigns a controller named FirstController to a <div> element. This maps the element in the view to a specific controller, which contains a scope:
07 <div ng-controller="FirstController">
Line 2 in Listing 2.2 shows the FirstController code being added to the firstApp module:
02 firstApp.controller('FirstController', function($scope) {
Implementing the Scope Model
After the controller has been defined, you can implement the scope, which involves linking HTML elements to scope variables, initializing the variables in the scope, and providing functionality to handle changes to the scope values.
Lines 9 and 10 in Listing 2.1 are <input> elements that are assigned to the first and last values in the scope. These elements provide a method to update the scope from the browser. If the user types in the input, the scope is also updated:
09 <input type="text" ng-model="first"> 10 <input type="text" ng-model="last">
Lines 3–5 in Listing 2.2 show the initial values of the scope being defined:
03 $scope.first = 'Some'; 04 $scope.last = 'One'; 05 $scope.heading = 'Message: ';
Line 11 in Listing 2.1 links a click handler to the updateMessage() function defined in the scope:
11 <button ng-click='updateMessage()'>Message</button>
Lines 6–8 in Listing 2.2 show the updateMessage() definition in the scope:
06 $scope.updateMessage = function() {
07 $scope.message = 'Hello ' + $scope.first +' '+ $scope.last + '!';
08 };
Line 13 implements an expression that displays the value of the heading and message variables in the scope on the HTML page:
13 {{heading + message}}
Listing 2.1 first.html: A Simple AngularJS Template That Provides Two Input Elements and a Button to Interact with the Model
01 <!doctype html>
02 <html ng-app="firstApp">
03 <head>
04 <title>First AngularJS App</title>
05 </head>
06 <body>
07 <div ng-controller="FirstController">
08 <span>Name:</span>
09 <input type="text" ng-model="first">
10 <input type="text" ng-model="last">
11 <button ng-click='updateMessage()'>Message</button>
12 <hr>
13 {{heading + message}}
14 </div>
15 <script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
16 <script src="js/first.js"></script>
17 </body>
18 </html>
Listing 2.2 first.js: A Simple AngularJS Module That Implements a Controller to Support the Template in Listing 2.1
01 var firstApp = angular.module('firstApp', []);
02 firstApp.controller('FirstController', function($scope) {
03 $scope.first = 'Some';
04 $scope.last = 'One';
05 $scope.heading = 'Message: ';
06 $scope.updateMessage = function() {
07 $scope.message = 'Hello ' + $scope.first +' '+ $scope.last + '!';
08 };
09 });