There is some basic preparation required before I start on the application. The instructions in the following sections install some optional AngularJS features to set up the server that will deliver the data.
1. Preparing the Data
The first step is to create a new Deployd application. You will need to create a directory to hold the files that are generated (it doesn’t matter where you create the directory). I called my directory deployd, and I put it at the same level as the angularjs folder that will hold the application files.
■ Note I asked you to download and install Deployd in Chapter 1. If you have not done so, then refer to that chapter for details of all the software that will be required.
Change to the new directory and enter the following at the command line:
dpd create sportsstore
To start the new server, enter the following commands:
dpd -p 5500 sportsstore\app.dpd dashboard
■ Tip This is the Windows style of file separator. You’ll need to use sportsstore/app.dpd on other platforms.
The Deployd dashboard, which is used to configure the service, will be displayed in the browser, as shown in Figure 6-1.
1.1. Creating the Data Structure
The next step is to tell Deployd about the structure of the data it will be storing. Click the large green button in the dashboard and select Collection from the pop-up menu. Set the name of the collection to /products, as shown in Figure 6-2.
Deployd will prompt you to create the properties of the JSON objects it will store in the collection. Enter the properties listed in Table 6-1.
When you have finished adding the properties, the dashboard should match Figure 6-3. Make sure you have entered the property names correctly and have selected the right type for each property.
■ Tip Notice that Deployd has added an id property. This will be used to uniquely identify objects in the database. Deployd will assign unique values to the id property automatically, and I’ll be relying on these values when I implement the administration functions in Chapter 8.
1.2. Adding the Data
Now that I have defined the structure of the objects that Deployd will store, I can add details of the products that the SportsStore will offer to customers. Click the Data link, which is on the left side of the dashboard. This will display an editor grid into which you can enter values for object properties and so populate the database.
Use the grid to create the data items I have described in Table 6-2. Don’t worry about assigning values for the id property because Deployd will generate them automatically as each object is stored.
■ Tip Deployd displays an odd behavior when entering values with a decimal point into number fields. The first period you enter is, for some reason, deleted, and you need to enter another period to enter a decimal value.
When you have finished entering the data, the Deployd dashboard should look like Figure 6-4.
1.3. Testing the Data Service
To test that Deployd is correctly configured and working, open a browser window and navigate to the following URL:
http://localhost:5500/products
This URL assumes you installed Deployd on the local machine and that you didn’t change the port number when starting Deployd. The /products URL is interpreted by Deployd as a request for the contents of the /products collection, expressed as a JSON string. Some browsers, such as Google Chrome, will display the JSON response directly in the browser window, but others, such as Microsoft Internet Explorer, require you to download the JSON to a file. Either way, you should see the following data, which I have formatted to help clarity, although the value of the id fields will be different:
[{“category”:”Watersports”,”description”:”A boat for one person”,”name”:”Kayak”,
“price”:275,”id”:”05af70919155f8fc”},
{“category”:”Watersports”, “description”:”Protective and fashionable”,
“name”:”Lifejacket”,”price”:48.95,”id”:”3d31d81b218c98ef”},
{“category”:”Soccer”,”description”:”FIFA-approved size and weight”,
“name”:”Soccer Ball”,”price”:19.5,”id”:”437615faf1d38815″},
{“category”:”Soccer”,”description”:”Give your playing field a professional touch”,
“name”:”Corner Flags”,”price”:34.95,”id”:”93c9cc08ac2f28d4″},
{“category”:”Soccer”,”description”:”Flat-packed 35,000-seat stadium”,
“name”:”Stadium”,”price”:79500,”id”:”ad4e64b38baa088f”},
{“category”:”Chess”,”description”:”Improve your brain efficiency by 75%”,
“name”:”Thinking Cap”,”price”:16,”id”:”b9e8e55c1ecc0b63″},
{“category”:”Chess”,”description”:”Secretly give your opponent a disadvantage”,
“name”:”Unsteady Chair”,”price”:29.95,”id”:”32c2355f9a617bbd”},
{“category”:”Chess”,”description”:”A fun game for the family”,
“name”:”Human Chess Board”,”price”:75,”id”:”5241512218f73a26″},
{“category”:”Chess”,”description”:”Gold-plated, diamond-studded King”,
“name”:”Bling-Bling King”,”price”:1200,”id”:”59166228d70f8858″}]
2. Preparing the Application
Before I start writing the application, I need to prepare the angularjs folder by creating a directory structure for the files that will make up the application and downloading the AngularJS and Bootstrap files that I will need.
2.1. Creating the Directory Structure
You can arrange the files that make up an AngularJS application in any way you like. You can even use predefined templates with some client-side development tools, but I am going to keep things simple and follow the basic layout that I use for most AngularJS projects. This isn’t always the layout that I finish with, because I tend to move and regroup files as a project grows in complexity, but this is where I usually start. Create the directories described in Table 6-3 within the angularjs folder.
2.2. Installing the AngularJS and Bootstrap Files
My preference, without any real foundation in reason, is to put the main AngularJS JavaScript file and the Bootstrap CSS files into the main angularjs directory and put the optional AngularJS modules that I use into the ngmodules folder. I can’t explain why I do this, but it has become a habit. Following the instructions in Chapter 1, copy the files I listed in Table 6-4 into the angularjs folder.
Not all AngularJS functionality comes in the angular.js file. For the SportsStore application I will require some additional features that are available in optional modules. These are the files that I keep in the ngmodules folder. Following the instructions in Chapter 1, download the files described in Table 6-5 and place them in the angularjs/ngmodules folder.
2.3. Building the Basic Outline
I like to start a new AngularJS application by mocking up the basic structure with placeholder content and then filling in each part in turn. The basic layout of the SportsStore application is the classic two-column layout that you will find in many web stores—a set of categories in the first column that is used to filter the set of products displayed in the second column. Figure 6-5 shows the effect I am aiming for.
I’ll add some additional features as I build the application, but the figure shows the initial functionality I will create. The first step is to create the top-level HTML file that will contain the structural markup and the script and link elements for the JavaScript and CSS files I will be using. Listing 6-1 shows the contents of the app.html file, which I created in the angularjs folder.
Listing 6-1. The Contents of the app.html File
<!DOCTYPE html>
<html ng-app=”sportsStore”>
<head>
<title>SportsStore</title>
<script src=”angular.js”></script>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script>
angular.module(“sportsStore”, []);
</script>
</head>
<body>
<div class=”navbar navbar-inverse”>
<a class=”navbar-brand” href=”#”>SPORTS STORE</a>
</div>
<div class=”panel panel-default row”>
<div class=”col-xs-3″>
Categories go here
</div>
<div class=”col-xs-8″>
Products go here
</div>
</div>
</body>
</html>
This file contains HTML elements that define the basic layout, styled using Bootstrap into a table structure, as described in Chapter 4. There are two AngularJS-specific aspects to this file. The first is the script element in which I call the angular.module method, as follows:
…
<script>
angular.module(“sportsStore”, []);
</script>
…
Modules are the top-level building block in an AngularJS application, and this method call creates a new module called sportsStore. I don’t do anything with the module other than create it at the moment, but I’ll be using it to define functionality for the application later.
The second aspect is that I have applied the ng-app directive to the html element, like this:
…
<html ng-app=”sportsStore”>
…
The ng-app directive makes the functionality defined within the sportsStore module available within the HTML. I like to apply the ng-app directive to the html element, but you can be more specific, and a common alternative is to apply it to the body element instead.
Despite creating and applying an AngularJS module, the contents app.html file are simple and merely lay out the basic structure of the application, styled using Bootstrap. You can see how the browser displays the app.html file in Figure 6-6.
■ Tip To request the app.html file, I asked the browser to display the URL http://localhost:5000/app.html. I am using the Node.js web server that I introduced in Chapter 1, running on port 5000 of my local machine. This is separate from the Deployd server I created at the start of this chapter, which I have set up to run on port 5500.
It doesn’t look like much at the moment, but the application will start to take shape pretty quickly once the plumbing is in place and I start using AngularJS to build the application functionality.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.