Plan
- Part 1 : introduction
- Part 2 : Implementation of server side
- Part 3 : implementation of client side
Introduction
In this chapter we will begin the coding of client side using angularjs framework.Using the code
I) Project tree
the client project tree is constituted by three parts :1) Controllers folder : contains the declaration of controllers.2) Services folder : has the declaration of custom services related to each controllers.2) View : contains html pages and a js file that contains the initialization of different module and routes.the following picture, can more explain the organisation of our project :
II) Services
Each service created, contains a list of functions that build a request (http) which point to a specific url in server side.these services will be called from controller to execute some specific actions.
1) IndexServices.jsreturn functions that build a http request :
- getPersons : return http request that point to : http://127.0.0.1:8081/getPersons.
- addPerson : return http request that point to : http://127.0.0.1:8081/addPerson.
- editPerson : return http request that point to : http://127.0.0.1:8081/updatePerson.
- deletePerson : return http request that point to : http://127.0.0.1:8081/removePerson.
appIndex.factory('DataService', ['$http', function ($http) {
var getPersons = function () {
return $http.get("http://127.0.0.1:8081/getPersons");
}
var addPerson = function (obj) {
var data = angular.copy(obj);
var parameters = {
obj: JSON.stringify(data),
};
var config = {
params: parameters
};
return $http.get("http://127.0.0.1:8081/addPerson", config);
}
var editPerson = function (obj) {
//removed the $$hashKey properties
var data = angular.copy(obj);
var parameters = {
obj: JSON.stringify(data),
};
var config = {
params: parameters
};
return $http.get("http://127.0.0.1:8081/updatePerson", config);
}
var deletePerson = function (id) {
var parameters = {
id: id,
};
var config = {
params: parameters
};
return $http.get("http://127.0.0.1:8081/removePerson", config);
}
return {
getPersons: getPersons,
addPerson: addPerson,
editPerson: editPerson,
deletePerson: deletePerson,
}
}]);
III) Controller
the aim functionalities of this controller are :- load persons from remote database
- remove an existing person identified by
_id - create a new person
- update an existing person using its identifier
_id
appIndex.controller('indexController', ['$scope', 'DataService', function ($scope, DataService) {
$scope.listPerson = "";
//load all available person from server.
loadPersons();
function loadPersons()
{
DataService.getPersons().then(function successCallback(response) {
if (response.data.length > 0) {
$scope.listPerson = response.data;
}
}, function errorCallback(response) {
//alert(response.status);
});
}
$scope.Remove = function(id) {
DataService.deletePerson(id).then(function successCallback(response) {
if (response.data == "true") {
loadPersons();
alert("succefully done !");
}
}, function errorCallback(response) {
//alert(response.status);
});
}
$scope.Edit = function (elem) {
DataService.editPerson(elem).then(function successCallback(response) {
if (response.data == "true") {
loadPersons();
alert("succefully done !");
}
}, function errorCallback(response) {
//alert(response.status);
});
}
$scope.AddNewPerson = function (master) {
DataService.addPerson(master).then(function successCallback(response) {
//refresh List of person
loadPersons();
//hide modal :
$("#myModalFormAddPerson").modal("hide");
}, function errorCallback(response) {
alert(response.status);
});
}
}]);
IV) View
- index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>NASRI OMAR CRUD Application>/title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="ApplicationCRUD.js">>/script>
<script src="Services/IndexServices.js">>/script>
<script src="Controllers/indexCtrl.js">>/script>
</head>
<body ng-app="MyAppCrud" ng-controller="indexController">
<div id="wrapper">
<div class="modal fade" id="myModalFormAddPerson" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×>/span>>/button>
<h4 class="modal-title" id="IdModalTitle"> Add New Person</h4>
</div>
<div class="modal-body">
<!--Formulaire-->
<form name="myform" class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label" required>first Name</label>
<div class="col-sm-8">
<input type="text" ng-model="master.firstname" class="form-control" placeholder="enter first Name" ng-required="true" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">last Name</label>
<div class="col-sm-8">
<input type="text" ng-model="master.lastname" class="form-control" placeholder="enter last Name" ng-required="true" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Zip code</label>
<div class="col-sm-8">
<input type="text" ng-model="master.adress.zipcode" class="form-control" placeholder="enter zip code" ng-required="true" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">country</label>
<div class="col-sm-8">
<input type="text" ng-model="master.adress.country" class="form-control" placeholder="enter country" ng-required="true" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
<button ng-click="myform.$valid && AddNewPerson(master)" class="btn btn-primary">Validate</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
>center>>h3>Sample CRUD application using AngularJS, NodeJs and MongoDb>/h3></center>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="row">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModalFormAddPerson">Add Person</button>
</div>
<div class="row">
<table class="table table-responsive">
<thead>
<tr><th>First Name</th>>th>Last Name</th><th>Address</th></tr>
</thead>
<tbody ng-repeat="elem in listPerson">
<tr>
<td class="col-lg-2">>input type="text" ng-model="elem.firstname" /></td>
<td class="col-lg-2">>input type="text" ng-model="elem.lastname" /></td>
<td class="col-lg-6">Zip code : >input type="text" ng-model="elem.adress.zipcode" /> Country : <input type="text" ng-model="elem.adress.country" /></td>
<td class="col-lg-2">>a href="#" ng-click="Edit(elem)">>span class="glyphicon glyphicon-edit"></span> save</a> <a href="#" ng-click="Remove(elem._id)"><span class="glyphicon glyphicon-remove">>/span> Remove>/a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-offset-2">>/div>
</div>
</div>
</body>
</html>
V) User interface manipulation
1) Load available Persons
2) Add new Person
First, user should click on add Person button to show insertion form.
3) Update an existing person
user can change the attributes of a selected person and clic on associate save icon
, to save changes.
4) Remove a selected person
user can select a person to delete it, and clic on remove icon
:
result :
No comments:
Post a Comment