[text] Code

Viewer

  1. <!DOCTYPE html>  
  2. <html ng-app="myApp"> 
  3. <head>
  4.   <link rel="stylesheet" href="style.css">
  5.   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  6.     <script src="index.js"></script>
  7.     
  8. <script>
  9. var app = angular.module('myApp', []);
  10.  
  11.  
  12. app.config('Calculator', function($provide) {
  13.    $provide.provider('Calculator', function() {
  14.       this.$get = function() {
  15.          var factory = {};  
  16.          factory.multiply = function(a, b) {
  17.             return a * b; 
  18.          };
  19.          return factory;
  20.       };
  21.    });
  22. });
  23.  
  24.  
  25. app.config('CalculatorProvider', function($provide) 
  26.  
  27.  {
  28.     $provide.provider('CalculatorProvider', function()
  29.     {
  30.         this.$get = function(Calculator) 
  31.         {
  32.             var factory1 = {}; 
  33.             square = function(a)
  34.             {
  35.                 return Calculator.multiply(a,a);
  36.             };
  37.             cube = function(a) 
  38.             {
  39.                 return Calculator.multiply(a, Calculator.multiply(a,a)); 
  40.             };
  41.             return factory1;
  42.         };
  43.  
  44.     });
  45.  });
  46. app.controller('CalculatorController', function($scope, CalculatorProvider) {
  47.    // $scope.answer = 0;
  48.     $scope.Square = function() {
  49.         $scope.answer = CalculatorProvider.square($scope.number);
  50.     }
  51.  
  52.     $scope.Cube = function() {
  53.         $scope.answer = CalculatorProvider.cube($scope.number);
  54.     }
  55. });
  56. </script>
  57.  
  58. </head>
  59.  
  60. <body>
  61.   <h1>square, cube using provider!</h1>
  62.  
  63.   <div ng-app="myApp">
  64.     <div ng-controller="CalculatorController">
  65.       Enter a number:
  66.       <input type="number" ng-model="num" />
  67.       <button ng-click="Square()">X<sup>2</sup></button>
  68.       <button ng-click="Cube()">X<sup>3</sup></button>
  69.  
  70.       <div>{{answer}}</div>
  71.     </div>
  72.   </div>
  73. </body>
  74.  
  75. </html>

Editor

You can edit this paste and save as new:


File Description
  • Code
  • Paste Code
  • 22 Oct-2020
  • 1.79 Kb
You can Share it: