将 MobileServiceClient 与 AngularJS 集成

Question

我正在尝试使用 Angular 中的 WindowsAzure.MobileServiceClient 来执行单点登录和 CRUD 操作。作为一个 Angular 菜鸟，我正在尝试找出最好的方法：

• 在 .run 的 $rootScope 中实例化它并从那里调用函数？
• 创建一个服务或工厂并实例化 MobileServiceClient 和其中的所有函数调用？不使用服务/工厂时，currentUser 和其他信息是否会丢失？
• 只是在需要它的控制器中设置 MobileServiceClient？在我看来，如果我这样做，currentUser 信息会丢失吗？

我已尝试使用上述一些方法，但遇到了一些问题：

• 调用Azure docs 中所示的登录方法有时会起作用，但有时它不会像应有的那样向身份验证提供程序显示弹出窗口。我已从身份验证提供程序中注销，因此应该显示一个弹出窗口，但不是，
• 无论我尝试做什么，MobileServiceClient currentUser 都会返回为 null，即使显示了弹出窗口并且我正确输入了我的凭据。

有什么想法可以让这项工作顺利进行吗？我可以在某处遵循的任何例子吗？文档看起来很粗略。

如果有什么不同的话，我正在使用 Yeoman 和角度生成器以及 Grunt 来完成我的工作。

Answer 1

我能够弄清楚。我创建了一个新服务来处理所有的移动服务代码。由于来自客户端的方法是异步的，因此我在方法中使用了回调。我还使用 cookie 存储来保存用户的凭据对象 (currentUser)，并在需要时再次将其拉出。 currentUser 似乎在调用之间丢失了用户凭证对象，所以我将它存储在一个 cookie 中，并在它丢失时将其推送到客户端。

'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;
}]);

在执行登录和注销的控制器中，我这样做：

'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();
    }
});

登录/注销控制器的视图如下所示：

<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>

最后在获取数据的控制器中，我这样做：

'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

只为搜索即用型解决方案的人https://github.com/TerryMooreII/angular-azure-mobile-service

这是实现以下方法的 angularjs 服务：

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

只需在依赖列表中添加“azure-mobile-service.module”并配置 api 键：

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

然后：

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');   
        }
    }
}