AngularJS 中元素的子视图

Question

我想要一个具有以下视图的单页应用程序 (AngularJS)：

• 登录
• 主视图

现在主视图应该有不同的“元素”： - 工具栏 - 主要内容区 - 2 个侧边栏

我可以将所有这些元素作为子视图处理吗？我想为每个“元素”创建一个 .html 模板。

非常感谢！

Answer 1

不要拆分成两个基本的 html。这对于 Angularjs 应用程序来说不是一个好的设计，它会在运行测试用例（单元或端到端测试用例）时产生问题。

请看下面的代码。这里的“userLoggedIn”是一个 $rootscope 变量，用于根据身份验证加载必要的块。

<div ng-include="'views/common/loginHeader.html'" ng-show="!userLoggedIn"></div> <!-- loginHeader -->
<div ng-include="'views/common/userHeader.html'" ng-show="userLoggedIn"></div> <!-- userHeader -->  

<div class="container" ng-view></div> <!-- body -->>

<div ng-include="'views/common/footer.html'"></div> <!-- footer -->

身份验证后，您可以为该变量设置布尔标志或对象。

$rootScope.userLoggedIn= true

（或）

$rootScope.userLoggedIn= {"name":"john smith", "settings":[{}]}

在注销控制器中，您可以设置 false 以隐藏身份验证容器并重定向到登录页面。

$rootScope.userLoggedIn= false;