AngularJS pass a variable into service that use $http + $interval - javascript

Found this code while struggling with $http and $interval.
http://embed.plnkr.co/fSIm8B/script.js
Forked it to:
http://plnkr.co/edit/Al8veEgvESYA0rhKLn1q
To make it useful, how do I pass a variable to the service?
Broken code to show intent:
var myAppModule = angular.module("myApp", ['ngMockE2E']);
myAppModule.controller('MyController', function($scope, pollingService) {
var stopNow = 5;
var id = 1001;
pollingService(stopNow, id).then(
function(value) {
//fully resolved (successCallback)
$scope.data = value;
console.log('Success Called!');
},
function(reason) {
//error (errorCallback)
console.log('Error:' + reason);
},
function(value) {
//notify (notifyCallback)
$scope.data = value;
console.log('Notify Calls:' + value.count);
}
);
});
myAppModule.factory("pollingService", function ($http, $interval, $q, $httpBackend) {
var data = { resp: {}, status: 'Initialized', count: 0};
var deferred = $q.defer();
$httpBackend.whenGET("data.json").respond({type:'mock'});
//just loop 10 times for an example
var completed = $interval(function(ip) {
data.status = 'Running';
**//How can I Change the $http URL by passing a variable in?**
$http.get('/getId/' + id).then(function(r) {
data.resp = r.data.type;
data.count++;
**//Instead of 5 I want to pass this in as an variable**
if (data.count==stopNow)
{
$interval.cancel(completed);
}
console.log('Http\'s:' + data.count);
deferred.notify(data);
});
}, 500, 10);
completed.then(function(){
data.status = 'Completed!';
deferred.resolve(data);
});
return deferred.promise;
});

You can return a function in your service:
myAppModule.factory("pollingService", function ($http, $interval, $q, $httpBackend) {
return {
doSomething: function(arg1, arg2){
// Your code goes here
return deferred.promise;
}
}
And then on the controller
pollingService.doSomething(arg1,arg2).then(...)

Related

Pass data between functions in same controller using another service to get data

I get some data through Myservice from another Controller. I can see {{users.data}} from the view, but users.length = 0 ,and $data is empty, that means I can't access to the content of MyService in getData function.. if i replace MyService with json data like
$scope.users=[{..},{..}] it works fine
thank you ..
app.service('MyService', function() {
return data = [];
});
app.controller('tableController', function ($scope,
$filter,NgTableParams,MyService) {
$scope.users= MyService
$scope.usersTable = new NgTableParams({
page: 1,
count: 6
}, {
getData: function(params) {
params.total($scope.users.length);
$scope.da = params.sorting() ? $filter('orderBy')
($scope.users, params.orderBy()) : $scope.da;
$scope.da= params.filter() ? $filter('filter')
($scope.da, params.filter()) : $scope.users;
return $scope.da.slice((params.page() - 1) *
params.count(), params.page() * params.count());
}
}
);
});
When you get your data in the first controller you call MyService.setData(data); The service will store in its local var data and keep it there. Then in the second controller you can retrieve that data by calling MyService.getData()
app.service('MyService', function() {
var ret = {
data: [],
setData: function(inData) {
ret.data = inData;
},
getData: function() {
return ret.data;
}
};
return ret;
});
the first controller 1
app.controller('EventCtrl', ['$scope', 'EventService', 'MyService',
function ($scope, EventService , MyService) {
var baseUrl = '';
$scope.getEvents=function()
{
var apiRoute = 'http://localhost:9811/notification/notification/';
var _Event = EventService.getAll(apiRoute);
_Event.then(function (response) {
$scope.events= response.data;
MyService.data = $scope.events;
MyService.setData($scope.events);
$scope.VarCtrl1= MyService;
},
function (error) {
console.log("Error: " + error);
});
}
$scope.getEvents()
}]);
i updated the service but it doesnt work ..so i modified the first controller like this what do you think?
app.controller('EventCtrl', ['$scope', 'EventService', 'MyService',
function ($scope, EventService , MyService) {
var baseUrl = '';
$scope.getEvents=function()
{
var apiRoute =
'http://localhost:9811/notification/notification/';
var _Event = EventService.getAll(apiRoute);
_Event.then(function (response) {
var data = response.data
MyService.setData(data);
$scope.VarCtrl1= MyService;
},
function (error) {
console.log("Error: " + error);
});
}
$scope.getEvents()
}]);
Thanks for the update of the service now its better ...i can have data in $users and $data in tableController but orderBy need an array but i get this :( when i do consoleLoge($scope.users)
Object {data: Array(0), setData: function, getData: function}data:
Array(9)0: Object1: Object2: Object3: Object4: Object5: Object6:
Object7: Object8: Objectlength: 9__proto__: Array(0)getData:
function ()setData: function (inData)proto: Object
tableController.js:24

Serving processed data using factory, AngularJS

I am working on an application in which I am calling a webservice and get a response. I am using that response in 2 different modules. In first module I am using as it is and in second module I am doing some formatting and using it.
I created a service for getting data as follows
angular.module('myApp').factory('getData',function($http, $q, restURLS) {
var getData= {};
getData.getTree = function () {
var deferred = $q.defer();
$http.get(restURLS.getTree).
success(function (data) {
deferred.resolve(data);
}).error(deferred.reject);
return deferred.promise;
};
return getData;
});
for Serving response I created another factory as follows
angular.module('myApp').factory('tree', function($http, $q, restURLS, getData, messages) {
var tree= {};
tree.hierarchy = {};
tree.formattedHierarchy = {};
function formatHierarchy(data) {
//some formatting on data.
tree.formattedHierarchy = data;
}
function callTree() {
getData.getTree()
.then(function (data) {
tree.hierarchy = angular.copy(data);
formatHierarchy(data);
}).catch(function () {
//error
});
}
callTree();
return tree;
});
I want to call webservice only once. if data is loaded then factory('tree') should send the data to controller. Otherwise factory('tree') should call webservice and load data.
you need something to know if you got your tree or not... try this:
(UPDATED)
var myApp = angular.module('myApp', ['ngMockE2E'])
// FAKE HTTP CALL JUST FOR EMULATE
.run(function ($httpBackend) {
var tree = [{
node1: 'abcde'
}, {
node2: 'fghi'
}];
$httpBackend.whenGET('/tree').respond(function (method, url, data) {
return [200, tree, {}];
});
})
// YOUR HTTP SERVICE
.factory('getData', function ($http, $q) {
return {
getTree: function () {
var deferred = $q.defer();
$http.get("/tree").
success(function (data) {
deferred.resolve(data);
}).error(deferred.reject);
return deferred.promise;
}
}
})
.factory('TreeFactory', function ($http, $q, getData) {
var tree = {};
var updated = false;
tree.hierarchy = {};
tree.formattedHierarchy = {};
function formatHierarchy(data) {
//some formatting on data.
tree.formattedHierarchy = data;
}
return {
callTree: function() {
if(!updated){
console.log("making http call");
return getData.getTree().then(function (data) {
tree.hierarchy = angular.copy(data);
formatHierarchy(data);
updated = true;
return tree;
}).
catch (function () {
//error
});
}else{
console.log("tree already loaded");
var deferred = $q.defer();
deferred.resolve(tree);
return deferred.promise;
}
}
};
}).controller("MyCtrl", ['$scope', 'TreeFactory', function ($scope, TreeFactory) {
$scope.updateTree = function(){
TreeFactory.callTree().then(function(data){
$scope.tree = data;
});
};
}]);
HTML
<div ng-app="myApp" ng-controller="MyCtrl" ng-init="updateTree()">tree: {{tree}} <br><button ng-click="updateTree()">UPDATE TREE</button></div>
CHECK THE FIDDLE

Angular/Jasmin : can't get values passed while testing

I wrote a page that allows me to change my password. The code works and it does everything I want it to do, so I started writing tests. Since I'm not as experienced in Angular testing this had proven to be quite difficult and I can't get passed this error:
TypeError: 'undefined' is not an object (evaluating 'plan.apply')
at /Users/denniegrondelaers/asadventure/myproject-web/src/users/controllers/userPasswordController.js:9
at /Users/denniegrondelaers/asadventure/myproject-web/test/unitTests/specs/users/controllers/userPasswordControllerSpec.js:98
The controller:
userPasswordController.js
users.controllers.controller('userPasswordController',
['$scope', 'Session', '$state', 'UserService', 'languages',
function ($scope, Session, $state, UserService, languages) {
$scope.languages = languages;
$scope.password = "";
$scope.notEqual = false;
$scope.isSuccessful = false;
$scope.changePassword = function() {
var pw = {
userId: Session.getCurrentSession().userId,
oldPassword: encrypt($scope.password.oldPassword),
newPassword: encrypt($scope.password.newPassword),
newPasswordRepeat: encrypt($scope.password.newPasswordRepeat)
};
if (pw.newPassword === pw.newPasswordRepeat) {
$scope.notEqual = false;
UserService.setNewPassword(pw).then(function(res) {
$scope.formErrors = undefined;
$scope.isSuccessful = true;
}, function (error) {
$scope.formErrors = error.data;
}
);
} else {
$scope.notEqual = true;
}
};
var encrypt = function (password) {
var encrypted = CryptoJS.md5(password);
return encrypted.toString(CryptoJS.enc.Hex);
};
}
]
);
The service:
userService.js
userService.setNewPassword = function (password) {
return $http
.put(EnvironmentConfig.endpointUrl +
"/password/change", password)
};
The test:
userPasswordControllerSpec.js
describe('Users', function () {
describe('Controllers', function () {
fdescribe('userPasswordController', function () {
var $scope,
controller,
$q,
willResolve,
mockSession,
mockState,
mockUserService,
mockLanguages;
beforeEach(function () {
module('mysite.users.controllers');
module(function ($provide) {
$provide.value('translateFilter', function (a) {
return a;
});
$provide.value('$state', function (a) {
return a;
});
});
mockSession = {
getCurrentSession: function () {
return {userId: 4};
}
};
mockState = {
params: {
id: 1
},
go: function () {
}
};
mockLanguages = {
getLanguages : function () {
var deferred = $q.defer();
deferred.resolve({
data: [{}]
});
return deferred.promise;
}
};
mockUserService = {
setNewPassword : function () {
var deferred = $q.defer();
if (willResolve) {
deferred.resolve({
data: [{}]
});
}
return deferred.promise;
}
};
inject(function (_$q_, $controller, $rootScope) {
controller = $controller;
$q = _$q_;
$scope = $rootScope.$new();
});
controller('userPasswordController', {$scope: $scope, Session: mockSession, $state: mockState,
UserService: mockUserService, languages: mockLanguages
});
willResolve = true;
});
it('should change password', function () {
spyOn(mockUserService, 'setNewPassword').and.callThrough();
spyOn(mockState, 'go').and.callThrough();
spyOn(mockSession, 'getCurrentSession').and.callFake();
expect(mockUserService.setNewPassword).not.toHaveBeenCalled();
expect($scope.isSubmitable()).not.toBeTruthy();
$scope.compareStoreSelection = function () {
return true;
};
$scope.password = {
oldPassword: "123456",
newPassword: "password",
newPasswordRepeat: "password"
};
expect($scope.isSubmitable()).toBeTruthy();
>>> $scope.changePassword(); <<< LOCATION OF ERROR, line 98
expect(mockUserService.setNewPassword).toHaveBeenCalled();
$scope.$apply();
});
});
});
});
I've marked the line that gives the code in the test.
Anybody any idea how to fix this? A colleague suggested altering my controller code, but I'd like to keep it as it is, since it seems logical that this code shouldn't be altered for testing to work, right?
Solution
Yarons' suggestion to change the mockSession.getCurrentSession.callFake to mockSession.getCurrentSession.callThrough fixed it!

what are the reasons this unit test is failing?

code:
$scope.nextStep = function(route) {
session.save($scope.sessionViewModel);
var input = {
emailAddress : session.account.email,
caller : 'USERNAME_EXIST'
};
webServiceDal.doesWebLoginExist(input).success(function(response) {
console.log(response.WebLoginAppResponse.errorFlag);
if ((response.WebLoginAppResponse.errorFlag) && ((response.WebLoginAppResponse.returnCode == 1006) || (response.WebLoginAppResponse.returnCode == 'MSG0307'))) {
$scope.globalError = $scope.validationViewModel.email.existErrorMessage;
}
else
$location.path(route);
});
};
test:
describe('forgotPasswordCtrl', function() {
beforeEach(module('forgotPasswordApp'));
var scope, controller, q, $location, route, deferred, mockSessionService, validationProviderMock, webServDalMock;
beforeEach(function(){
var config = {
urlPath : {
match : ""
}
};
validationProviderMock = {
};
var response = {
};
mockSessionService = {
account : {
email : ""
},
clear : function(){
return true;
}
};
webServDalMock = {
forgotPassword : function(){
deferred = q.defer();
deferred.resolve(response);
return deferred.promise;
},
doesWebLoginExist : function(){
deferred = q.defer();
deferred.resolve(response);
return deferred.promise;
}
};
spyOn(webServDalMock, 'forgotPassword').and.callThrough();
spyOn(webServDalMock, 'doesWebLoginExist').and.callThrough();
spyOn(mockSessionService, 'clear').and.callThrough();
});
beforeEach(inject(function($rootScope, $controller, _$location_, $q){
scope = $rootScope.$new();
$location = _$location_;
q = $q;
controller = $controller('forgotPasswordCtrl', { $scope: scope, webServiceDal : webServDalMock, session : mockSessionService, validationProvider : validationProviderMock });
scope.$apply();
}));
it('should call clear method of session', function(){
scope.cancel();
expect(mockSessionService.clear).toHaveBeenCalled();
});
it('should return the correct url', function(){
scope.cancel();
config.urlPath.match("tfgm_customer");
expect(window.location.assign).toEqual("/web/tfgm_customer");
});
it('asf', function(){
scope.cancel();
config.urlPath.match("tfgm_customerERROR");
expect(window.location.assign).toEqual("/web/tfgm_admin");
});
it('should call webServiceDal', function(input){
scope.finish();
scope.$apply();
expect(webServDalMock.forgotPassword).toHaveBeenCalled();
});
it('should call webServiceDal', function(){
scope.nextStep(route);
scope.$apply();
expect(webServDalMock.doesWebLoginExist).toHaveBeenCalled();
});
});
before each:
beforeEach(inject(function($rootScope, $controller, _$location_, $q){
scope = $rootScope.$new();
$location = _$location_;
q = $q;
controller = $controller('forgotPasswordCtrl', { $scope: scope, webServiceDal : webServDalMock, session : mockSessionService, validationProvider : validationProviderMock });
scope.$apply();
}));
cant work out for the life of me why this is not passing? i have called the correct function and the called the expect correctly. i have other files which i have run identical tests on, the only difference is the naming of variables etc. and they pass.
am i missing something simple?
You problem is that a deferred promise does not return a success function but rather (then, catch or finally), $q docs
You would have to modify your mock doesWebLoginExist to return a success function when called.
EDIT:
Something like
doesWebLoginExist : function(){
return {success: function(cb) {
cb(response);
}};
}

Angularjs: Promises

I'm doing some small exercises to learn AngularJS, trying to understand how to work with promises at the moment.
In the following exercise, I'm trying to get some data async. I can see the data in the console.log but the promise is returned NULL.
GET /entries 200 OK
Promise is resolved: null
Anyone experienced can give me some advice to understand what I'm doing wrong ? Thanks for looking!
angular.module('questions', [])
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainCtrl',
resolve: {
'MyServiceData': function(EntriesService) {
return EntriesService.promise;
}
}
})
})
.service('EntriesService', function($http) {
var entries = null;
var promise = $http.get('entries').success(function (data) {
entries = data;
});
return {
promise: promise,
all: function() {
return entries;
}
};
})
.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {
console.log('Promise is resolved: ' + EntriesService.all());
$scope.title = "Q&A Module";
$scope.entries = EntriesService.all() || [];
$scope.addMessage = function() {
$scope.entries.push({
author: "myAuthor",
message: $scope.message
});
};
}]);
/****** Thanks everyone for your help so far *****/
After taking the advice of #bibs I came up with the following solution, that's clear using ngResource:
angular.module('questions', ['ngResource'])
.factory('EntriesService', function($resource){
return $resource('/entries', {});
})
.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {
$scope.title = "Q&A Module";
$scope.entries = [];
EntriesService.query(function(response){
$scope.entries = response;
});
$scope.addMessage = function() {
$scope.entries.push({
author: "myAuthor",
message: $scope.message
});
};
}]);
You should access the data in the callback. Since entries maybe empty before the data arrives, the all() function is not quite useful in this case.
Try this, you should be able to chain then() method to synchronously get data.
.service('EntriesService', function ($http) {
var services = {
all: function () {
var promise = $http.get('entries').success(function (data) {
entries = data;
}).error(function (response, status, headers, config) {
//error
});
return promise;
},
someOtherServices: function(){
var promise = ....
return promise;
}
return services;
}
});
$scope.entries = [];
EntriesService.all().then(function(data){
$scope.entries = data;
});
If you want the data returned by the server to be immediately reflected in your view:
.service('EntriesService', function($http) {
var entries = [];
var promise = $http.get('entries').success(function (data) {
for (var i = 0; i < data.length; i++) {
entries[i] = data[i];
}
});
return {
promise: promise,
all: entries
};
})
.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {
$scope.title = "Q&A Module";
$scope.entries = EntriesService.all;
$scope.addMessage = function() {
$scope.entries.push({
author: "myAuthor",
message: $scope.message
});
};
You may want to check out $resource to do this for you: http://docs.angularjs.org/api/ngResource.$resource

Categories