create a contact using our resource

section6/lesson1/index.html

@@ -50,7 +50,7 @@
 								<option value="-email" >Email (DEC)</option >
 							</select >
 						</div >
-					<button class="btn btn-primary pull-right" ng-click="showCreateModal()">Create</button>
+					<button class="btn btn-primary pull-right" ng-click="showCreateModal()" >Create</button>
 					</form >
 
 					<table class="table table-bordered" infinite-scroll="loadMore()" infinite-scroll-distance="1">
@@ -113,9 +113,9 @@
 				<div class="panel-body" >
 					<form class="form-horizontal"
 							ng-submit="save()"
-							novalidate>
+							novalidate >
 
-					<ng-include src="'templates/form.html'"></ng-include>
+						<ng-include src="'templates/form.html'" ></ng-include>
 					</form>
 
 

section6/lesson1/main.js

@@ -47,14 +47,20 @@ app.controller('PersonListController', function ($scope, $modal, ContactService)
 		$scope.contacts.loadMore();
 	};
 
-	$scope.showCreateModal = function (){
+	$scope.showCreateModal = function () {
+		$scope.contacts.selectedPerson = {};
 		$scope.createModal = $modal({
 			scope: $scope,
 			template: 'templates/modal.create.tpl.html',
 			show: true
 		})
 	};
 
+	$scope.createContact = function () {
+		console.log("createcontact");
+		$scope.contacts.createContact($scope.contacts.selectedPerson)
+	};
+
 	$scope.$watch('search', function(newVal, oldVal) {
 		if (angular.isDefined(newVal)) {
 			$scope.contacts.doSearch(newVal);
@@ -139,6 +145,13 @@ app.service('ContactService', function (Contact) {
 				self.persons.splice(index, 1);
 				self.selectedPerson = null;
 			});
+		},
+		'createContact': function (person) {
+			self.isSaving = true;
+			Contact.save(person).$promise.then(function () {
+				self.isSaving = false;
+			});
+
 		}
 
 	};

section6/lesson1/templates/form.html

@@ -0,0 +1,54 @@
+<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>
+<div class="form-group">
+    <label class="col-sm-2 control-label">Email</label>
+    <div class="col-sm-10">
+        <input type="text" class="form-control" name="email" ng-model="contacts.selectedPerson.email" required />
+    </div>
+</div>
+<div class="form-group">
+    <label class="col-sm-2 control-label">Photo</label>
+    <div class="col-sm-10">
+        <input type="text" class="form-control" name="photo" ng-model="contacts.selectedPerson.photo" />
+    </div>
+</div>
+<div class="form-group">
+    <label class="col-sm-2 control-label">Sex</label>
+    <div class="col-sm-10">
+        <input type="text" class="form-control" name="sex" ng-model="contacts.selectedPerson.sex"  />
+    </div>
+</div><div class="form-group">
+    <label class="col-sm-2 control-label">Birthday</label>
+    <div class="col-sm-10">
+        <input type="text" class="form-control" name="bday" ng-model="contacts.selectedPerson.birthdate" bs-datepicker/>
+    </div>
+</div><div class="form-group">
+    <label class="col-sm-2 control-label">Phone</label>
+    <div class="col-sm-10">
+        <input type="tel" class="form-control" name="phone" ng-model="contacts.selectedPerson.phonenumber" />
+    </div>
+</div><div class="form-group">
+    <label class="col-sm-2 control-label">Address</label>
+    <div class="col-sm-10">
+        <input type="text" class="form-control" name="address" ng-model="contacts.selectedPerson.address" />
+    </div>
+</div>
+<div class="form-group">
+    <label class="col-sm-2 control-label">City</label>
+    <div class="col-sm-10">
+        <input type="text" class="form-control" name="city" ng-model="contacts.selectedPerson.city" />
+    </div>
+</div>
+<div class="form-group">
+    <label class="col-sm-2 control-label">Country</label>
+    <div class="col-sm-10">
+        <input type="text" class="form-control" name="country" ng-model="contacts.selectedPerson.country" />
+    </div>
+</div>
+<div class="buttons">
+    <button class="btn btn-primary btn-block" ladda="contacts.isSaving" type="submit"> Save </button>
+</div>

section6/lesson1/templates/modal.create.tpl.html

@@ -0,0 +1,22 @@
+<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-horizontal"
+                      novalidate>
+                    <ng-include src="'templates/form.html'"></ng-include>
+                </form>
+            </div>
+        </div>
+    </div>
+
+</div>