Tuesday, 25 April 2017

AngularJS-22 : Custom Service


AngularJS-22 : Custom Service












angular.min.js
-------------------------------------



Script.js
------------------------------------

/// <reference path="angular.min.js" />

var app = angular.module("myAppModule",[]).controller("myDataController",function ($scope,MyService) {
       $scope.transformString = function(input){
          
           $scope.output = MyService.processString(input);
       };
   
});



MyService.js
------------------------------------

/// <reference path="Script.js" />

app.factory('MyService', function(){
    return{
            processString : function(input){
                return input + "_Modified";
            }

    };

});



myHTML.html
--------------------------------------------
<!DOCTYPE html>
<html ng-app="myAppModule">
    <head>
        <script type="text/javascript" src="resources/js/angular.min.js"></script>
        <script type="text/javascript" src="resources/js/Script.js"></script>
        <script type="text/javascript" src="resources/js/MyService.js"></script>
    </head>
    <body ng-controller="myDataController">
 
        <table>
           
                <tr>
                    <td>Input</td>
                    <td>Output</td>
                    <td></td>
                </tr>
           
                <tr>
                    <td><input type="text" ng-model="input"/></td>
                    <td><input type="text" ng-model="output"/></td>
                    <td><input type="button" value="Process String" ng-click="transformString(input)"/></td>
                </tr>
           
        </table>
      
  
    </body>
</html>











No comments:

Post a Comment

AngularJS-24 : Router

AngularJS-24 : Router https://www.youtube.com/watch?v=hThmoKA9aeU#t=427.383649 Download "angular-route.min.js"and add to p...