AngularJS：範囲を失うことなくルーティングする複数のビュー

Question

私は古典的なリスト/詳細のUIを実装しようとしています。リスト内のアイテムをクリックすると、のリストが表示されたまま、そのアイテムの編集フォームが表示されます。私はAngularの1ページあたりの表示数の制限を回避しようとしており、すべてのURLを同じコントローラ/ビューにルーティングすることでこれを行うことにしました。 （おそらくこれは私の問題の根本であり、私は選択肢に開いている。）

ルーティング：

$routeProvider 
    .when('/list', { templateUrl: '/Partials/Users.html', controller: UserController }) 
    .when('/edit/:UserId', { templateUrl: '/Partials/Users.html', controller: UserController }) 
    .otherwise({ redirectTo: '/list' }); 

ビュー（/Partials/Users.html）：

<!-- List of users --> 
<div ng-repeat="user in Users"> 
    <a href="*/edit/{{ user.Id }}">Edit {{ user.Name }}</a> 
</div> 

<!-- Edit form --> 
<div> 
    {{ SelectedUser.Name }} 
</div> 

コントローラ：

function UserController($scope, $routeParams) { 
    // the model for the list 
    $scope.Users = GetUserListFromService(); 

    // the model for the edit form 
    if ($routeParams.UserId != null) 
     $scope.SelectedUser = GetUserFromService($routeParams.UserId); 
} 

問題：

1. 編集リンクをクリックすると、コントローラーは新しいスコープで再インスタンス化されるので、ユーザーリストを再初期化する必要があります。 （より複雑な例では、モデルにバインドされたユーザーからの入力を受け取ることができますが、これも失われます）。私は以前のルートからスコープを維持することをお勧めします。
2. 私は別のコントローラ（または、他の多くのAngular開発者が表示された複数のビューを持つことができると嘆いていますが）を使用したいのですが、これはスコープを失うという同じ問題につながります。

Answer 1

ui-router：http://github.com/angular-ui/ui-routerを試してみてください。

彼らは私がこのシナリオのための天の恵みであることをAngular Multi Viewを見つけた

Answer 2

:-)角度デフォルトのルーティングより景色と簡単に状態管理を入れ子にしています。ルートが変更されたときにスコープを維持し、複数のコントローラが同じルートを共有できるようにしますビューをネストすることなく。

ページに2つ以上のビューがある場合は、角度マルチビューをおすすめします。それ以外の場合は、ui-routerを使用すると、複数のビューを入れ子にするのは面倒です。

Answer 3

複数のビューは、AngularJSコアではサポートされていません。あなたは、各レベルには独自のコントローラとテンプレートを使用して個別に設定されているページ、上のネストされたビューの任意の量をサポートし、この目的のために、このライブラリを使用することができます。

http://angular-route-segment.com

UI-より使いはるかに簡単ですルータ。サンプルの設定は次のようになります。

$routeSegmentProvider. 

when('/section1',   's1.home'). 
when('/section1/prefs', 's1.prefs'). 
when('/section1/:id',  's1.itemInfo.overview'). 
when('/section1/:id/edit', 's1.itemInfo.edit'). 
when('/section2',   's2'). 

segment('s1', { 
    templateUrl: 'templates/section1.html', 
    controller: MainCtrl}). 

within(). 

    segment('home', { 
     templateUrl: 'templates/section1/home.html'}). 

    segment('itemInfo', { 
     templateUrl: 'templates/section1/item.html', 
     controller: Section1ItemCtrl, 
     dependencies: ['id']}). 

    within(). 

     segment('overview', { 
      templateUrl: 'templates/section1/item/overview.html'}). 

     segment('edit', { 
      templateUrl: 'templates/section1/item/edit.html'}). 

     up(). 

    segment('prefs', { 
     templateUrl: 'templates/section1/prefs.html'}). 

    up(). 

segment('s2', { 
    templateUrl: 'templates/section2.html', 
    controller: MainCtrl}); 

Answer 4

私は同じ問題を思い付いた、彼らは絶対に避けられないとき、私はpersonnalyプラグインを好きではありません。私はシングルトン部分をサービスに移しました。

私の場合は：id [/：mode]ルートがあり、ユーザーがモードまたはIDだけを変更した場合、私は別のやり方で反応したい。したがって、私は以前のIDを知る必要があります。

したがって、状態を更新するactivateメソッドを持つサービスがあります。スコープは毎回次のコードで再初期化されます。

module.controller('MyController', ['$scope', '$routeParams', 'navigator', function($scope, $routeParams, navigator) { 
    var id = null; 
    var mode = null; 

    if (typeof($routeParams.id)!='undefined') 
    { 
     id = $routeParams.id; 
    } 

    if (typeof($routeParams.mode)!='undefined') 
    { 
     mode = $routeParams.mode; 
    } 

    navigator.activate(id, mode); 

    $scope.items = navigator.items; 
    $scope.activeItem = navigator.activeItem; 
    $scope.modes = navigator.modes; 
    $scope.activeMode = navigator.activeMode; 
}]); 

アクティブメソッドでは、idとシングルトンのactiveItem.idを比較し、異なる反応を起こすことができます。