Can I use $interval in a service? - angularjs

Short version: please reply to the title. Thanks for your help.
Longer version: I started out, as I suppose many n00bs do, with a little code, added some, bit by bit, and found myself with everything in one huge controller.
So, I split my functionality and had a bunch of smaller controllers.
Then I wanted them to communicate with each other & I discovered services.
Then I read that controllers should be lean & mean and I started to move lots of logic from controllers to services.
Now I find that some old code, which read
$scope.internetConnectionRetryTimer = $interval($scope.attemptInternetConnection, RECONNECT_ATTEMPT_FREQUENCY);
when moved into a service as
this.internetConnectionRetryTimer = $interval(this.attemptInternetConnection, RECONNECT_ATTEMPT_FREQUENCY);
doesn't seem to be running the timer; either that or it is not calling the function upon expiry.
Same question as the short version: can I actually use $interval in a service?
[Update] here's the code:
global vars SERVER is a URL and var RECONNECT_ATTEMPT_FREQUENCY = 5 * 1000; // 5 seconds
this.attemptInternetConnection = function()
{
$interval.cancel(this.internetConnectionRetryTimer);
var params = '?action=test_connection&user=dummy';
$http.get(SERVER + params).
success(function()
{
$interval.cancel(this.internetConnectionRetryTimer);
$rootScope.$broadcast('internetIsAvailable');
})
.error(function(status)
{
this.internetConnectionRetryTimer = $interval(this.attemptInternetConnection, RECONNECT_ATTEMPT_FREQUENCY);
$rootScope.$broadcast('internetIsUnavailable');
});
};// attemptInternetConnection()

No problem with that.
Here's an example:
<div ng-app="myApp" ng-controller="myCtrl">{{Data.Test}}</div>
angular.module('myApp', []).
controller('myCtrl', function ($scope, myService) {
$scope.Data = {Test: 'Test'};
myService.ChangeTest($scope.Data);
}).
service('myService', function ($interval) {
this.ChangeTest = function (data) {
$interval(function () {
if (data.Test == 'Test') data.Test = 'Changed Test';
else data.Test = 'Test';
},500);
}
});
Here's a Fiddle.

That should work fine. Though it depends how the method attemptInternetConnection has been written as the code is not posted. If you are referrencing any variables specific to the service inside attemptInternetConnection, it should be accessed by a referrence to the service object like the sample given below.
Demo: http://plnkr.co/edit/1J0qzw044WRHSFGvZyOD?p=preview
app.service('intervalTest', function($interval) {
var me = this;
me.comments = [{
total: 3,
comment: 'some comment 1'
}, {
total: 10,
comment: 'some other comment'
}];
this.getComments = function() {
return me.comments;
};
$interval(function() {
console.log('interval executed');
me.comments[0].total++;
}, 1000);
});

Related

Issues injecting Angular factories and services

I don't know what it is about injecting factories, but I am having the most difficult time.
I've simulated what I'm attempting to do via this sample plunk http://plnkr.co/edit/I6MJRx?p=preview, which creates a kendo treelist - it works fine.
I have an onChange event in script.js which just writes to the console. That's also working.
My plunk loads the following:
1) Inits the app module, and creates the main controller myCtrl (script.js)
2) Injects widgetLinkingFactory int myCtrl
3) Injects MyService into widgetLinkingFactory
The order in which I load the files in index.html appears to be VERY important.
Again, the above plunk is NOT the real application. It demonstrates how I'm injecting factories and services.
My actual code is giving me grief. I'm having much trouble inject factories/services into other factories.
For example,
when debugging inside function linking() below, I can see neither 'CalculatorService' nor 'MyService' services. However, I can see the 'reportsContext' service.
(function () {
// ******************************
// Factory: 'widgetLinkingFactory'
// ******************************
'use strict';
app.factory('widgetLinkingFactory', ['reportsContext', 'MyService', linking]);
function linking(reportsContext, MyService) {
var service = {
linkCharts: linkCharts
};
return service;
function linkCharts(parId, widgets, parentWidgetData) {
// *** WHEN DEBUGGING HERE, ***
// I CANNOT SEE 'CalculatorService' AND 'MyService'
// HOWEVER I CAN SEE 'reportsContext'
if (parentWidgetData.parentObj === undefined) {
// user clicked on root node of grid/treelist
}
_.each(widgets, function (wid) {
if (wid.dataModelOptions.linkedParentWidget) {
// REFRESH HERE...
}
});
}
}
})();
A snippet of reportsContext'service :
(function () {
'use strict';
var app = angular.module('rage');
app.service('reportsContext', ['$http', reportsContext]);
function reportsContext($http) {
this.encodeRageURL = function (sourceURL) {
var encodedURL = sourceURL.replace(/ /g, "%20");
encodedURL = encodedURL.replace(/</g, "%3C");
encodedURL = encodedURL.replace(/>/g, "%3E");
return encodedURL;
}
// SAVE CHART DATA TO LOCAL CACHE
this.saveChartCategoryAxisToLocalStorage = function (data) {
window.localStorage.setItem("chartCategoryAxis", JSON.stringify(data));
}
}
})();
One other point is that in my main directive code, I can a $broadcast event which calls the WidgetLinking factory :
Notice how I'm passing in the widgetLinkingFactory in scope.$on. Is this a problem ?
// Called from my DataModel factory :
$rootScope.$broadcast('refreshLinkedWidgets', id, widgetLinkingFactory, dataModelOptions);
// Watcher setup in my directive code :
scope.$on('refreshLinkedWidgets', function (event, parentWidgetId, widgetLinkingFactory, dataModelOptions) {
widgetLinkingFactory.linkCharts(parentWidgetId, scope.widgets, dataModelOptions);
});
I am wasting a lot of time with these injections, and it's driving me crazy.
Thanks ahead of time for your assistance.
regards,
Bob
I think you might want to read up on factories/services, but the following will work:
var app = angular.module('rage')
app.factory('hi', [function(){
var service = {};
service.sayHi = function(){return 'hi'}
return service;
}];
app.factory('bye', [function(){
var service = {};
service.sayBye = function(){return 'bye'}
return service;
}];
app.factory('combine', ['hi', 'bye', function(hi, bye){
var service = {};
service.sayHi = hi.sayHi;
service.sayBye = bye.sayBye;
return service;
}];
And in controller...
app.controller('test', ['combine', function(combine){
console.log(combine.sayHi());
console.log(combine.sayBye());
}];
So it would be most helpful if you created a plunk or something where we could fork your code and test a fix. Looking over your services it doen't seem that they are returning anything. I typically set up all of my services using the "factory" method as shown below
var app = angular.module('Bret.ApiM', ['ngRoute', 'angularFileUpload']);
app.factory('Bret.Api', ['$http', function ($http: ng.IHttpService) {
var adminService = new Bret.Api($http);
return adminService;
}]);
As you can see I give it a name and define what services it needs and then I create an object that is my service and return it to be consumed by something else. The above syntax is TypeScript which plays very nice with Angular as that is what the Angular team uses.

AngularJS Controller and Factory

I've spent quite alot of time going over AngularJS these past few days, it's starting to all click now :) but the one question i can't seem to answer is how i get my factory to return the data as JSON - not as a promise OR even if i should!
There are a few reasons i can't see the result, A) the promise is incomplete, B) I shouldn't be doing it this way and should actually just stick with the 'then()' in the controller. Ideally i want to write one line in the controller but i always get an undefined unless i follow the pattern in the example.
Am i going against the grain on this where i don't need to?
// Will go into application.js
(function () {
var app = angular.module("ngOrderApp", []);
}());
// Will go into orderFactory.js
(function () {
var order = function ($http) {
var getOrdersJson = function () {
return [{ OrderId: 101 }, { OrderId: 102 }, { OrderId: 103 }];
}
var getOrdershttp = function () {
return $http.get('api/order')
.success(function (result) {
return result.data;
});
}
return {
getOrdersJson: getOrdersJson,
getOrdershttp: getOrdershttp
};
}
var app = angular.module("ngOrderApp").factory("order", order);
}());
// Will go into orderController.js
(function () {
var app = angular.module("ngOrderApp").controller('OrderController', function ($scope, order) {
$scope.jsonorders = order.getOrdersJson();
order.getOrdershttp().then(function (result) {
$scope.httporders = result.data;
});
});
}());
The whole point of promises is that you can't get the result of an asynchronous operation immediately.
So yes, you should use then to get its eventual result. It's three lines instead of one, but that shouldn't really be a problem. Once you get used to using promises, I'm sure you won't see it as so much of a big deal.
If that really doesn't sit well with you, you could consider using a $resource instead of using $http directly. This essentially allows you to assign a value directly to the place you want it instead of using then, and the rest of its contents will be filled in (asynchronously) when the request ultimately completes. Bear in mind that this still will not allow you to immediately access the result value. That's just not possible when you're working with asynchrony.
Binding directly to a promise worked in previous version of angular, but they got rid of this feature (I don't exactly know why) so, yes, just stick with the 'then()' in the controller.
Well this depends on the data that you are fetching. You could do a pre-fetch in your factory and store the data into a private variable like so:
(function () {
var order = function ($http) {
var getOrdersJson = function () {
return [{ OrderId: 101 }, { OrderId: 102 }, { OrderId: 103 }];
}
var getOrdershttp = function () {
return $http.get('api/order')
.success(function (result) {
return result.data;
});
}
var orders = [];
getOrdershttp().then(function(res) {
orders = res.data;
});
function getCahcedOrders(){ return orders; };
return {
getOrdersJson: getOrdersJson,
getOrdershttp: getOrdershttp,
getChacedOrders: getChacedOrders
};
}
var app = angular.module("ngOrderApp").factory("order", order);
}());
And this way your controller will only contain:
$scope.orders = order.getCachedOrders();
This is just a different approach to get rid of the .then() but you can do this only if you know for sure that you only need those orders fetched once. Otherwise you need to go with a promise. Also if you want to go with this approach you need to prefetch your orders when your app stars something like this:
(function () {
var app = angular.module("ngOrderApp", []);
app.run(['order'], function() {});
}());
So you have some kind of guarantee that your orders will be loaded when you will try to access them. The run function runs when your Angular app kickstars so if you load your factory there the $http will begin fetching your data and populate the orders array so you can use it in your app.
Again, it depends on what do you want to achieve in the end. You can compromise and have a lighter controller but you can risk not getting your fetched data in time (if you have a lot of orders). I wouldn't stress so much over a few extra lines of code as long as they are doing their job and are written correctly.
Hope this information helped.
Good luck!

How to access/update $rootScope from outside Angular

My application initializes an object graph in $rootScope, like this ...
var myApp = angular.module('myApp', []);
myApp.run(function ($rootScope) {
$rootScope.myObject = { value: 1 };
});
... and then consumes data from that object graph (1-way binding only), like this ...
<p>The value is: {{myObject.value}}</p>
This works fine, but if I subsequently (after page rendering has completed) try to update the $rootScope and replace the original object with a new one, it is ignored. I initially assumed that this was because AngularJS keeps a reference to the original object, even though I have replaced it.
However, if I wrap the the consuming HTML in a controller, I am able to repeatedly update its scope in the intended manner and the modifications are correctly reflected in the page.
myApp.controller('MyController', function ($scope, $timeout) {
$scope.myObject = { value: 3 };
$timeout(function() {
$scope.myObject = { value: 4 };
$timeout(function () {
$scope.myObject = { value: 5 };
}, 1000);
}, 1000);
});
Is there any way to accomplish this via the $rootScope, or can it only be done inside a controller? Also, is there a more recommended pattern for implementing such operations? Specifically, I need a way to replace complete object graphs that are consumed by AngularJS from outside of AngularJS code.
Thanks, in advance, for your suggestions,
Tim
Edit: As suggested in comments, I have tried executing the change inside $apply, but it doesn't help:
setTimeout(function() {
var injector = angular.injector(["ng", "myApp"]);
var rootScope = injector.get("$rootScope");
rootScope.$apply(function () {
rootScope.myObject = { value: 6 };
});
console.log("rootScope updated");
}, 5000);
Except for very, very rare cases or debugging purposes, doing this is just BAD practice (or an indication of BAD application design)!
For the very, very rare cases (or debugging), you can do it like this:
Access an element that you know is part of the app and wrap it as a jqLite/jQuery element.
Get the element's Scope and then the $rootScope by accessing .scope().$root. (There are other ways as well.)
Do whatever you do, but wrap it in $rootScope.$apply(), so Angular will know something is going on and do its magic.
E.g.:
function badPractice() {
var $body = angular.element(document.body); // 1
var $rootScope = $body.scope().$root; // 2
$rootScope.$apply(function () { // 3
$rootScope.someText = 'This is BAD practice :(';
});
}
See, also, this short demo.
EDIT
Angular 1.3.x introduced an option to disable debug-info from being attached to DOM elements (including the scope): $compileProvider.debugInfoEnabled()
It is advisable to disable debug-info in production (for performance's sake), which means that the above method would not work any more.
If you just want to debug a live (production) instance, you can call angular.reloadWithDebugInfo(), which will reload the page with debug-info enabled.
Alternatively, you can go with Plan B (accessing the $rootScope through an element's injector):
function badPracticePlanB() {
var $body = angular.element(document.body); // 1
var $rootScope = $body.injector().get('$rootScope'); // 2b
$rootScope.$apply(function () { // 3
$rootScope.someText = 'This is BAD practice too :(';
});
}
After you update the $rootScope call $rootScope.$apply() to update the bindings.
Think of modifying the scopes as an atomic operation and $apply() commits those changes.
If you want to update root scope's object, inject $rootScope into your controller:
myApp.controller('MyController', function ($scope, $timeout, $rootScope) {
$rootScope.myObject = { value: 3 };
$timeout(function() {
$rootScope.myObject = { value: 4 };
$timeout(function () {
$rootScope.myObject = { value: 5 };
}, 1000);
}, 1000);
});
Demo fiddle

Accessing and using JSON within an Angular service for logic flow

I asked the wrong question yesterday (and got a goodanswer that worked), but am realizing it's not what I needed. I need to be able to retrieve JSON data (preferably once), store it, and access it throughout my service. The challenge I'm having is that all the examples I can find talk about using JSON and passing to the app/controller, whereas in this case I need to get it, check it, and then it dictates what my module/service does.
For instance, I have my App and Controller, and then I have a module such as (this is psuedo-code, not meant to run):
angular.module("myModule")
.service("myService1", function($q, myService2, $http) {
this.getModel = function() {
return {
title: "My Title",
desc: "My Desc"
options: function () {
if (condition A)
return "option1";
else
return "option2";
}
};
};
})
.service("myService2", function($q, $http) {
this.getCfgInfo = function () {
var defer = $q.defer();
$http.get("my/json/url").then(function(response) {
defer.resolve(response.data);
});
return defer.promise;
};
})
In this example, I'm wanting to get the JSON, and use it within myService1 for both literal values (title, desc) as well as for conditions (condition A within the if).
I know I can do something like this (thanks to Joel for helping yesterday):
service("myService1", function($q, myService2, $http) {
// get a promise object for the configuration info
var cfgProm = rtDataMapper.getCfgInfo()
this.getModel = function() {
return {
title: cfgProm.then(function(response) {
return response.JSON_NAME;
}),
and it works fine as I've got the title mapped back into my model and there is a watch(), but I'm stumped as to how I get, store, and use the JSON within the service itself as a conditional (i.e. if (condition A) where condition A is coming from the JSON. Trying to wrap these in .then() doesn't seem to make sense, or at least I can't figure out how to do it.
I'm new to Angular and am attempting to modify some code that was left to us. I'm guessing I don't need the myService2 just to get the JSON. Can anyone help point me in the right direction? I've spent several hours online but can't seem to find a relevant reference/example.
Thanks
Live demo (click).
I'm having the service immediately get the data when it is injected (that code will only run once no matter how many times you inject it). That's nice because you won't have to call a function to get the data - it's called for when creating the service.
Your service method that returns that data will need to return the promise of the data, of course, since you aren't guaranteed that it will have come through when you ask for it. You can pass arguments to that method to use to determine your conditions. All you need to do for that is use promise.then in the method and resolve the promise with the modified data. Since that method is returning the promise already, the modification will be updated on the resolve. See all of this below and in the demo.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, myService) {
myService.getData(15).then(function(data) {
$scope.myData = data;
});
});
app.factory('myService', function($q, $timeout) {
//this code only runs once when you first inject the service
//get data immediately
var deferred = $q.defer();
$timeout(function() { //simulate ajax call
var data = { //ajax response data
foo: 15,
bar: 'Some data!'
};
data = modifyData(data, 1);
deferred.resolve(data);
}, 500);
function modifyData(data, fooVal) {
if (data.foo === fooVal) {
data.baz = 'Conditional data!';
}
return data;
}
var myService = {
//data can be modified when it comes from the server,
//or any time you call this function
getData: function(fooVal) {
if (fooVal) { //if you want to modify the data
deferred.promise.then(function(data) {
data = modifyData(data, fooVal);
deferred.resolve(data);
});
}
return deferred.promise;
}
};
return myService;
});

AngularJS broadcast from one service not triggering a call to second service

I have defined two AngularJS services ... one is for the YouTube Player API, and other for the YouTube iFrame Data API. They look like this:
angular.module('myApp.services',[]).run(function() {
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
})
.factory('YtPlayerApi', ['$window', '$rootScope', function ($window, $rootScope) {
var ytplayer = {"playerId":null,
"playerObj":null,
"videoId":null,
"height":390,
"width":640};
$window.onYouTubeIframeAPIReady = function () {
$rootScope.$broadcast('loadedApi');
};
ytplayer.setPlayerId = function(elemId) {
this.playerId=elemId;
};
ytplayer.loadPlayer = function () {
this.playerObj = new YT.Player(this.playerId, {
height: this.height,
width: this.width,
videoId: this.videoId
});
};
return ytplayer;
}])
.factory('YtDataApi', ['appConfig','$http', function(cfg,$http){
var _params = {
key: cfg.youtubeKey
};
var api="https://www.googleapis.com/youtube/v3/";
var yt_resource = {"api":api};
yt_resource.search = function(query, parameters) {
var config = {
params: angular.extend(angular.copy(_params),
{maxResults: 10,
part: "snippet"}, parameters)
};
return $http.get(api + "search?q=" + query, config);
};
return yt_resource;
}]);
(also note that the 'setPlayerId' function of my player service is called by a custom directive ... but that's not important for my question).
So, here's the issue. I need to ensure that the Player API code is loaded before I set the video id and create the player, which is why I have it broadcasting the 'loadedApi' message. And this works great, if I then in my controller pass a hard-coded video id, like this:
function ReceiverCtrl($scope,$rootScope,$routeParams,ytplayer,ytdataapi) {
$scope.$on('loadedApi',function () {
ytplayer.videoId='voNEBqRZmBc';
ytplayer.loadPlayer();
});
}
However, my video IDs won't be determined until I make an API call with the data api service, so I ALSO have to ensure that the results of that call have come back. And that's where I'm running into problems ... if I do something like this:
$scope.$on('loadedApi',function () {
ytdataapi.search("Mad Men", {'topicId':$routeParams.topicId,
'type':'video',
'order':'viewCount'})
.success(function(apiresults) { // <-- this never gets triggered
console.log(apiresults); // <-- likewise, this obviously doesn't either
});
});
Then the interaction with the data service never happens for some reason. I know the data service works just fine, for when I un-nest it from the $on statement, it returns the api results. But sometimes latency makes it so that the results don't come back fast enough to use them in the player service. Any thoughts on what I can do to make the data search after receiving the message that the player API is ready, but still keep the two services as two separate services (because other controllers only use one or the other, so I don't want them dependent on each other at the service level)?
Figured it out; I had to call $scope.$apply(), like this:
function ReceiverCtrl($scope,$rootScope,$routeParams,ytplayer,ytdataapi) {
$scope.$on('loadedApi',function () {
ytdataapi.search("",{'topicId':$routeParams.topicId,'type':'video','maxResults':1,'order':'viewCount'}).success(function(apiresults) {
ytplayer.videoId=apiresults.items[0].id.videoId;
ytplayer.loadPlayer();
});
$scope.$apply();
});
}
Is there anyone who could shed light on why this works, though? $scope.$digest() also works ... but I thought those methods were only used when you need to update bindings because of some javascript code that Angular isn't aware of. Is the nesting I've got here doing that (I wouldn't think it should, as my ytdataapi service is using $http)?

Resources