1

Angular の初心者です。基本的なテンプレートの問題を達成するための正しい方法に頭を悩ませようとしています。

ユーザーがログインしていない場合は「ここをクリックしてログインしてください」というヘッダーがあり、ユーザーがログインしている場合は「Welcome, Dudefellah」(および関連する設定リンクなど) と表示されます。

ログイン状態とユーザー名を含む JSON バンドルを返すことができるサービスを作成しましたが、「Angular Way」で何を表現すればよいかわかりません:「if(auth.loggedin), output partials/header.html」 ; それ以外の場合は、partials/header_login.html を出力します。

このロジックがコントローラに属するのか、ある種の「認証」モデルに属するのか、ビューに属するのかはわかりません (正しくありませんよね?)。どんな援助でも大歓迎です。

4

3 に答える 3

14

ログイン状態がフェッチされたら、コントローラー内でスコープ変数を作成headerTemplateし、ログイン状態に応じてテンプレートの名前を割り当てます

function MyCtrl($scope, loginService) {
    $scope.auth = loginService.getLoginState();
    $scope.headerTemplate = $scope.auth ? 'partials/header.html' : 'partials/header_login.html';
}

マークアップに

<div ng-include src="headerTemplate"></div>
于 2013-03-28T15:52:11.063 に答える
8

これを非常にうまく行うangular-appと呼ばれるサンプルのAngularアプリケーションがあります。それらにはセキュリティ サービスがあり、次に状態に応じて物事を示すツールバーのパーシャルとディレクティブがあります。

https://github.com/angular-app/angular-app/tree/master/client/src/common/security

angular-app から:

src/common/security/login/toolbar.tpl.html:

<ul class="nav pull-right">
  <li class="divider-vertical"></li>
  <li ng-show="isAuthenticated()">
      <a href="#">{{currentUser.firstName}} {{currentUser.lastName}}</a>
  </li>
  <li ng-show="isAuthenticated()" class="logout">
      <form class="navbar-form">
          <button class="btn logout" ng-click="logout()">Log out</button>
      </form>
  </li>
  <li ng-hide="isAuthenticated()" class="login">
      <form class="navbar-form">
          <button class="btn login" ng-click="login()">Log in</button>
      </form>
  </li>
</ul>

src/common/security/login/toolbar.js:

angular.module('security.login.toolbar', [])

// The loginToolbar directive is a reusable widget that can show login or logout buttons
// and information the current authenticated user
.directive('loginToolbar', ['security', function(security) {
  var directive = {
    templateUrl: 'security/login/toolbar.tpl.html',
    restrict: 'E',
    replace: true,
    scope: true,
    link: function($scope, $element, $attrs, $controller) {
      $scope.isAuthenticated = security.isAuthenticated;
      $scope.login = security.showLogin;
      $scope.logout = security.logout;
      $scope.$watch(function() {
        return security.currentUser;
      }, function(currentUser) {
        $scope.currentUser = currentUser;
      });
    }
  };
  return directive;
}]);
于 2013-03-28T16:02:12.337 に答える
3

条件付きルーティングと一般的な優れたインフラストラクチャに驚異的なui-routerを使用することもできます。次の 2 つの状態を定義する必要があります。

myapp.config(function($stateProvider, $urlRouterProvider){
  ...
  // Now set up the states
  $stateProvider
    .state('login', {
        parent: account,
        url: "/login",
        templateUrl: "partials/header_login.html"
    })

    .state('auth', {
        parent: account,
        url: "/authorized",
        templateUrl: "partials/header.html"
    })

})

クエリから戻ったら、 $state.transitionTo('login') または ('auth') で状態を変更すると、ルーターが適切なテンプレート (および URL) をロードします。一般に、アプリのベースとして優れたルーターを使用し、ケースごとにアドホックなソリューションを提供しない方がはるかに優れています。ここでそれについてのページ（私が書いた）を読むこともできます

于 2013-07-19T15:17:14.170 に答える