Question

我在理解如何在AngularJS中应用我的场景时遇到了麻烦。我的应用程序有一些必须执行类似操作的页面（所有操作都是客户端）：

通过内部API调用（例如/user/auth）授权用户。如果用户之前已经通过Facebook授权，它还会给我FB access_token
通过Facebook Graph API获取用户管理的FB页面
使用这些页面填充表格

从某种意义上说，所有小页面的网页应用程序都具有相似的结构（获取用户身份验证然后从FB或内部API获取数据并在DOM中执行某些操作）。

假设我有一个控制器，如：

<ul ng-controller='PagesController'>
    <li ng-repeat='p in pages'> ... </li>
</ul>

我的临时解决方案将使用 jQuery的承诺，如下所示：

$(document).ready(function() {
    MyApp.FBInit(); // initialize with FB.init
    MyApp.authUser().then(getThePages).then(populateTable);
});

这不是优雅的，不是模块化的，我必须使用一些Javascript魔法访问PagesController的范围：

function getThePages() { 
    var d = $.Deferred();
    // etc etc, make call to graph and resolve the deferred if ok and put
    // the result in MyApp.pages
    return d.promise();
}

function populateTable() {
    MyApp.applyToScope("#pages","pages",MyApp.pages.data);
);

// definition of MyApp.applytoScope()....
function(controllerElement, model, value) {
    var scope = Splashmood.angular.getScope(controllerElement);
    scope.$apply(function ($scope) {$scope[model] = value;});
}

我无法弄清楚如何使用服务（工厂）在AngularJS中移植此功能。

我的想法是创造类似的东西：

app.factory("UserAuthFactory", function ($http, $q) {
    // do something
});

app.controller("MainController", function ($scope, $http, UserAuthFactory) {
    // do something
});

app.factory("FbUserPages", function ($http, $q) {
    var endpoint = "me/accounts";
    var dataFactory = {};

    dataFactory.getPages = function() {
        return ....; // $http calling Facebook Graph API
    }
    return dataFactory;
});

app.controller('MyFbPagesController', function ($scope, $http, FbUserPages) {

    var handleSuccess = function (data, status) {
        $scope.pages = data;
    }

    $scope.pages = [];
    FbUserPages.getPages().success(handleSuccess);
});

但我无法弄清楚如何使流程同步（如果用户已获得授权，请运行此控制器和其他控制器。）。

在单页面应用中管理用户身份验证

0 个答案: