MobileServiceClient Integration with AngularJS Function

Question

I am trying to use WindowsAzure.MobileServiceClient in Angular to perform single sign operations and CRUD. Being an Angular noob, I am trying to find a better way to do this:

• Create it in $ rootScope in .run and call functions from there?
• Create a service or factory and instantiate MobileServiceClient and all the function calls in this? Will the current User and other information be lost if the / factory service is not used?
• Just run MobileServiceClient in the controllers that need it? It seems to me that if I do it this way, the currentUser information will be lost?

I tried using some of the above methods, but I am having some problems:

• Calling the login method, as shown in Azure docs , sometimes works, in other cases it does not show a popup for the authentication provider, for example it should. I exit the authentication provider, so a popup should appear, but not specified,
• No matter what I try to do, currentUser MobileServiceClient returns as null even when the popup was shown and I entered my credentials correctly.

Any ideas on what I can do to make this work smoothly? Any examples I can follow? The documentation seems sketchy.

I use Yeoman and the Angular generator along with Grunt to do my work, if that matters.

Answer 1

I was able to figure it out. I created a new service to handle all the code for mobile services. Since the methods from the client are asynchronous, I use callbacks in the methods. I also use cookie storage to save the user credential object (currentUser) and pull it out again when necessary. currentUser seems to lose the user credential object between calls, so I save it in a cookie and click on it when it lost it.

'use strict'; angular.module('{appName}') .factory('AzureMobileClient', ['$cookieStore', function ($cookieStore) { var azureMobileClient = {}; azureMobileClient.isLoggedIn = false; azureMobileClient.azureError = ""; azureMobileClient.azureMSC = new WindowsAzure.MobileServiceClient('{app URL from Azure}', '{app key from Azure}'); azureMobileClient.login = function(callback, socialMediaService) { azureMobileClient.azureMSC.login(socialMediaService).then(function(user) { azureMobileClient.isLoggedIn = user != null; $cookieStore.put("azureUser", user); callback(azureMobileClient.isLoggedIn); } , function(error){ alert(error); azureMobileClient.azureError = error; }); }; azureMobileClient.logout = function() { azureMobileClient.getUser(); azureMobileClient.azureMSC.logout(); $cookieStore.remove("azureUser"); }; azureMobileClient.getStuff = function(callback) { azureMobileClient.getUser(); var stuffTable = azureMobileClient.azureMSC.getTable("stuff"); stuffTable.read().then(function(items) { callback(items); }); }; azureMobileClient.addStuff = function(scope) { azureMobileClient.getUser(); var stuffTable = azureMobileClient.azureMSC.getTable("stuff"); stuffTable.insert({ stuffname: scope.stuffname }); }; azureMobileClient.getUser = function() { if (azureMobileClient.azureMSC.currentUser === null) { azureMobileClient.azureMSC.currentUser = $cookieStore.get("azureUser"); } }; return azureMobileClient; }]); 

In the controller that does the login and logout, I do this:

 'use strict'; angular.module('{appName}') .controller('MainCtrl', function ($scope, $window, AzureMobileClient) { $scope.authenticate = function (socialService) { AzureMobileClient.login(function(isLoggedIn) { if (isLoggedIn) { $window.location.href = "/#/play"; } }, socialService); }; $scope.signOut = function() { AzureMobileClient.logout(); } }); 

The view of the I / O controller is as follows:

 <button ng-click="signOut()">Sign Out</button> <div class="span4"> <img src="images/facebooklogin.png" ng-click="authenticate('Facebook')" /> <img src="images/twitterlogin.png" ng-click="authenticate('Twitter')" /> <img src="images/googlelogin.png" ng-click="authenticate('Google')" /> </div> 

And finally, in the controller that receives the data, I do this:

 'use strict'; angular.module('{appName}') .controller('StuffCtrl', ['$scope', '$window', 'AzureMobileClient', function ($scope, $window, AzureMobileClient) { AzureMobileClient.getStuff(function(items) { if (items.length == 0) { $window.location.href = "/#/stuff/new"; } else { $scope.$apply($scope.items = items); } }); }]); 

Answer 2

Just for those looking for a ready-to-use solution https://github.com/TerryMooreII/angular-azure-mobile-service

This is an angularjs service that implements the following methods:

• Azureservice.query (table_name, parameters, withFilterFn)
• Azureservice.insert (tableName, obj, withFilterFn)
• Azureservice.update (tableName, obj, withFilterFn)
• Azureservice.del (tableName, obj, withFilterFn)
• Azureservice.getAll (tableName, withFilterFn)
• Azureservice.getById (table_name, id, withFilterFn)
• Azureservice.read (tableName, parameters, withFilterFn)
• Azureservice.login (oauthProvider, token)
• Azureservice.logout ()
• Azureservice.setCurrentUser (userObj)
• Azureservice.getCurrentUser ()
• Azureservice.isLoggedIn ()
• Azureservice.invokeApi ()

Just add 'azure-mobile-service.module' to the list of dependencies and configure the api keys:

  angular.module('your-module-name').constant('AzureMobileServiceClient', { API_URL : 'https://<your-api-url>.azure-mobile.net/', API_KEY : '<your-api-key>', }); 

and then:

 angular.module.('your-module-name').controller('MainController', function ($scope, Azureservice) { $scope.loginAction = function () { Azureservice.login('facebook').then(function () { console.log('login successful'); }).catch(function () { console.log('login error'); } } }