Lab 20: Introduction to AngularJS

In this lab, you will write a simple AngularJS Web Application.

Objectives:

• To write a simple AngularJS application

Part 1: Getting Started with AngularJS

Steps:

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

2. In RAD, create a new Dynamic Web Project named Lab20Web associated with Lab20EAR.

3. Your first step is to import the AngularJS script into your workspace. Follow this procedure to import it:

   1. Use Windows Explorer or My Computer to navigate to {Lab Installation Directory}/lib. If your computer has the standard lab setup on Windows 7 or later, this directory is:

      c:\Users\username\webclass\lib             
                   

      You should see the angular.min.js file in that folder.

   2. Size and position Windows Explorer and RAD so you can see both of them at the same time.

   3. In Windows Explorer, right-click on angular.min.js and choose Copy.

   4. In RAD, right-click on your project's WebContent folder and choose Paste to import the file.

4. Create a new HTML File, hello-angular.js, and in it, create the Hello, World example from the AngularJS chapter.

5. Create a new HTML File, angular-controller.html, and in it, create the Controller example from the AngularJS chapter.

6. Create a new HTML File, student.html, and in it:

   • Define a form that lets a user enter a student's name, studentID and GPA. The form should have a submit button.
   • Bind each input box to a separate model property.
   • When the user clicks the submit button, invoke a method in your controller that initializes the studentInfo property from the data that the user entered into the form.
   • The page should have a div containing a placeholder for a property named studentInfo.

Part 2: More Practice

Steps:

1. Create a JavaScript Source File, toppings.js, and in it, define a JSON array of the names of your favorite pizza toppings.

   Create an HTML File, toppings.html that queries the toppings using Ajax and displays them in an unordered list.