1

AngularJS と Bootstrap を使用して SPA を作成しています。私の Web アプリケーションが、認証済みユーザーと認証されていないユーザーにサービスを提供しているとします。認証されていないユーザーには、トップ メニュー ナビゲーションのあるパンフレット サイトが表示されます。私たちについて、連絡先などのリンク。ルートとコンテンツを定義します。つまり、パーシャルが本体の内外でスワップされ、すべてが正常に機能します。

その後、ログインして認証されます。今、私は彼に左ハンドルのナビを見てもらいたいと思っています。右がメニューと内容。右側のコンテンツのみがスワップ インおよびスワップ アウトされます。したがって、2 つのページ テンプレート (1) パンフレット サイト テンプレート - 上部のメニューと (2) セキュリティで保護されたサイト テンプレート - サイド + 上部のメニューがあります。

Angular でこれを行う最も効率的な方法は何ですか? ng-include ディレクティブを使用して、すべてのパーシャルで同じサイド メニューをロードしますか? 例 ng-include src='menu.html'?

2 つの「マスター」ページ テンプレートを指定する方法があればいいのに!

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>

これで、値を変更して 2 つのレイアウトを切り替えることができcurrentUser.loggedInます (これは whatlogin()とlogout()do です)。この概念に基づく例を次に示します: http://plnkr.co/edit/Ng1KGe0Qt9Lpdl2jfhNX?p=preview (リンクをクリックして効果を確認してください)。

サーバー側のテクノロジーとスタック (テンプレートと CSS を含む) によっては、ユーザーがログインしているかどうかに基づいて、2 つの異なる Angular HTML ページのいずれかを簡単に提供できる可能性もあります。

于 2013-02-04T03:03:29.157 に答える