We Keep Coding

AngularJS - Unable to get Resolved Value of a Factory's Method which Uses Promises in Directive's TemplateUrl

I'm working on a very modularized project and currently I'm building an Element Directive which changes templateUrl based on user login/logout.
To do that, I'm trying to execute a Factory's Function inside templateUrl. That particular functions calls another method from a JWT Factory and returns true if the user is logged or false if not.
Then, If in my templateUrl I receive true, I pick a certain url, if false another one.
But, sadly, I receive the following error:
[$http:badreq] Http request configuration url must be a string. Received: {}
All $log.log() print the correct result.
Of course, it won't render nor page1 nor page2
Directive
(function () {
'use strict';
angular
.module('myApp')
.directive('myDirective', ['SessionCheckerFactory', function (SessionCheckerFactory) {
return {
restrict: 'E',
templateUrl : function(){
return SessionCheckerService.checkSession().then( function (res) {
console.log(res);//true
return res ? 'app/page1.html' : 'app/page2.html';
});
},
controller : 'MyController',
controllerAs : 'myCtrl',
bindToController : true
};
}]);
})();
SessionCheckerFactory
(function () {
'use strict';
angular
.module('myApp')
.factory('SessionCheckerFactory', function (AuthTokenFactory) {
function checkSession() {
return AuthTokenFactory.isAuth();
}
return {
checkSession: checkSession
}
});
})();
AuthTokenFactory
(function() {
'use strict';
angular.module('myApp')
.factory('AuthTokenFactory', function AuthTokenFactory(store, $cookies) {
//Takes user's info from LocalStorage, if not empty returns a String with encoded string informations
function getToken() {
if (store.get(key)) {
return store.get(key);
}
//Takes user's info from cookie
var token = $cookies.get('token', {path: '/'});
store.set(key, token);
return token;
}
//If getToken is empty returns false, else true
function isAuth() {
return Promise.resolve(Boolean(getToken()));
}
return {
isAuth : isAuth,
getToken : getToken
}
});
})();
I read around that this problem is usually generated by $http requests, but that's not my case. I didn't find any solution to that so far.
How can I fix this?
Thanks in advance.

Then, If in my templateUrl I receive true, I pick a certain url, if false another one.
Actually you don't. If you receive true, you pick one url, if some truthy value, another url, and if something falsy then you don't pick any url:
if (res) {
if (res === true) {
return resolve('app/page1.html');
} // else
return resolve('app/page2.html');
}
// else return undefined;
You probably want
templateUrl : function(){
return SessionCheckerFactory.checkSession().then(function (res) {
if (res) {
return 'app/page1.html';
} else {
return 'app/page2.html';
}
})
},

I managed to fix the issue using a link function and $templateRequest
Directive
link: function (scope, element) {
SessionCheckerService.renderTemplate().then(function (temp){
$templateRequest(temp).then(function (requestedTemplate) {
element.html(requestedTemplate);
$compile(element.contents())(scope);
});
});
}
Factory
var templateConfig = './app/config/templates.config.json';
function getTemplate(){
return $http.get(templateConfig)
.then(function(templates) {
return templates.data;
});
}
function checkSession() {
return Promise.resolve(AuthTokenFactory.isAuth());
}
function whichTemplate(template, result) {
var myTemplate = '';
if(result){
myTemplate = template.logIn;
} else {
myTemplate = template.logOut;
}
if(myTemplate){
return Promise.resolve(myTemplate);
}
}
//Chaining the methods and returning the correct template
function renderTemplate() {
return new Promise(function (resolve) {
checkSession().then(function(isAuth){
getTemplate().then( function(templates){
whichTemplate(templates, isAuth).then( function (temp) {
return resolve(temp);
});
});
});
});
}
return {
renderTemplate : renderTemplate
}
Templates Config
{
"logOut" : "app/page1.html",
"logIn" : "app/page2.html"
}
I hope It'll be helpful.

How to pass values between service and controllers

How can one pass values from services to controllers? I have been reading stackoverflow questions regarding this and none of the solutions seem to solve my problem. I am trying to access google spreadsheets using tabletop.js When I console.log from services I can see the values however when I try to access the spreadsheet values from controller I get the following error: chartService.getProperty is not a function
The code for getting URL of the spreadsheet works fine. With get method. Not sure what I am doing wrong here.
Controller
angular.module('myapp')
.controller('piechartCtrl', function (chartService, $scope, config) {
$scope.values = chartService.getProperty();
});
Service.js
angular.module('myapp')
.service('chartService', function(){
return {
getUrl: function init(path) {
Tabletop.init( { key: path,
callback: showInfo,
simpleSheet: true } )
}
}
function showInfo(data, tabletop) {
return{
getProperty: function(){
return data
},
setProperty: function(value){
data = value;
}
}
}
});

This is your service, the only thing i see you returning is the getUrl. so the only thing you will be able to access from the controller is chartService.getUrl function.
service('chartService', function ()
{
return
{
getUrl: function init(path)
{
Tabletop.init({
key: path,
callback: showInfo,
simpleSheet: true
})
}
}
function showInfo(data, tabletop)
{
return
{
getProperty: function ()
{
return data
},
setProperty: function (value)
{
data = value;
}
}
}
});
To Get it working, while I don't think this is the ideal solution it should work...
service('chartService', function ()
{
var returnObject =
{
getUrl: function init(path)
{
Tabletop.init({
key: path,
callback: showInfo,
simpleSheet: true
})
},
resultValue: {}
}
function showInfo(data, tabletop)
{
return
{
getProperty: function ()
{
return data
},
setProperty: function (value)
{
data = value;
returnObject.resultValue = value;
}
}
}
return returnObject
});
then replace chartService.getProperty() with chartService.resultValue although this is in no was synchronous.

Should my factory return an object with helper methods or should I use prototype?

I'm a beginner with angular and I try to understand if I should user a factory like that:
app.factory('FoobarServices', ['$http', function ($http) {
var Foobar = {
// Model
};
return {
getFoobar: function () {
},
setFoobar: function (Foobar) {
},
update: function (foobar) {
},
delete: function (id)
}
};
}]);
Or something like:
app.factory('Fooba', ['$http', function($http) {
function Foobar(foobar) {
// Initialize foobar
};
Foobar.prototype = {
getFoobars: function() {
},
setFoobar: function(foobar) {
},
update: function(foobar) {
},
delete: function(id) {
},
};
return Foobar;
}]);
I'm not sure to understand what's the pros and cons of each pattern, and which one is more suitable for an angular project.
Could you please tell me which one should I use?

It depends on how you want to use your service.
Factory is usually being used to store some constructor from which you can later instantiate some objects.
For example:
app.factory('Client', function () {
function Client (name) {
this.name = name;
}
Client.prototype.sayHello = function () {
console.log('Hello, my name is ' + this.name + '!');
}
return Client;
})
.controller('ClientController', function (Client) {
var bob = new Client('Bob');
})
If your service is singleton, you can register it as service instead of factory and angular will create an instance for you.
Or you can register it as factory but return some object with methods. It is useful when you don't want to deal with context (this) inside your service logic:
app.factory('ClientStorage', function () {
function set () {
// to be implemented
}
function get () {
// to be implemented
}
return {
get: get,
set: set
};
})

How to write a multiple Aync Function within a Service in AngularJS

Im just starting on AngularJS. I'm not sure how to churn this out. I'm trying to include multiple functions within one service. (I hope this is not against bad practice.)
The following is my working code:
myDataService.async().then(function (d) {
$scope.dbCalls = d.d;
});
My Service:
app.factory('myDataService', function ($http) {
// How do you get this bottom line to work?
// this.getAllCalls = function () {
var myService = {
async: function () {
var promise = $http.post('AngularTest.aspx/FetchCalls', { data: {} }).then(function (response) {
console.log(response);
return response.data;
});
return promise;
}
};
return myService;
//}; <--Commented out for clarity
});
Thanks!

you just return an object with properties from the service, then you are able to call those properties as different service methods
like so:
.service('myService', function() {
return {
firstMethod: function() { ... },
secondMethod: function() { ... },
thirdMethod: function() { ... }
}
})
and in the controller/directive
.controller('myCtrl', function(myService) {
myService.firstMethod();
myService.secondMethod();
myService.thirdMethod();
})

Watching changed in the service from the controller

I am trying to listen to changes in my injected service (self-updating) in the controller. In the below example you'll find two $watch cases - one that works but I don't know exactly why and one that was obvious to me, yet doesn't work. Is the second example the right way to do it? Isn't that code duplication? What is the right way to do it?
Service:
app.factory("StatsService", [
'$timeout', 'MockDataService',
function ($timeout, MockDataService) {
var service, timeout;
timeout = 5000;
service = {
fetch: function () {
// Getting sample data, irrelevant, however this is what updates the data
return this.data = MockDataService.shuffle();
},
grab: function () {
this.fetch();
return this.update();
},
update: function () {
var _this = this;
return $timeout(function () {
return _this.grab();
}, timeout);
}
};
service.grab();
return service;
}
]);
Controller:
app.controller("StatsController", [
'$scope', 'StatsService',
function ($scope, StatsService) {
var chart;
$scope.stats = StatsService;
$scope.test = function (newValue) {
if (arguments.length === 0) {
return StatsService.data;
}
return StatsService.data = newValue;
};
// This doesn't work
$scope.$watch('stats', function (stats) {
return console.log('meh');
});
// This works, don't know why
$scope.$watch('test()', function (stats) {
return console.log('changed');
});
}
]);

See the third parameter for $watch: objectEquality
Compare object for equality rather than for reference.
However if you're only interested in watching the returned data, then you should do:
$scope.$watch('stats.data', function (stats) {
return console.log('meh');
});

You could use $rootScope events. For example inside the service you could dispatch an event with $rootScope.$broadcast("somethingFetched", data) and catch it in the controller $scope.$on("somethingFetched", function(event, data) { $scope.data = data }).
More details you could find in the documentation http://docs.angularjs.org/api/ng.$rootScope.Scope