Knowledge Management Banner

Knowledge Management Banner

services in angularjs

A service is simply an object that provide some sort of functionality that can be reused again within angular application.

HTML Code

 <script src="angular.1.4.8.min.js"></script>  
 <div ng-app="MyApp">  
   <div ng-controller="MyController">  
     <style type="text/css">  
       table, td, th {  
         border-collapse: collapse;  
         border: 1px solid red;  
         padding: 5px;  
         font-family:Calibri;  
       }  
     </style>  
     <h1>{{Title}}</h1>  
     <hr />  
     <table id="DemoTable">  
       <tr>  
         <th>First Name</th>  
         <th>Last Name</th>  
         <th>Country</th>  
       </tr>  
       <tr ng-repeat="x in DetailArray">  
         <td>{{x.Name}}</td>  
         <td>{{x.LastName}}</td>  
         <td>{{x.Address}}</td>  
       </tr>  
     </table>  
   </div>  
 </div>  
 <script src="index.js"></script>  

AngularJS Code

 /// <reference path="angular.1.4.8.min.js" />  
 var ngapp = angular.module("MyApp", []);  
 ngapp.controller("MyController", function ($scope, DummyData) {  
   $scope.Title = "Services in Angular";  
   var TempArray = DummyData.PersonDetails();  
   $scope.DetailArray = TempArray;  
 });  

 ngapp.service("DummyData", function () {  
   this.PersonDetails = function () {  
     var TempArray = [{ Name: "John", LastName: "Doe", Address: "California" },  
           { Name: "Jennifer", LastName: "Dolle", Address: "London" },  
           { Name: "Theon", LastName: "GreyJoy", Address: "IronBorn" },  
           { Name: "Cersei", LastName: "Lannistor", Address: "7 Kingdom" }];  
     return TempArray;  
   }  
 });  

No comments

Powered by Blogger.