1

我正在使用 AngularJS 和 Bootstrap 创建一个 SPA。假设我的 Web 应用程序为经过身份验证和未经身份验证的用户提供服务。未经身份验证的用户看到一个带有顶部菜单导航的小册子站点。带有关于我们、联系方式等的链接。我定义了我的路线和内容，即部分交换进出主体，一切正常。

然后他登录并通过身份验证。现在我想让他看到左手导航。菜单和内容在右边。只有右边的内容被换入和换出。所以有两个页面模板 (1) 小册子网站模板 - 顶部菜单和 (2) 安全网站模板 - 侧面 + 顶部菜单。

使用 Angular 最有效的方法是什么？我是否使用 ng-include 指令为每个部分加载相同的侧边菜单？例如 ng-include src='menu.html'？

如果有某种方法可以指定两个“主”页面模板，那就太好了！

4

1 回答 1

4

ngSwitch根据您的需要，您可以使用 CSS 和 的组合来做一些漂亮的事情。这是一个简单的例子：

<body ng-controller="LoginController">
  <div ng-switch="currentUser.loggedIn">
    <div ng-switch-when="false">
      <div class='top'>
        <h1>Welcome</h1>
        <a href='about'>About</a>
        <a href='contact'>Contact</a>
        <a ng-click='login()'>Login</a>
      </div>
      <div ng-view>
    </div>

    <div ng-switch-when="true">
      <div class='side'>
        <h2>Authenticated</h2>
        <a href='about'>About</a>
        <a href='contact'>Contact</a>
        <a ng-click='logout()'>Logout</a>
      </div>
      <div ng-view>
    </div>
  </div>
</body>

currentUser.loggedIn现在您可以通过更改值（即做什么login()和做什么）在两种布局之间切换logout()。这是一个基于此概念的示例：http ://plnkr.co/edit/Ng1KGe0Qt9Lpdl2jfhNX?p=preview （单击链接查看效果）。

也有可能，根据您的服务器端技术和堆栈（包括模板和 CSS），根据用户是否登录，提供两个不同的 Angular HTML 页面之一可能同样容易。

于 2013-02-04T03:03:29.157 回答