Monday, 23 May 2016

How to write simple Angular JS script through angular factory- Generating Random Number


Create a javascript or js file  and name it testangular.js as like below, please take care in naming the module name in say  angular.module , ang.factory  and while calling the function with appropriate name

var ang= angular.module('appFactory', []);
ang.factory('angularFactory', function() {
 return {
   generateRandomNumber: function() {
    var randomNumber=Math.random();
    return randomNumber;
   },
   title:"Testing Factory Pattern in AngularJS"
  }
});


ang.controller('controllerFactory', ['$scope','angularFactory', function($scope,angularFactory){  
 $scope.randomNumber =0;
 $scope.title ='';
 $scope.getRandomNumber=function(){
  $scope.randomNumber =angularFactory.generateRandomNumber();
  $scope.title =angularFactory.title;
    }
 
 }]);

Create a html file as like below

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../js/angular.js"></script>
  <script src="testangular.js"></script>

</head>
<body ng-app="appFactory">
  <div ng-controller="controllerFactory" >
   <h1 ng-show="title">{{title}}</h1>  
   <button ng-click="getRandomNumber()" >Get Random Number</button>
   Random Number :   <input type='text' ng-model="randomNumber" size="10"/>
 </div>
</body>
</html>

No comments:

Post a Comment