0

私が構築しようとしているアプリケーションには、固定のトップナビゲーション バー、左側のパネル、および右側のパネルがあります。右側のパネルには、各ユーザーに固有の推奨製品のリストが表示されます。左側のパネルには、追加された製品を示すカート リストとユーザーのタブの 2 つの部分があります。

私がやりたいことは、異なるユーザー間で状態を維持することです。つまり、ユーザー タブをクリックすると、そのユーザーに固有の製品のリストが右側に表示され、ユーザーはこれらをカート リストに追加できるはずです。左側に表示され、別のユーザーに切り替えると、新しい製品と対応するカートリストが表示される必要があります (彼がすでに追加しているか空を表示している場合)。

また、左右のパネル間で双方向の対話が必要です。つまり、カートに追加された製品をクリックすると、右側に推奨製品のリストが表示されるはずです。

デモのために、JSON を使用して製品を保存しているだけで、サーバーとのやり取りはありません。

2 つのコントローラーと 1 つのサービスを使用してこれを実装するのは、私にとって少し難しいことがわかりました。これを解決するにはどうすればよいですか？

4

1 に答える 1

0

これをより簡単に行うには、2 つのことを学ぶ必要があると思います。1 つは routeProviders、2 は ng-include です。

routeProvider を使用すると、さまざまな HTML の「パーシャル」への「トップ レベルのナビゲーション」が可能になり、基本的に URL をビューにマップできます。あまり複雑なことはまだ行っていませんが、別のレベルのナビゲーションまたはサブビューを処理する方法は、ng-include ディレクティブを使用することだと理解しています。

また、ページの読み込み時にモデルの値を復元するために、少しコードを使用しました ($location サービスを使用して、モデルのこのプロパティの URL に関する情報を取得し、ナビゲーション要素にいくつかのクラスを設定します)。現在のページを強調表示します)。

以下は、うまく機能するいくつかのプロジェクトで使用した完全な「シード」コードです。

var mainApp = angular.module("mainApp", []);

// mainApp.run(function($rootScope, $location, $anchorScroll, $routeParams) {
//   //when the route is changed scroll to the proper element.
//   $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
//      if(document.documentElement.clientWidth>=600)
//          return;
//     $location.hash("contentArea");
//     $anchorScroll();  
//   });
// });

mainApp.controller("NavigationCtrl", function ($scope, $location,$anchorScroll) {
    $scope.currentPage = "home";
    $scope.pages = [
                    {label:'Home', location:'home'},
                    {label:'Page2', location:'page2'}
                    ];
    $scope.gotoPage = function(item) {
        $scope.currentPage = item.location;
        $location.path("/"+item.location)
    };

    $scope.initialize = function() {
        $scope.currentPage = $location.path().substring(1);
    };


    $scope.goHome = function() {
        $scope.currentPage = "home";
        $location.path("/home")
    };

    $scope.itemClass = function(item) {
        return item.location === $scope.currentPage ? 'active' : undefined;
    };
});

mainApp.config(function($routeProvider){
    $routeProvider.
        when("/", {templateUrl:'partials/home.html'}).
        when("/home", {templateUrl:'partials/home.html'}).
        when("/page2", {templateUrl:'partials/secondPage.html'}).
        otherwise({redirectTo:"/"});
});

HTMLでは

<header>
<div id="headerRegion">
    <a ng-click="goHome()">
        <div id="logoWrapper">
            <img src="images/logoBig.png" id="headerLogo" alt="Intellect-Tech Logo">
        </div>
        <div id="companyName">
            Company name goes here
        </div>
        <div id="slogan">
            <i>Slogan goes here</i>
        </div>
    </a>
    <div class="clear"></div>
</div>
</header>
<nav ng-init="initialize()">
    <div id="pointerContainer">
        <img src="images/navPointer.png" id="navPointer" class="{{currentPage}}"/>
    </div>
    <div id="navText">
        <ol>
            <li ng-click="gotoPage(item)" ng-repeat="item in pages" ng-class="itemClass(item)">
                {{item.label}}
            </li>
        </ol>
    </div>
</nav>

これを github に投稿してリンクを取得したい場合は、とにかくそこに載せるつもりです。このコードは決して完璧ではありませんが、進行中の作業であり、頭を悩ませることなく一度にかなりの数のプロジェクトを開始するのに役立ちました.

于 2013-07-02T04:07:36.623 に答える