Question

我计划使用AngularJS开发单页应用。我不确定如何最好地构建它。

我想让一个控制器包装内容。该控制器将保留用户的详细信息，例如如果用户已登录，用户名等。它将动态加载ng-view并在其中加载指令。

我不确定如何处理异步调用。例如，如果我加载其中一个视图并且其中将有3个指令，结构可能与此类似：

- wrapping controller
-- ng-view (here views are loaded dynamically). When view loaded it will contains e.g.:
--- some directive that needs information about user
--- another directive that needs information about user
--- yet another directive that needs information about user

如果用户是否登录，这些指令中的每一个都需要信息，因此每个指令都必须对后端进行$http调用，以确定用户是否已登录。这意味着将有3个后端调用，但只有一个是有意义的。

但是，如果我将此功能移至包装控制器，它将从后端请求登录信息并按原样存储。但是，由于此对服务器的$ http请求是异步的，因此如果用户已登录，则最初在页面内加载的指令将无法识别，并且无法正确显示。我最终会得到这样的结论：

页面加载
包装控制器执行并对后端进行异步调用，以确定用户是否已登录
加载了特定视图。它从包装控制器获取信息并看到用户此时未登录（包装控制器尚未从后端接收信息）。指令重定向到主页。
包装控制器最终从服务器接收信息说用户已登录但指令已将用户重定向到主页。

我希望我的解释有意义。我确信在这种情况下可以使用通用模式。任何建议都将不胜感激。

Answer 1

我强烈建议您查看经过验证的完整解决方案，例如meanjs。他们的open-source code可以在github上找到。

当应用程序标头加载在meanjs中时，它是这样的：

angular.module('core').controller('HeaderController', ['$scope', 'Authentication', 
    function($scope, Authentication) {
        $scope.authentication = Authentication;
    }
]);

导航菜单中的控制器调用身份验证服务，并将其添加到范围。

将有3次调用后端，但只有一个
是有意义的

实际上，您可以通过页面控制器对服务进行一次调用。然后，任何需要身份验证信息的指令都可以从页面控制器继承。

任何指令都可以这样做，包括验证服务以获取验证信息。

某些指令将显示/隐藏，具体取决于用户是否经过身份验证，如下所示：

<ul data-ng-hide="authentication.user">

如果您使用ui-router，则可以在路由中使用resolve来在显示视图之前捕获身份验证信息。

加载特定视图。它从包装控制器获取信息并看到用户此时未登录（包装控制器尚未从后端接收信息）。指令重定向到主页。

或者您可以等到您的承诺结算，然后返回有关用户是否经过身份验证的信息。在此期间，您可以显示徽标，微调器，空白页......

如何构建AngularJS应用程序？

1 个答案: