0

次の階層を作成する必要があります。アプリでいくつかのユーザー ロールを取得しました。私のアプリのインターフェイスは、役割ごとに異なるタブを持つトップ ナビゲーション バーで構成されています。通常、各タブにはマスター/詳細ビューがあり、いくつかのエンティティが表示され、最初のエンティティがデフォルトで読み込まれます。

認証に苦労する前に (http インターセプターなどに関するいくつかの記事を見つけました)、最も単純なことであるナビゲーション システムをどのように行うのか疑問に思いました。

たとえば、ユーザー ロールをハードコードし、管理者ロールがデフォルトで読み込まれているとします。上部のナビゲーションがある cp.html ファイルがあります。ユーザーがログインしている場合に「/」ルートに移動すると、管理タブを使用して cp.html にリダイレクトする必要があります。ユーザーがログインしていない場合は、「/login」ページにリダイレクトする必要があります。

これは cp.html の例です:

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#/desktop">Desktop</a></li>
            <li><a href="#/companies">Companies</a></li>
            <li><a href="#/users">Users</a></li>
        </ul>
    </div>
</div>
<div ng-include src="include">
</div>

これはホーム ('/') コントローラーです。

function homeController($scope, $routeParams, $location) {
    if ($routeParams.tab) {
        $scope.include = '/templates/' + $routeParams.tab + '.html';
    } else {
        $scope.include = '/templates/companies.html';
    }
}

そして、メインの app.js:

app.config(['$routeProvider', function($routeProvider) {

$routeProvider
    .when('/', {
        templateUrl: 'templates/cp.html',
        controller: homeController
    })

    .when('/:tab', {
        templateUrl: 'templates/cp.html',
        controller: homeController
    })

したがって、ここでは :tab パラメータに応じて、さまざまな .html テンプレートを含めることができます。しかし、コントローラーをどう扱うか？会社タブに行きたいとしましょう。ナビゲーションバーと会社のコンテンツを持ちたいです。会社のタブをクリックすると、ファイルが含まれますが、homeController にとどまります。ng-controller ディレクティブを使用する場合、会社の ID を取得するにはどうすればよいですか? 典型的な例では、 /companys/:companyId ルートがあります。しかし、このルートを routeProvider で使用する場合、templateUrl として何を入力すればよいでしょうか? さらに、会社のタブをクリックしても、URL は変更されず、companys.html のみが含まれます。

AngularJS のネストされたビューとルートに完全に混乱しています。ただし、サードパーティのライブラリを使用したくありません。これに対処する方法を自分で理解しようとしています...

前もって感謝します

4

1 に答える 1

0

angular ui-routerを見てください。まさにあなたが探しているものだと思います。サンプルアプリも試してみてください。

于 2013-05-03T08:13:39.890 に答える