Приложение для комплексной компоновки Angularjs

Question

Я пытаюсь настроить angularjs на мое приложение Rails 4, используя Angular Seed в качестве структуры по умолчанию, но мне сложно с этим справиться.

My layout состоит из 2 частей. Первая часть (левая часть) содержит список продуктов:

%ul 
    %li{ 'ng-repeat' => 'product in products | filter:search' } 
    %a{ 'ng-click' => 'open(tier)' } 
     %img{ 'ng-src' => '{{ tier.logo }}' } 

И другая часть здесь, чтобы увидеть детали продукта, но и что-нибудь еще в редакции продукта и форму для создания нового продукта. Именно в этот момент я действительно запутался. До сих пор я использовал ng-switch помощника для того, чтобы получить деталь продукта на правой стороне:

%ng-switch{ 'on' => 'details()' } 
    %div{ 'ng-switch-when' => "true" } 
    %header 
     %span 
     .h3 {{ opened.name }} 
    .panel-body 
     .tab-content 
     .tab-pane.active 
      %section.scrollable 
      %img{ 'ng-src' => '{{ opened.logo_large }}' } 

И мой контроллер выглядит следующим образом:

controller('TiersController', ['$scope', '$routeParams', 'Tiers', 'ngProgress', '$timeout', function($scope, $routeParams, Tiers, ngProgress, $timeout) { 
    $scope.tiers = Tiers.query(); 

    $scope.open = function(tier){ 
    if($scope.isOpen(tier)){ 
     $scope.opened = undefined; 
    }else{ 
     $scope.opened = tier; 
    } 
    }; 

    $scope.isOpen = function(tier){ 
    return $scope.opened === tier; 
    }; 

    $scope.details = function(){ 
    return $scope.opened !== undefined; 
    }; 

    $scope.close = function(){ 
    $scope.opened = undefined; 
    }; 
}]) 

До сих пор, как левая сторона (список продукт) и правая сторона (деталь) находятся в одном файле вида. Он отлично работает, когда я нажимаю на продукт и показываю его детали. Но что, если я хочу ввести другой вид в правую сторону, такую ​​как форма? Как вставить частичный вид в этот макет продукта? Дело в том, что я не хочу писать все свои разные представления в один и тот же файл для удобства обслуживания.

Надеюсь, что я был чист. Большое спасибо за вашу помощь

Answer 1

задача решается с помощью углового UI-маршрутизаторhttps://github.com/angular-ui/ui-router