Lab 21: More AngularJS

Lab 21: More AngularJS

In this lab, you will write an AngularJS application that uses a model, directive and a "promise" to retrieve Ajax data from a server.

Objectives:

To use AngularJS modules, controllers, services and directives

Part 1: Starting the Application

Steps:

Use File - Close All to close all open editing windows.

For a starting point, we've provided a starter project in {Lab Installation Directory}/starters/lab21/lab21.zip.

As you have done in earlier labs, import this as an existing project into your workspace - you should end up with Lab21Web and Lab21EAR projects.

In the Lab21Web project, examine the JavaResources/src folder and note:
1. The domain.Patient class models a patient at a hospital.
2. The rest.HospitalApplication and rest.HospitalService class define a REST service that returns a hard-coded list of Patient objects in JSON format. See if you can make any sense of this code.

Start by creating a file in the WebContent/scripts folder named hospital.js. Your view will include this script as well as AngularJS itself. Start writing the script:
1. Define an AngularJS module named Hospital with a variable name of hospitalModule.
2. Write the skeleton of an AngularJS service named HospitalModel. You will complete the service in a moment:
```
hospitalModule.service("HospitalModel", function()
{

});            
            
            
```
3. Write the skeleton of an AngularJS controller named HospitalController. You will complete the controller in a moment, but at this point, you should inject the HospitalModel into the controller.
```
hospitalModule.controller("HospitalController", 
		function(HospitalModel)
{
	var hc = this;
});            
            
            
```
  Note how we alias the "this" reference to hc (abbreviation for HospitalController). You will use the alias in later code.
4. Write the skeleton of an AngularJS directive named patientElement. You will complete the directive in a later step.
```
hospitalModule.directive("patientElement", function()
{
	
});            
            
            
```

In the WebContent folder, create an HTML5 page named index.html. Complete the view:
1. Attach your AngularJS module to the html element.
2. Set the page title to Patient Information.
3. In the head, reference the two scripts in the WebContent/scripts folder.
4. In the body, create a section element, attaching the controller:
```
 <section ng-controller="HospitalController as hc">
 
 </section>            
            
            
```
  Note how we use the "as" syntax and use the same alias name as we used in the controller. The "as" syntax is required since we will use the hc name to reference the controller rather than using the predefined $scope variable. This is a good practice in preparation for AngularJS version 2.
5. Within the section, define two nested section elements, each with a h1 element (these two sections should be siblings). The first section's heading should be Patient List, the second, Edit Current Patient.

Let's start by simply hard-coding a model and hooking up the controller to the DOM:
1. In the HospitalModel function, code a function named getPatients that simply returns a small array (two or three elements) of Patient objects in JavaScript object format. See the Java domain.Patient class for the properties of a Patient.
```
this.getPatients = function()
{
   // define and return an array of Patient objects
   var retVal = . . .;
   
   return retVal;   
}
            
            
```
2. In the HospitalController function, call the model's getPatients() method and initialize a variable named patients:
```
hc.patients = HospitalModel.getPatients();            
            
```
3. In index.html, in the PatientList section, use the ng-repeat directive to display each patient's last and first name (separated with a comma) in an unordered list.

Test your work so far: Deploy Lab21EAR on the server, then open an external browser and navigate to:
```
http://localhost:9080/Lab21Web/index.html        
        
```
You should see your patient list.

Part 2: Completing the Application

Steps:

Using the example in the student guide for inspiration, first modify the PatientModel service so it retrieves the patient list from a REST service rather than hard-coding it. Then modify the PatientController:
1. Modify the function so that it accepts $http as a parameter so that AngularJS injects a reference to that service.
2. Comment-out or delete the hard-coded patient-list array, and replace it with an Ajax call using $http to the REST service, which supports a URL hospital/patients/allpatients. Be sure to use a promise!
3. Modify the PatientController to use the promise returned by the PatientModel's getPatients() method.
4. Test your work so far. You should see a list of four patients.

If you have time, complete the patientElement directive to use an external HTML template for the unordered-list item, then modify index.html to use the directive.

For super extra credit, in the Edit Current Patient section, define a form that lets the user modify a patient's data. When the user clicks an entry in the list, populate the form with the current (clicked) patient's properties. Note that this form will only modify the patient info in memory - updating it on the server is beyond the scope of this lab.