ICE LECTURE In Class Exercises - AngularJS

Note: Please keep the programs that you create today, in case you have a question about your grades for the ICEs at the end of the quarter. When you're working with a partner, each person should save their own, individual copy.

ICE Part 1: Add a new display element for an existing $scope variable

Let's start getting familiar with AngularJS by reviewing the example file.  Specifically, you're going to add some stuff to the file in order to make sure that you're clear on all the details needed to use AngularJS.

First, download a copy of the AngularF2C.html file, including any external JavaScript files that it uses.

Second, make sure that you understand how to display a $scope variable that the controller has set up.  You can do this by adding a second instance of the degrees Celsius to your page somewhere - at a minimum you should label the temperature (so it's clear to the user what the number is) and you're invited to add some simple styling to it.  An example of what you might add to the page might be:
Temperature (in Celsius): 98 degrees

ICE Part 2: Add a new $scope variable and display it

Add a new variable to the $scope object in the code for the controller, and then display that value on the page.  It's fine to start by assigning a constant number (like, say, 100) to the variable since your goal is to just practice sending data from the controller to the page (and then using it on the page).

ICE Part 3: Add a new input element and use it

Back on the web page, add a new textbox, and label it on the page so that it's clear that the user should type their name into the box.  When the user clicks the button you should display a message on the page that says that the user is awesome.  For example, if the user types "Rasputin" into the box, you should display a mesage like "Rasputin is awesome" on the page.
For this exericse you should use the same button as the one that is already doing the Fahrenheit to Celsius conversion.

ICE Part 4: Add a button

Add a new button to the page and set things up so that the original button ONLY converts from Celsius to Fahrenheit, and the new button ONLY displays the message about the user being awesome.

ICE Part 5: Semi-independent investigation

Examine the example file AngularF2C_Checkbox.html on your own.  You'll notice that it does two things that are new: it use a checkbox on the page, and instead of having to click the button the page instead updates as you type each character in.

Between the example page itself and/or whatever online resources you find you should be able to figure out how to write JavaScript code that uses AngularJS to update the page as the user is typing.  Make sure that you understand this by making a copy of the page that you've been working on and modifying it so that it updates both the Celsius temperature and the user's name as the user types stuff in (as opposed to waiting for the user to click a button)