Javascript 角度ui.router动态侧栏

我现在已经试了一整天了，不知道该怎么解决这个问题。 我的目标是显示一个边栏，根据它的状态填充数据

假设我在主页上我可能喜欢以下项目：

主页项目1

主页项目2

如果我在关于页面上我想要这些项目：

关于我

关于我的狗

我希望从一个服务获取数据，该服务根据数据的状态将数据返回给视图

我曾尝试使用ui.router的解析功能，但我无法在头脑中找到正确的结构使其工作

创建了一个plunkr，它显示了我的意思，但没有解决方案，在使用Angular和ui.router创建动态侧栏时，最佳实践和首选方法是什么

myapp.config(function($stateProvider) {
      $stateProvider
        .state('home', {
          url: "",
          views: {
            "content": {
              template: "This is the home.content"
            },
            "sidebar": {
              templateUrl: 'sidebar.html',
              controller: 'sidebarCtrl'
            }
          }
        })
        .state('about', {
          url: "/about",
          views: {
            "content": {
              template: "This is the about.content"
            },
            "sidebar": {
              templateUrl: 'sidebar.html',
              controller: 'sidebarCtrl'
            }
          }
        })
    })

编辑

无法找出我做错了什么，此代码未显示任何视图：

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    // For any unmatched url, redirect to root
    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state('root', {
            url: '',
            'abstract': true,
            views: {
                'sidebar@': {
                    templateUrl: '/App/Main/views/shared/sidebars/sidebar.cshtml',
                    controller: 'app.controllers.views.shared.sidebars.sidebar',
                    resolve: {
                        sidebarData: function (sidebarService) {
                            return sidebarService.getActions();
                        }
                    }
                }
            },
        })
    .state('root.home', {
        url: "/",
        views: {
            '': {
                templateUrl: '/App/Main/views/home/home.cshtml',
                controller: 'app.controllers.views.home'
            },
            'content@root.home': {
                templateUrl: '/App/Main/views/home/home-content.cshtml',
                controller: 'app.controllers.views.home'
            }
        }
    })
    .state('root.about', {
        url: "/customers",
        views: {
            '': {
                templateUrl: '/App/Main/views/customers/customers.cshtml',
                controller: 'app.controllers.views.customers'
            },
            'content@root.about': {
                templateUrl: '/App/Main/views/customers/customers-content.cshtml',
                controller: 'app.controllers.views.customers'
            }
        }
    });
}]);

以下是我的家庭和客户视图：

<div data-ui-view="sidebar">
    Loading sidebar view.
</div>
<div data-ui-view="content">
    Loading content view.
</div>

加载侧栏视图。
正在加载内容视图。

您可以尝试为侧边栏实现命名视图和抽象视图，以便在其他路由中重用它，也可以使用resolve参数返回您需要的任何动态数据（来自服务、资源等），它可以是这样的：

var myapp = angular.module('myapp', ["ui.router"])
     myapp.config(function($stateProvider) {
      $stateProvider
      .state('root',{
          url: '',
          abstract: true,
          views: {
            'sidebar@': {
              templateUrl: 'sidebar.html',
              controller: 'sidebarCtrl',
              resolve:{
                sidebarData:function(){
                  return  [{
                         state: '/stateHere',
                         text: 'Need'
                         }, {
                        state: '/stateHere',
                        text: 'to'
                        }, {
                        state: '/stateHere',
                        text: 'fill'
                        }, {
                        state: '/stateHere',
                        text: 'this'
                         }, {
                        state: '/stateHere',
                        text: 'with'
                        }, {
                        state: '/stateHere',
                        text: 'dynamic'
                        }, {
                        state: '/stateHere',
                       text: 'data'
                       }];
                }
              }
            }
        })
        .state('root.home', {
          url: "/",
          views: {
            'content@': {
              template: "This is the home.content"
            }
          }
        })
        .state('root.about', {
          url: "/about",
          views: {
            'content@': {
              template: "This is the about.content"
            }
          }
        })
    });

     myapp.controller('sidebarCtrl', ['$scope','sidebarData'
      function($scope,sidebarData) {
            $scope.sidebarData= sidebarData,

      }
    ]);

编辑：

检查此工作示例：

---

谢谢，这太完美了，但是我应该在服务中检查什么来确定应该返回的行？我需要实现一些状态，或者id检查，对吗？这可能取决于您的逻辑，但是如果您计划从服务器获取状态，例如，本文可能会对您有所帮助：）干杯！ty@jack.the.ripper仍然不知道如何解决基本设置。更新了我的帖子。您的StateProvider的名称为“”，并且您正在标记中使用名为contaner的命名视图，我建议将其从“”更改为“content@”，请一步一步地尝试，视图：{'content@'：{templateUrl:'home.html'，控制器：'HomeController'}