In part 1 we saw firebase setup, application setup and required css,js files and libraries. In this post we will take a look at the controller, services and directives.
App.js is pretty basic with normal routing stuff nothing much to explain and brag about. Only thing to notice is that we are using a constant to define a path to default pic, in case user has no photo.
|
1 2 3 4 5 |
var cbApp = angular.module('contactbookApp', ['ui.router','firebase']); cbApp.constant("appConstants", { "default_pic" : "assets/images/nopic.jpeg" }); |
Before going to controller code, lets have a look at the firebase service which works as our data provider.
firebase service
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
cbApp.service('firebaseService',["$firebaseArray", "$filter", function ($firebaseArray, $filter) { var fbObject = firebase.database().ref(); var fbArray = $firebaseArray(fbObject); var contacts = {}; // Return all contacts var getAll = function(){ return fbArray.$loaded(); }; // Return single contact details var getOne = function(id){ return fbArray.$getRecord(id); }; // Add contact var addContact = function(info){ return fbArray.$add(info); }; // Update contact details var updateContact = function(newInfo,id){ var index = fbArray.$indexFor(id); fbArray[index] = newInfo; fbArray[index].id = id; return fbArray.$save(index); }; // Remove contact var removeContact = function(id){ var index = fbArray.$indexFor(id); return fbArray.$remove(index); }; // return methods return { getAll : getAll, getOne : getOne, addContact : addContact, updateContact: updateContact, removeContact: removeContact }; }]); |
Using firebase service in controller
Above service can be invoked in controller as below, here in this example to fetch all contacts using getAll() method
|
1 2 3 4 |
// Fetch all contacts firebaseService.getAll().then(function(contacts) { $scope.contacts = contacts; }) |
Controller.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
cbApp.controller("homeCtrl",[ "$scope", "firebaseService", function( $scope, firebaseService ){ // Fetch all contacts firebaseService.getAll().then(function(contacts) { $scope.contacts = contacts; }) }]); cbApp.controller("detailsCtrl",[ "$scope", "$stateParams", "$state", "firebaseService", function( $scope, $stateParams, $state, firebaseService ){ $scope.id = $stateParams.id; // msg variables receives its values from previous actions $scope.msg = $stateParams.msg; // Fetch single contact $scope.contact = firebaseService.getOne($scope.id); // Delete contact $scope.removeContact = function(id){ firebaseService.removeContact(id).then(function(response){ $scope.msg = {type : "success","msg" : "Contact deleted!"}; $state.go('^'); }, function(err){ $scope.msg = {type : "error","msg" : "Argg, Something went wrong!"}; }); } }]); cbApp.controller("editCtrl",[ "$scope", "$stateParams", "$state", "firebaseService", function( $scope, $stateParams, $state, firebaseService ){ $scope.id = $stateParams.id; // Get contact details $scope.contact = firebaseService.getOne($scope.id); // Save updated details $scope.saveContact = function(id){ firebaseService.updateContact($scope.contact, id).then(function(response){ $scope.msg = {type : "success","msg" : "Contact info Updated"}; $state.go('home.details', { id : $scope.id, msg : $scope.msg}, {reload: true, inherit : false}); }, function(err){ $scope.msg = {type : "error","msg" : "Argg, Something went wrong!"}; }); } }]); cbApp.controller("addCtrl",[ "$scope", "$state", "firebaseService", function( $scope, $state, firebaseService ){ $scope.contact = {}; $scope.pic = "assets/images/nopic.jpeg"; // Save updated details $scope.saveContact = function(id){ // Get count of items so we can assign pic to user firebaseService.getAll().then(function(contacts) { // Set pic to new contact $scope.contact.pic = parseInt(contacts.length + 1); // Save contact firebaseService.addContact($scope.contact).then(function(response){ $scope.msg = {type : "success","msg" : "Contact added"}; // fill contact object with new info $state.go('home.details', { id : response.key, msg : $scope.msg}, {reload: true, inherit : false}); }, function(err){ console.log(err); $scope.msg = {type : "error","msg" : "Argg, Something went wrong!"}; }); }) } }]); |
While coding this application i got a chance to write my first ever real world directive (before this for learning purpose i coded some directives which were nothing but kind of “hello world”). This directive takes id as a argument and generates rounded image of user and replaces the tag (directives template tag) with user image. Lets take a look at the directive,
userpic.directive.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Directive to generate user pic using id cbApp.directive('userPic', function(appConstants) { return { restrict: 'E', template: '<img class="circle" ng-src="{{imgsrc}}">', scope: { imageid: '@' }, link: function(scope, elem, attr){ scope.$watch('imageid', function(value) { if(scope.imageid) scope.imgsrc = 'https://randomuser.me/api/portraits/men/'+value+'.jpg'; else scope.imgsrc = appConstants.default_pic; }); }, replace: true }; }); |
|
1 |
<user-pic imageid="{{contact.pic}}"></user-pic> |
