i'm trying to call a soap webservice using this method : http://mcgivery.com/soap-web-services-angular-ionic/ however my screen only shows a blank page instead of the login screen. what could be the probleim?
here's my services.js code:
.factory('loginService', ['$soap', function($soap){
var base_url = 'http://localhost/UserService3/WebService1.asmx';
return {
GetUser: function(uname){
return $soap.post(base_url,"getUserbyUsername", {Username: uname});
}
};
}])
and here's my controller.js code:
.controller('loginCtrl', ['$scope', '$stateParams', '$location', '$state', 'sharedProperties2','ConnectivityMonitor', '$ionicLoading', 'loginService',
function ($scope, $stateParams, $location, $state, sharedProperties2,
ConnectivityMonitor, $ionicLoading, loginService) {
$scope.show = function() {
$ionicLoading.show({
template: '<ion-spinner icon="android"></ion-spinner>',
showBackdrop: false
});
};
$scope.hide = function(){
$ionicLoading.hide();
};
$scope.userdata = {}
$scope.enterlogin = function(usern,pass)
{
userFactory.GetUser(usern).then(function(response) {
alert('get = ' + JSON.stringify(response.data));
})
}
}])
apparently it could not see the previous location of the added scripts angular.soap.js and soapclient.js, so i put the 2 files inside a folder named angular-soap inside the lib folder.
Related
angular.module('app').controller('ConvertController', ['$rootScope', '$scope', '$http', '$state', 'toaster', 'StorageManager', function($rootScope, $scope, $http, $state, toaster, StorageManager) {
$scope.authError = null;
$scope.init = function() {
var _authManager = window.client.getAuthManager();
};
$scope.init();
$scope.refreshDataForList = function() {
$scope.list = userlist.get();
};
$scope.searchConversation = function() {
var data = {
searchText: $scope.searchText
};
};
$scope.onchange = function(presence) {
console.log("IN CONTROLLER");
};
}])
I am using karma-jasmine to test my angular app. But while doing testing I am facing problem to access getAuthManager(). It gives error "cannot read getAuthManager() of undefined". However I have included all the files in proper order.
Issue: On Firebase login, I would like to redirect the user to a new page.I am trying to use $location.path() in my controller even I tried using $state.go(). But it seems to be no use. Also I am not getting any error in console.
Using Firebase signInWithEmailAndPassword method, Angularjs 1.5, ui-router and AngularFire.
login.service.js
var firebaseAuthObject = fbDbConn.auth();
function login(emailid, passwd) {
return firebaseAuthObject.signInWithEmailAndPassword(emailid, passwd);
}
login.controller.js
(function() {
'use strict';
angular
.controller('AuthController', AuthController);
AuthController.$inject = ['$scope', '$location', 'authService'];
function AuthController($scope, $location, authService) {
$scope.message = null;
$scope.error = null;
$scope.register = function() {
return authService.register($scope.email, $scope.password)
.then(function(userData) {
$scope.message = "User created with uid: " + userData.uid;
}).catch(function(error) {
$scope.error = error;console.log(error);
});
};
$scope.login = function() {
$scope.auth_error ="";
return authService.login($scope.email, $scope.password)
.then(function(authData) {
$location.path('/app/overview'); //$state.go('/app/overview');
}).catch(function(error) {console.log(error);
$scope.error = error;
$scope.auth_error = "Username or Password is wrong.";
});
};
$scope.logout = function() {console.clear();
authService.logout();
$location.path('/login');
};
}
})();
config.route.js
(function() {
'use strict';
angular
.module('singApp.login', ['ui.router','firebase'])
.config(configFunction)
.run(runFunction);
configFunction.$inject = ['$stateProvider'];
function configFunction($stateProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'app/modules/login/login.html'
})
}
runFunction.$inject = ['$location', 'authService', 'firebaseDataService', 'PROTECTED_PATHS'];
function runFunction($location, authService, firebaseDataService, PROTECTED_PATHS) {
authService.firebaseAuthObject.onAuthStateChanged(function(authData) {
if (!authData && pathIsProtected($location.path())) {
authService.logout();
$location.path('/login');
};
});
function pathIsProtected(path) {
return PROTECTED_PATHS.indexOf(path) !== -1;
}
}
})();
Thanks for help !!
first you should inject $state to your controller and use $state.go('stateName')
$state.go('/app/overview') will not work
you should use $state.go('stateName')
angular
.controller('AuthController', AuthController);
AuthController.$inject = ['$scope', '$location','$state', 'authService'];
function AuthController($scope, $location, $state,authService) {
$scope.message = null;
$scope.error = null;
$scope.register = function() {
return authService.register($scope.email, $scope.password)
.then(function(userData) {
$scope.message = "User created with uid: " + userData.uid;
}).catch(function(error) {
$scope.error = error;console.log(error);
});
};
$scope.login = function() {
$scope.auth_error ="";
return authService.login($scope.email, $scope.password)
.then(function(authData) {
$state.go('stateName');
}).catch(function(error) {console.log(error);
$scope.error = error;
$scope.auth_error = "Username or Password is wrong.";
});
};
$scope.logout = function() {console.clear();
authService.logout();
$location.path('/login');
};
}
})();
Just check the $state.go() method instead of $location
First inject the dependency '$state'
AuthController.$inject = ['$scope', '$state', 'authService'];
Check your routes.js file.
The below is a sample code.
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/profile");
$stateProvider
.state('login', {
url: '/',
templateUrl: 'login.html'
})
.state('app.overview', {
url: '/overview',
templateUrl: 'views/overview.html'
})
});
If everything correct then then you can use the below code for redirection.
$state.go('login');
I'm using the '$stateChangeSuccess' event to find out the route changes.
app.run(['$rootScope', '$state', '$stateParams', '$cookies', '$timeout',
function($rootScope, $state, $stateParams, $cookies, $timeout) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function(event, nextRoute, toState) {
console.log(nextRoute.name);
// $state.go('login');
});
}
])
I tried to put the below code into a service but I seem to be missing something! I have to click the button twice to update the list shown in the table:
$scope.todoList = [];
$scope.showTodoList = function(){
var url = '/api/v1/todo/list/'+$scope.report.from+'/'+$scope.report.to;
$http({
method: 'GET',
url: url
}).then(function successCallback(response) {
$scope.todoList = response.data;
}, function errorCallback(response) {
console.log(response);
});
}
So I tried to do this:
angular.module('ReportController', []).controller('ReportController', ['$scope', '$http', '$rootScope', '$location', '$localStorage', '$routeParams', 'Report', 'Todo',
function ($scope, $http, $location, $localStorage, $routeParams, Report, Todo) {
$scope.todoList = [];
$scope.showTodoList = function(){
$scope.todoList = Report.getList($scope.report.from, $scope.report.to);
}
}]);
then i created a module and added the factory there and loaded this module with all others
angular.module('ReportService', []).factory('Report', ['$q', '$filter', '$http', '$timeout', function ($q, $filter, $http, $timeout) {
var list;
function getList(date_from, date_to){
var url = '/api/v1/todo/list/'+date_from+'/'+date_to;
$http({
method: 'GET',
url: url
}).then(function successCallback(response) {
list = response.data;
}, function errorCallback(response) {
console.log(response);
});
return list;
}
return {
getList: getList
};
}]);
Your problem seems to be that you are not waiting for the callback of $http call when returning the list.
You should make the ReportService's getList function to return a callback or a Promise. It will also change a bit how you need to handle the function call in your ReportController.
Example how to do this with callbacks:
ReportService:
angular.module('ReportService', []).factory('Report', ['$q', '$filter', '$http', '$timeout', function ($q, $filter, $http, $timeout) {
var list;
function getList(date_from, date_to, callback){
var url = '/api/v1/todo/list/'+date_from+'/'+date_to;
$http({
method: 'GET',
url: url
}).then(function successCallback(response) {
list = response.data;
return callback(list);
}, function errorCallback(response) {
console.log(response);
return callback(null);
});
}
return {
getList: getList
};
}]);
ReportController:
angular.module('ReportController', []).controller('ReportController', ['$scope', '$http', '$rootScope', '$location', '$localStorage', '$routeParams', 'Report', 'Todo',
function ($scope, $http, $location, $localStorage, $routeParams, Report, Todo) {
$scope.todoList = [];
$scope.showTodoList = function(){
Report.getList($scope.report.from, $scope.report.to, function(res){
if(res) {
$scope.todoList = res;
}
});
}
}]);
The issue is that I can't seem to send information from Controller 1 to Controller 2... I have my service that sets/gets data but it isn't working. The actual error that I'm getting is that Controller 1's dataService.getData is not a function... when it works elsewhere.
Service 1 (in its own file)
app.service('dataService', function() {
var data, queried;
return {
setData: function(queryData) {
this.data = queryData;
this.queried = false;
},
getData: function() {
this.queried = true;
return this.data;
}
};
});
Controller 1 (sending information)
app.controller('MyCtrl', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller 2 (getting information)
app.controller('MyCtrl2', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
You didn't injected service dataService inside your MyCtrl & MyCtrl2, ensure dependency should be injected before using it.
Controller
app.controller('MyCtrl', ['$scope', '$location', '$state','dataService', //<-added dependency here
function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller2
app.controller('MyCtrl2', ['$scope', '$location', '$state','dataService',//<-added dependency here
function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
I have a Service and a Controller. The controller calls a function, getItems() on the Service. The Service returns an array of data.
However, the controller appears to not be receiving this, oddly enough.
Controller:
ItemModule.controller('ItemController', ['$scope', 'ItemService',
function ($scope, ItemService) {
$scope.items = [];
$scope.getItems = function() {
$scope.items = ItemService.getItems();
}
$scope.getItems();
}
]);
Service:
ItemModule.service('ItemService', ['$rootScope', '$http',
function($rootScope, $http) {
this.getItems = function() {
$http.get($rootScope.root + '/products').success(function(data) {
// This prints it out fine to the console
console.log(data);
return data;
});
}
}
]);
What am I doing wrong?
A quick and dirty fix would be like that:
ItemModule.service('ItemService', ['$rootScope', '$http',
function($rootScope, $http) {
return {
getItems : function(scope) {
$http.get($rootScope.root + '/products').success(function(data) {
scope.items = data;
});
}
}
}
]);
and then in your controller just call:
ItemService.getItems($scope);
But if your controller is a part of route (and probably is) it would be much nicer to use resolve (look here).