Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Chapter 3: Angular.js with UI Logic(Controller)

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 368
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: