Angularjs with Baasbox | YS Tech Share

Ionic framework for mobile app development use angularJs at its core while baasBox is an open source backend-as-a-services platform (pretty much like parse.com except it allow you to self hosted). I encounter problem when using both together. baasBox provide a javascript framework but it required jquery as dependency. Problem is… when I using baasbox ajax function, its callback fail to access angularJs $scope directly, hence i failed to assign variable to my html. for example, this would fail:

.controller('UserCtrl', function($scope, $rootScope, baasbox) {
	$scope.username = "unknown";
	$scope.login = function() 
	{
		BaasBox.login("test", "test")
		.done(function (user) {
			console.log("Logged in ", user.username);	
			$scope.username = user.username;
		})
		.fail(function (err) {
			console.log("error ", err);
		})
	};
})

.controller('UserCtrl', function($scope, $rootScope, baasbox) {

$scope.username = "unknown";

$scope.login = function()

{

BaasBox.login("test", "test")

.done(function (user) {

console.log("Logged in ", user.username);

$scope.username = user.username;

})

.fail(function (err) {

console.log("error ", err);

})

};

})

Then, I did a little experiment trying to grab baasBox API in raw and prove to be successful:

.controller('UserCtrl', function($scope, $rootScope, baasbox) {
	$scope.username = "unknown";
	$scope.login = function() 
	{
		console.log(baasbox);
		$http.post(baasbox.endPoint+'/login', 
			{
				username: 'test',
				password: 'test',
				appcode: baasbox.appCode
			},
			{
				'X-BAASBOX-APPCODE: ': 'Basic '+baasbox.appCode,
			}
		).success(function (json) {
			console.log(json.data.user);
			$scope.username=json.data.user.name;
		});
	};
}

.controller('UserCtrl', function($scope, $rootScope, baasbox) {

$scope.username = "unknown";

$scope.login = function()

{

console.log(baasbox);

$http.post(baasbox.endPoint+'/login',

{

username: 'test',

password: 'test',

appcode: baasbox.appCode

{

'X-BAASBOX-APPCODE: ': 'Basic '+baasbox.appCode,

}

).success(function (json) {

console.log(json.data.user);

$scope.username=json.data.user.name;

});

};

}

This means I can write an angular javascript sdk for baasBox. That would be a prefect solution but I am running out of time. Then, I think of the possibility to make use of $scope.$apply. This allow me to use back the baasBox jquery base js sdk with angularJs in a straight forward manner.

.controller('UserCtrl', function($scope, $rootScope, baasbox) {
	$scope.username = "unknown";
	$scope.login = function() 
	{
		BaasBox.login("test", "test")
		.done(function (user) {
			console.log("Logged in ", user.username);	
			$scope.$apply(function(){
				$scope.username = user.username;
			});
		})
		.fail(function (err) {
			console.log("error ", err);
		})
	};
})

.controller('UserCtrl', function($scope, $rootScope, baasbox) {

$scope.username = "unknown";

$scope.login = function()

{

BaasBox.login("test", "test")

.done(function (user) {

console.log("Logged in ", user.username);

$scope.$apply(function(){

$scope.username = user.username;

});

})

.fail(function (err) {

console.log("error ", err);

})

};

})

Bingo! It works like a charm now.