-
Notifications
You must be signed in to change notification settings - Fork 55
/
00-2-concepts.html
72 lines (68 loc) · 2.15 KB
/
00-2-concepts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<!-- We haven't changed much in this page except of the name of the app.
Take a look at the Javascript for the real magic-->
<title>00-concepts</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
<script>
//here we state that 'finance' is a dependancy
angular.module('invoice-srv-demo', ['finances'])
//here we create a 'currencyConverter' and pass
//it into the constructor for InvoiceController
.controller('InvoiceController', ['currencyConverter', function(currencyConverter){
this.qty=1;
this.cost=2;
this.selectedCurrency='USD';
this.currencies=currencyConverter.currencies;
this.total = function total(output){
return currencyConverter.convert(this.qty * this.cost, this.selectedCurrency, output);
};
this.pay = function pay(){
window.alert("Thanks!");
}
}]);
angular.module('finances', [])
/*here we create a 'factory' or 'service' called 'currencyConverter'
it contains the logic/reusable code in our application
*/
.factory('currencyConverter', function(){
var currencies = ['USD', 'EUR', 'CNY'];
var usdExchange = {
USD: 1, EUR: 0.74, CNY: 6.09
};
var convert = function(amount, selected, output){
return amount * usdExchange[output]/usdExchange[selected];
};
return {
//these are the objects/values returned by the factory/service for use in other controllers/modules
currencies:currencies,
convert:convert
};
});
</script>
</head>
<body>
<h1>Services and Dependency Injection</h1><br />
<!--ng-app tells angular what the main module is-->
<div ng-app="invoice-srv-demo" ng-controller="InvoiceController as invoice">
<b>Invoice:</b>
<div>
Quantitiy: <input type="number" ng-model="invoice.qty" required>
</div>
<div>
Costs: <input type="number" ng-model="invoice.cost" required>
<select ng-model="invoice.selectedCurrency">
<option ng-repeat="c in invoice.currencies">{{c}}</option>
</select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies">
{{invoice.total(c) | currency:c }}
</span>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
</body>
</html>