learning-angular/00-2-concepts.html at master · JsNuts/learning-angular · GitHub

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>