Day # 10 Connecting our application to REST API using ng-resource

Showing a warning when no results are returned :-

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.

<!-- trimmed code --></table>
<div ng-show="contacts.persons.length == 0 && !contacts.isLoading">

<!-- trimmed code -->

code:- https://github.com/praneethkumarpidugu/angular1-core/commit/13052a58a6035c4b3f91addbefa7eacce906b9f1

Convert the detail panel to a form :-

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

code:- https://github.com/praneethkumarpidugu/angular1-core/commit/842c9f08271ea6cd3ac19831b15d8cc10563f364