jeshan/angular-intro-08.html

## angular-intro-08.html
<!DOCTYPE html>
<html ng-app='angularApp'>

<head>
  <script src="//code.jquery.com/jquery.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta name="description" content="angular-intro-08; service dependency injection">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="script.js"></script>
  <meta charset="utf-8">
</head>

<body ng-controller='MainController'>
  <p class='h3'>Customer management system</p>

  <table class='table table-striped'>
    <tr>
      <th>id</th>
      <th>Name</th>
      <th>Gender</th>
      <th>Country</th>
    </tr>

    <tbody>
      <tr ng-repeat='customer in customers'>
        <td ng-bind='customer.id'></td>
        <td ng-bind='customer.name'></td>
        <td ng-bind='customer.gender'></td>
        <td ng-bind='customer.country'></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

## script.js
var module = angular.module('angularApp', []);

module.controller('MainController', function($scope, CustomerService) {
  $scope.customers = CustomerService.getCustomers();
});


module.service('CustomerService', function() {

  var customers = [{
    id: 1,
    name: 'John',
    gender: 'Male',
    country: 'Mauritius'
  }, {
    id: 2,
    name: 'Jane',
    gender: 'Female',
    country: 'United Kingdom'
  }];

  this.getCustomers = function() {
    return customers;
  };

  this.getCustomerByName = function(name) {
    var result = {};
    angular.forEach(this.getCustomers(), function(item) {
      if (item.name === name) {
        result = item;
      }
    });
    return result;
  };

  this.addCustomer = function(name, gender, country) {
    var customerCount = customers.length;
    customers.push({
      id: customerCount + 1,
      name: name,
      gender: gender,
      country: country
    });
  };

  this.updateCustomer = function(id, name, gender, country) {
    angular.forEach(this.getCustomers(), function(item, index) {
      if (item.id == id) {
        customers[index] = {
          name: name,
          gender: gender,
          country: country
        };
      }
    });
  };
});
	<!DOCTYPE html>
	<html ng-app='angularApp'>

	<head>
	<script src="//code.jquery.com/jquery.min.js"></script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	<meta name="description" content="angular-intro-08; service dependency injection">
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<script src="script.js"></script>
	<meta charset="utf-8">
	</head>

	<body ng-controller='MainController'>
	<p class='h3'>Customer management system</p>

	<table class='table table-striped'>
	<tr>
	<th>id</th>
	<th>Name</th>
	<th>Gender</th>
	<th>Country</th>
	</tr>

	<tbody>
	<tr ng-repeat='customer in customers'>
	<td ng-bind='customer.id'></td>
	<td ng-bind='customer.name'></td>
	<td ng-bind='customer.gender'></td>
	<td ng-bind='customer.country'></td>
	</tr>
	</tbody>
	</table>
	</body>

	</html>
	var module = angular.module('angularApp', []);

	module.controller('MainController', function($scope, CustomerService) {
	$scope.customers = CustomerService.getCustomers();
	});


	module.service('CustomerService', function() {

	var customers = [{
	id: 1,
	name: 'John',
	gender: 'Male',
	country: 'Mauritius'
	}, {
	id: 2,
	name: 'Jane',
	gender: 'Female',
	country: 'United Kingdom'
	}];

	this.getCustomers = function() {
	return customers;
	};

	this.getCustomerByName = function(name) {
	var result = {};
	angular.forEach(this.getCustomers(), function(item) {
	if (item.name === name) {
	result = item;
	}
	});
	return result;
	};

	this.addCustomer = function(name, gender, country) {
	var customerCount = customers.length;
	customers.push({
	id: customerCount + 1,
	name: name,
	gender: gender,
	country: country
	});
	};

	this.updateCustomer = function(id, name, gender, country) {
	angular.forEach(this.getCustomers(), function(item, index) {
	if (item.id == id) {
	customers[index] = {
	name: name,
	gender: gender,
	country: country
	};
	}
	});
	};
	});