For this chapter, I removed the contents of the angularjs folder and reinstalled the AngularJS and Bootstrap files as described in Chapter 1.
1. Installing the ngMocks Module
AngularJS provides an optional module called ngMock, which provides useful tools for unit testing. Go to http://angularjs.org, click Download, select the version you require, and click the Extras link in the bottom-left corner of the window, as shown in Figure 25-1.
Download the angular-mocks.js file into the angularjs folder.
2. Creating the Test Configuration
During the initial preparation steps in Chapter 1, I installed the Karma test runner. Karma needs to be configured for each new project. Run the following from the command line within the angularjs folder:
karma init karma.config.js
The Karma setup process will begin, and you will be prompted to answer a number of questions. I have listed the questions and the answers that are required for this chapter in Table 25-2.
The setup process creates a file called karma.config.js, which is a JavaScript file containing the configuration options. I have included this file in the source code download for this book, available for free from www.apress.com, if you want to make completely sure you are using the same configuration that I do in this chapter.
3. Creating the Example Application
I will need an example application to test in this chapter. To get started, I created a file called app.html in the angularjs folder. Listing 25-1 shows the contents of the new file.
Listing 25-1. The Contents of the app.html File
<!DOCTYPE html>
<html ng-app=”exampleApp”>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script src=”app.js”></script>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
</head>
<body ng-controller=”defaultCtrl”>
<div class=”panel panel-default”>
<div class=”panel-body”>
<p>Counter: {{counter}}</p>
<p>
<button class=”btn btn-primary”
ng-click=”incrementCounter()”>Increment</button>
</p>
</div>
</div>
</body>
</html>
One of the limitations of the testing system I am setting up in this chapter is that it can’t be used to test the contents of inline script elements in HTML files and needs to operate on JavaScript files, which is why there is no AngularJS code in the app.html file. This isn’t a serious issue because I have been mixing only HTML and JavaScript code in files in this book to keep the examples simple, and you will find it easier to use separate JavaScript files in real projects. In Listing 25-2, you can see the contents of the app.js file, which I added to the angularjs folder and which contains the AngularJS code for the example application.
Listing 25-2. The Contents of the app.js File
angular.module(“exampleApp”, [])
.controller(“defaultCtrl”, function ($scope) {
$scope.counter = 0;
$scope.incrementCounter = function() {
$scope.counter++;
}
});
As the listing shows, I am going to start with something simple. The controller in this example defines a variable called counter on its scope and a behavior called incrementCounter that is invoked through the ng-click directive on a button in the HTML file. You can see the result in Figure 25-2.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.