Question

我正在构建SPA应用程序，我希望获得有关最佳实践的建议（组织项目结构）以便跟踪问题：

我的主页有一些信息和地方用于身份验证或问候用户。在这个地方，我需要显示以下两种状态之一：第一 - 用户没有被授权，我向他显示登录表格，第二： - 用户被授权，我向他显示“你好，男人”。

我知道两个错误的决定。 1.我可以使用ng-switch（我认为这不好）。 2.我可以使用像ng-include这样的函数来调用函数来获取实际的html子视图。（我认为它比第一次更糟糕。）

我也听了“ui router”，但我不确定它是最好的方式。

如何更好地组织我的项目以及哪些更好用？

Answer 1

您可以使用变量isLogged控制的ng-switch或ng-if

我会制作一个模板login.html，里面我会使用ng-switch。

但更高级的选择是使用由以下事件控制的指令：

.directive('loginDialog', function (AUTH_EVENTS) {
  return {
    restrict: 'A',
    template: '<div ng-if="visible"
                    ng-include="\'login-form.html\'">',
    link: function (scope) {
      var showDialog = function () {
        scope.visible = true;
      };

      scope.visible = false;
      scope.$on(AUTH_EVENTS.notAuthenticated, showDialog);
      scope.$on(AUTH_EVENTS.sessionTimeout, showDialog)
    }
  };
})

我在这种情况下使用事件，因为这个功能扩展到整个应用程序，并且很容易控制组件从我需要的任何地方发送事件。

改变视图部分的机制（角度js）

1 个答案: