In the previous chapter we have discuss what is angularjs and what are the directives before proceeding to next chapter where we will practically try to implement all this it is necessary to know about angular.js definition and directives.
As we all know that angularjs provide live bindings. Here in this example whenever we will give input value then expression calculate all the values and the DOM is updated with their values. This concept is called 2-way data binding.
Example:
Here in the example we will enter and calculate the cost in different currencies and also pay the invoice. Here we have two files index.html and invoice.js. So the code will go as:
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="invoice1.js"></script>
<div ng-app="invoice1" ng-controller="AccountController as invoice">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" min="0" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
<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>
</html>
This is a index.html file.
Here in the example we can see that ng-app,ng-controller,input these all work as directives where ng-app defines the module name and ng-controller defines where we have to write our business logic. These directives also define the scope of the module.
Second file is invoice1.js
angular.module('invoice1', [])
.controller('AccountController', function() {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = ['USD', 'EUR', 'CNY'];
this.usdToForeignRates = {
USD: 1,
EUR: 0.74,
CNY: 6.09
};
this.total = function total(outCurr) {
return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
};
this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];
};
this.pay = function pay() {
window.alert("Thanks for using findnerd!");
};
});
In this we will perform all the business logic. By this way we will connect our angularjs with MVC(MODEL VIEW CONTROLLER) controller.
0 Comment(s)