2

過去数日間、RESTサービス用の新しいangular.jsベースのフロントエンドを作成してきました。これまでのところ、物事は順調に進んでおり、小さなページやコンポーネントをたくさん作成してきました。

現在、これらを完全なアプリケーションに統合し始めており、2つの異なるメニューに基づいてメインビューを処理する方法を考えています。

グローバルな状態に基づいて、これら3つのコンポーネントすべてを変更してもらいたいと思います。理想的$routeProviderには、URLに基​​づいて制御されます。

これを行うにはいくつかの方法が考えられます。しかし、それらのどれも正しくないようであり、angularの開発者がこれが行われることをどのように想定したかについての明確なドキュメントは見つかりませんでした。

いくつかの縮小スニペット：

index.html

<!DOCTYPE html>
<html data-ng-app="myapp">
<head>
    ....snip...
</head>
<body>
    <div id="system-menu" data-ng-controller="MenuCtrl" data-ng-include="'partials/menu/system.html'"></div>
    <div id="main">
        <div id="main-menu" data-ng-controller="MenuCtrl" data-ng-include="'partials/menu/main.html'"></div>
        <div id="content" data-ng-view></div>
    </div>
</body>

app.js

var myapp = angular.module('myapp', ['ngResource', 'ui']).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/messages', {
                templateUrl: 'partials/messages.html',
                controller: MessagesCtrl
            }).
            when('/messages/:messageId', {
                templateUrl: 'partials/messages.html',
                controller: MessagesCtrl
            }).
            ...snip...
            otherwise({
                redirectTo: '/messages'
        });
    }]);

ユーザーが/messages/ 1へのリンクをクリックすると、コントローラーmessagesCtrlがビューに使用されるようにします。これは簡単で、上記のように機能します。ただし、私のMenuCtrlはこれが発生していることに「気づき」ません。手動でメッセージをブロードキャストしてページの変更を通知し、サブメニューを表示できるようにします。このメッセージの唯一の理由は、メニューを更新して、他のコントローラーの不要な知識を引き起こすことであるためです。

これまでのところ、angular.jsのドキュメントは気に入っていますが、全体像の部門では不足しているようです。

誰かがこれを行うための慣用的な方法に関するリンクまたはいくつかのポインタを私たちに提供できますか？

4

3 に答える 3

4

メニューの強調表示を機能させるには、 $locationプロバイダーから現在のルートを読み取る簡単なメソッドをメニュー コントローラー内にセットアップすることができます。

// Within your controller.
$scope.isActiveUrl = function (route) {
    return route === $location.path()
}
// 
Within the view
ng-class="{ 'active' : isActiveUrl('your/path') }"

参照: 現在のメニュー項目を強調表示するには?

于 2013-08-19T19:23:30.710 に答える
3

これら 3 つのコンポーネントはすべて、何らかのグローバルな状態に基づいて変化するようにしたいと考えています。URL に基づいて routeprovider によって制御されるのが理想的です。

コントローラー間で通信するために、すべてのサブスクライバーに変更をブロードキャストできるサービスを作成できます。

次の YouTube ビデオと、ビデオ内の jsfiddles リンクをチェックしてください。

http://www.youtube.com/watch?v=1OALSkJGsRw

于 2012-11-16T15:28:00.373 に答える