BIT116: Scripting Associative Arrays
advertisement
BIT116: Scripting
Associative Arrays
Today
• AngularJS
• Q + A for the exam
2
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
AngularJS: The Basics
4
Demo: Fahrenheit Celsius
• Type the temperature (in Fahrenheit) into the textbox
• Click the button
• The temperature (in Celsius) appears on the page
5
The HTML part: AngularF2C.html
<!DOCTYPE html>
<html ng-app="converterApp">
<head>
<title>AngularJS</title>
<script src="angular-1.4.7.js"></script>
<script src="converter.js"></script>
</head>
<body ng-controller="ConverterController">
Temperature (in Fahrenheit): <input type="text" ng-model="tempF" /><br/>
<button ng-click="DisplayZog()">click here</button><br/>
{{ tempC }}
</body>
</html>
• <script src="angular-1.4.7.js"></script> = 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 website
• If you don't download this file correctly, you'll see {{ tempC }} on the page
• <script src="converter.js"></script> = We decided to create this file to store our external JavaScript
6
The HTML part: AngularF2C.html
<!DOCTYPE html>
<html ng-app="converterApp">
<head>
<title>AngularJS</title>
<script src="angular-1.4.7.js"></script>
<script src="converter.js"></script>
</head>
<body ng-controller="ConverterController">
Temperature (in Fahrenheit): <input type="text" ng-model="tempF" /><br/>
<button ng-click="DisplayZog()">click here</button><br/>
{{ tempC }}
</body>
</html>
• <html ng-app="converterApp"> = 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
• <body ng-controller="ConverterController"> = 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
<!DOCTYPE html>
<html ng-app="converterApp">
<head>
<title>AngularJS</title>
<script src="angular-1.4.7.js"></script>
<script src="converter.js"></script>
</head>
<body ng-controller="ConverterController">
Temperature (in Fahrenheit): <input type="text" ng-model="tempF" /><br/>
<button ng-click="DisplayZog()">click here</button><br/>
<h1>The result is: {{ tempC }}</h1>
</body>
</html>
• 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 JavaScript part: converter.js
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
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
var cApp = angular.module('converterApp', []);
$scope)
cApp.controller('ConverterController', function (
{
$scope.DisplayZog = function btnZog() {
$scope.tempF
var degF = parseFloat(
var degC = 5/9 * ( degF – 32
$scope.tempC
);
);
= degF + " degrees Fahrenheit is " + degC + " degrees
Celsius";
};
});
• 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 ngmodel="tempF"
• $scope.tempC = "something" changes the
part of this HTML page:
{{ tempC }}
From: AngularF2C.html
<body ng-controller="ConverterController">
Temperature (in Fahrenheit): <input
type="text" ng-model="tempF" /><br/>
<button ng-click="DisplayZog()">click
here</button><br/>
{{ tempC }}
</body>
</html>
11
Do Exercises
• Work on the exercises for this part of this lecture
12
