1. BIT116: Scripting Associative Arrays

2. Today AngularJS Q + A for the exam 2

3. The exam The final will happen on Monday, during class Feel free to bring snacks We have 3 more classes after that (Weds, Mon, Weds) The exam will be out of 85 points You ARE still allowed to bring a notecard – 3" x 5", both sides, handwritten Exam is cumulative – covers stuff from the entire quarter For Weds and Mon: You'll get a 5 point take-home question, to be handed in on the next class day For the final Weds: We're going to play Control-Alt-Hack, the card game that teaches you about computer security, and then you'll write a 1 page paper (in class) for 5 points The point total for the exam will therefore still by 100 3

4. 4 AngularJS: The Basics

5. Demo: Fahrenheit  Celsius Type the temperature (in Fahrenheit) into the textbox Click the button The temperature (in Celsius) appears on the page 5

6. 6 The HTML part: AngularF2C.html AngularJS Temperature (in Fahrenheit): click here {{ tempC }} = This will load the AngularJS library Note – you'll need to download a copy to use (https://code.angularjs.org/1.4.7/), or use the link on the course websitehttps://code.angularjs.org/1.4.7/ If you don't download this file correctly, you'll see {{ tempC }} on the page = We decided to create this file to store our external JavaScript

7. AngularJS Temperature (in Fahrenheit): click here {{ tempC }} = Adding the ng-app 'directive' tells AngularJS that this is an Angular app, and that the name of the app is converterApp. We picked the name converterApp ; we can pick any normal name as long as we use it consistently. Note that the ng-app goes on the HTML element, not the HEAD, nor BODY = This tells Angular what class will control the user interface We picked the name ConverterController ; we can pick any normal name as long as we use it consistently. 7 The HTML part: AngularF2C.html

8. AngularJS Temperature (in Fahrenheit): click here The result is: {{ tempC }} ng-model="tempF" = This gives the element a name that Angular will use to refer to it. Technically this name will refer to the value (text) typed into the textbox, not the textbox itself ng-click="DisplayZog()" = When the button is clicked call the function DisplayZog() {{ tempC }} = This is something new, and specific to Angular. If we assign a value to the tempC variable in our JavaScript code, then Angular will automatically / auto-magically display that value here 8 The HTML part: AngularF2C.html

9. var cApp = angular.module('converterApp', []); cApp.controller('ConverterController', function ($scope) { $scope.DisplayZog = function btnZog() { var degF = $scope.tempF; var degC = 5/9 * (degF - 32); $scope.tempC = degF + " degrees Fahrenheit is " + degC + " degrees Celsius"; }; }); var cApp = angular.module('converterApp', []); = This tells Angular that we're defining our application in this JavaScript file It's common to have many other JavaScript files in addition to this one which defines the app, which is why we need to tell Angular that we're defining the app in this one angular.module(…) = This is the line which creates the app definition 'converterApp' = We chose this name back in the HTML file – use it here, exactly as there [] = This is an empty list of other modules that our app requires (depends on). Since our app doesn't need anything else this is empty var cApp = = the angular.module(…) will return an object representing the new app We'll store that object into our new cApp variable. 9 The JavaScript part: converter.js

10. var cApp = angular.module('converterApp', []); cApp.controller('ConverterController', function ($scope) { $scope.DisplayZog = function btnZog() { var degF = $scope.tempF; var degC = 5/9 * (degF - 32); $scope.tempC = degF + " degrees Fahrenheit is " + degC + " degrees Celsius"; }; }); cApp.controller('ConverterController', function ($scope) {…}); = This will create the class that controls the UI cApp.controller( … ); = This tells Angular which function (object, really) to use for the controller 'ConverterController' = We have to give the controller a name, and it needs to be identical to the one that we picked in the HTML file function ($scope) {…} = This defines the actual object itself 10 The JavaScript part: converter.js

11. var cApp = angular.module('converterApp', []); cApp.controller('ConverterController', function ( $scope ) { $scope.DisplayZog = function btnZog() { var degF = parseFloat( $scope.tempF ); var degC = 5/9 * ( degF – 32 ); $scope.tempC = degF + " degrees Fahrenheit is " + degC + " degrees Celsius"; }; }); 11 The JavaScript part: converter.js From: AngularF2C.html Temperature (in Fahrenheit): click here {{ tempC }} The $scope variable is very important! It's created and managed by Angular $scope. tempF is how we access the text from the HTML textbox with ng- model="tempF" $scope.tempC = "something" changes the part of this HTML page: {{ tempC }}

12. Do Exercises Work on the exercises for this part of this lecture 12