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.
<!-- trimmed code--> <button class="btn btn-primary pull-right" ng-click="showCreateModal()">Create</button> <!--trimmed code-->
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
code:- https://github.com/praneethkumarpidugu/angular1-core/commit/c9128a6202ee0ef861e4fac03bc86037fd59783f
Reusing snippets of html with ng-include :-
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.
code:- https://github.com/praneethkumarpidugu/angular1-core/commit/e516df98e47684709a5f81ffcf2476b80a073854
Creating a contact using our resource :-
Firstly, we will create our modal template.
<div id="createModal" class="modal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" ng-click="createModal.hide()">&times;</button> <h4 class="modal-title">Create Contact</h4> </div> <div class="modal-body"> <form ng-submit="createContact()" class="form-horizantal" novalidate> <ng-include src="'templates/form.html'"></ng-include> </form></div> </div> </div> </div>
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
$scope.showCreateModal = function () {
$scope.createModal = $modal({
scope: $scope,
template: 'templates/modal.create.tpl.html',
show: true
})
};
//trimmed code
Below is the screenshot when we click on create button which is linked with form.html.
Now we will create the contact.
//trimmed code
$scope.createContact = function () {
console.log("createContact");
$scope.contacts.createContact($scope.contacts.selectedPerson)
};
//trimmed code
Since both createModal and createContact both using selected Person, we will null the value of createModal when createContact is selected.
Next we will create the service createContact in contactService which has the functionality similar to updateContact.
//trimmed code contactService
'createContact': function (person) {
self.isSaving = true;
person.$update().then(function () {
self.isSaving = false;
});
}
code :- https://github.com/praneethkumarpidugu/angular1-core/commit/204af753398feddd7c49bf1d9e6f4e77bd6edcfe
praneethspeaks 