Here I’m sitting at coffeeshop late afternoon brushing few of core Linux concepts. All of sudden somehow my mind took me to read new content in hacker news. Its always like a celebration going through content in hackernews “USEFUL STUFF”. There I saw GNU Software foundation listed its 2017 free softwares, I found a phone operating system powering nexus and few samsung phones. In addition, one thing catched my eye which is Intelligent Personal Assistant i,e Mimic. A free software which converts your text to speech right from the terminal.
Here are the steps to install :-
Mine is a Mac, if your OS is any of Debian machines you should be fine no more issues.
Today in the contacts table we will display the image by replacing in the place of Birthday column. In Index.html, we will replace the index with images ng-src.
Yesterday we were able to create the form and save it. But we want to exit the form once we click on save button. form is actually retrieved from createModal of showCreateModal scope variable which has the template. We need to call the hide function from createModal. we will create the promise function to hide the form and for this purpose we use $q which is a support parameter to $promise.
//trimmed code
app.service('ContactService', function (Contact, $q) {
//trimmed code
//trimmed code
'createContact': function (person) {
var d = $q.defer();
self.isSaving = true;
Contact.save(person).$promise.then(function () {
self.isSaving = false;
d.resolve()
});
return d.promise;
}
//trimmed code
And in the createContact we will hide the modal.
As you could notice in the above screencast, we will make sure we clean the contact list which will not spread onto contactDetail once we save the save the form.
Kick starting my day after 2 days of break (I cursed myself) for breaking the practice for at a strectch past two days. Anyways better not late ad no regrets for now.
Creating a bootstrap modal using angularStrap :-
Until now we are able to display the list, update the list and delete the list. But we are left with one step which is creating the list. We will start by adding the Create button adjacent to search box options. Next thing we will aim is that if we click on create button it should pop up a dialog box where we fill out the form to create the table entry. We will use angular strap (http://mgcrea.github.io/angular-strap/), checkout the examples and they are very impressive. We will install angularstrap through bower. As usually we will also add dependencies in index.html and main.js. Next thing we will link the angular strap into the button.
Above code is under the PersonListController in main.js. Hence our duty is to add the showCreateModal into PersonLisController.
//trimmed code and we will add $modal which is a service in PersonListController
$scope.showCreateModal = function (){
$scope.CreateModal = $modal({
scope: $scope,
template: 'templates/modal.create.tpl.html',
show: true
})
}
//trimmed code
We will use the contact edit page for createModal. For this purpose we will angular-directive called ng-include. Firstly we will cut the form elements and use ng-include to include this into another source html file. In the include section of index.html, we will add the ng-template in a script tag.
<!-- trimmed code -->
<script type="text/ng-template" id="templates/form.html"></script>
<!-- we will paste the cut form code-->
<!--trimmed code -->
Okay! so the point of include id with ng-template is to make it as a re-usable code which could be utilized at any point in index.html. For this time we will override it by utilizing it from templates real folder.
Next thing is to create “createContact()” function in main.js.
//trimmed code and we will add below code in PersonListController
$scope.createContact = function (){
console.log("createContact")
};
//trimmed code
We need to add showCreateModal which has template linked with form in index.html, when we click on create button.
//trimmed code
//ContactService
},
'updateContact': function (person) {
console.log('service called update');
}
//trimmed code
Please find the log message when we click on save button in the below screenshot.
To update contacts we need to do a bit of modification to our contactResource inorder to playaround PUT function. In main.js we will update the factory Contact where we have defined API url and add two additional paramters inside $resource. First one is map with id and second one is the update with method PUT.
We have our update resource ready and we will hook it up to the service.
//trimmed code
//ContactService
},
'updateContact': function (person) {
console.log('service called update');
Contact.update(person);
}
Now we are able to hook data between detail and table, make modifications. But we are not able to give proper user feedback when we click on a button. For this purpose we will ladda button. First step is to add the isSaving entry into the service. when we are saving we will isSaving = true and the point of time we finished we will udpate isSaving = false. To achieve this we will use promise. In index.html, ladda button with contacts.isSaving is already added.
Now we will add a button to remove a contact. For this purpose we will add a delete button under the Details panel heading. Just as we did with update above we will do similar modifications to remove.
Previously alert message “No results found for search term” was showing even when the spinner is loading. We will a condition to ng-show that to show alert only when length of contacts is zero and when contacts is not loading. We keep this everything inside a div element below table.
Here we will update our contact application. So instead of just reading out the forms we will make a form to make any modifications to the contact details. Firstly we will remove the panel-body horizantal list. Then we will add the form linking with server database.
<!-- trimmed code -->
<div class="panel-body">
<form class="form-horizantal" ng-submit="save()" novalidate>
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" ng-model="contacts.selectedPerson.name" required />
</div>
</div>
<!-- And so on for age, address, sex, phonenumber, country -->
</form>
<!--trimmed code-->
For doing validation of all the inputs we will angular-auto-validate.
$ bower install angular-auto-validate
For giving feedback to users when we submit the button we will use angular-ladda
$ bower install angular-ladda
Then we will add the dependencies in index.html and main.js
Whenever if any one types anything in search field we will pass that value as the query parameter. First thing we will do is whenever we type we have to see if the value is defined in the list or not or is it blank.
//Trimmed code
$scope.$watch('search', function (newVal, oldVal) {
if (angular.isDefined(newVal)) {
$scope.contacts.doSearch(newVal);
}
})
//Trimmed code
Since we are doing search, we will reset after everything is done.
Until the previous blog, if I start the localserver, items in the table are showing according to the selected order. But the order is only showing up for only first 20 items and we need to sort for all the items. Instead of client side sorting we will make the server side searching and sorting. In index.html, we will modify the tr tag which is filtering items and remove them by replacing with server side searching and sorting.
watch is way of notifying whenever variables change on scope. First of all we will remove sensitive search from main.js. For testing around basic watch variables we define with $watch scope variable with search string and second parameter a function with newVal and oldVal as function parameters. Currently we will simple log the newVal as we type in the search field.
This resource helps to manage all the CRUD operation on the API. Next we will inject the contact resource into ContactService. In the app service for the object self we are going to add three additional variables page, hasMore, isLoading and additionally we will add a function called loadContacts which is going to get the data from rest api url.
Setting up ngInfinite Scroll :-
ngInfinite Scroll is a third party application. we add the dependency in both index.html and main.js. After adding dependencies we all add the infinite-scroll directive to table tag with function loadMore() and infinite-scroll-distance of 3.
Here we will connect the loadMore function on controller to loadMore on service. Every we reach the bottom of the page a request is hitting to api which we dont want.