jeshan/angular-intro-09.html

## angular-intro-09.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-09; CRUD">
  <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>

  <div>
    <p>Add customer form:</p>
    <p>Name:
      <input ng-model='create.name' />
    </p>
    <p>Gender:
      <input ng-model='create.gender' />
    </p>
    <p>Country:
      <input ng-model='create.country' />
    </p>
    <button ng-click='addCustomer()'>Add</button>
    <div>

  <div>
    <p>Edit customer form:</p>
    <p>ID:
      <input ng-model='edit.id' />
    </p>
    <p>Name:
      <input ng-model='edit.name' />
    </p>
    <p>Gender:
      <input ng-model='edit.gender' />
    </p>
    <p>Country:
      <input ng-model='edit.country' />
    </p>
    <button ng-click='updateCustomer()'>Update</button>
  </div>
</body>

</html>

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

module.controller('MainController', function($scope, CustomerService) {
  $scope.customers = CustomerService.getCustomers();
  $scope.addCustomer = function() {
    CustomerService.addCustomer($scope.create.name, $scope.create.gender, $scope.create.country);
  };
  $scope.updateCustomer = function() {
    CustomerService.updateCustomer($scope.edit.id, $scope.edit.name, $scope.edit.gender, $scope.edit.country);
  };
});


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] = {
          id: id,
          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-09; CRUD">
	<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>

	<div>
	<p>Add customer form:</p>
	<p>Name:
	<input ng-model='create.name' />
	</p>
	<p>Gender:
	<input ng-model='create.gender' />
	</p>
	<p>Country:
	<input ng-model='create.country' />
	</p>
	<button ng-click='addCustomer()'>Add</button>
	<div>

	<div>
	<p>Edit customer form:</p>
	<p>ID:
	<input ng-model='edit.id' />
	</p>
	<p>Name:
	<input ng-model='edit.name' />
	</p>
	<p>Gender:
	<input ng-model='edit.gender' />
	</p>
	<p>Country:
	<input ng-model='edit.country' />
	</p>
	<button ng-click='updateCustomer()'>Update</button>
	</div>
	</body>

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

	module.controller('MainController', function($scope, CustomerService) {
	$scope.customers = CustomerService.getCustomers();
	$scope.addCustomer = function() {
	CustomerService.addCustomer($scope.create.name, $scope.create.gender, $scope.create.country);
	};
	$scope.updateCustomer = function() {
	CustomerService.updateCustomer($scope.edit.id, $scope.edit.name, $scope.edit.gender, $scope.edit.country);
	};
	});


	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] = {
	id: id,
	name: name,
	gender: gender,
	country: country
	};
	}
	});
	};
	});