AngularJS中Spotify Web Player风格的UI

Spotify Web Player style UI in AngularJS

本文关键字：风格 UI Player Web Spotify AngularJS      更新时间：2024-06-15

我知道这是一个相当大且模糊的问题，但如果有一个好人朝着正确的方向推动我，那就太好了。我正试图构建一个类似Spotify网络播放器（play.Spotify.com）的用户界面，并一直在努力获得任何可行的东西（使用angular UI路由器和ngAnimate）。我想要复制的界面的主要部分是从左侧滑入的级联面板；也就是说，当可能有无限多的视图从右侧过渡过来，并且我不能简单地用另一个视图替换一个视图（前一个视图位于屏幕左侧）时，我将如何使用ui视图实现这一点。这很难表达，所以除非你真的使用了他们的网络播放器，否则这可能没有任何意义，但如果你曾经玩过它，那么你可能会理解。

但是，是的，任何关于我将如何使用angular ui路由器（或者可能是另一个我不知道的模块）实现这一点的概念概述或提示都将不胜感激。

正如你所提到的，你的问题可能会被否决，因为它太模糊了，但我会尽力帮助你。。。

使用ui路由器（来自Angular ui团队），而不是Angular的ngRoute。然后，您可以根据所需的任何状态在左侧视图中以编程方式加载。所以你会在你的.config…中有如下内容

.state('home', {
    url: '/',
    views: {
        '': {
            templateUrl: 'app/home.html',
            controller: 'homeController'
        },
        'nav@home': {
            templateUrl: 'app/nav.html',
            controller: 'navController'
        },
        'footer@home': {
            templateUrl: 'app/footer.html'
        },
        'rightContent@home': {
            templateUrl: 'app/default.html'
        },
        'leftContent@home': {
            templateUrl: 'app/menu.html'
        }
    }
})
.state('home.leftSideOne', {
    url: 'leftSideOne',
    views: {
        'content@home.leftSideOne': {
            templateUrl: 'app/leftSideOne.html',
            controller: 'leftSideOneController'
        }
    }
})
.state('home.leftSideTwo', {
    url: 'leftSideTwo',
    views: {
        'content@home.leftSideTwo': {
            templateUrl: 'app/leftSideTwo.html',
            controller: 'leftSideTwoController'
        }
    }
})

然后你的html可能有

    <div ui-view="nav@home"></div>
    <div ui-view="content@{{$state.current.name}}" class="content-div"></div>
    <div ui-view="footer@home" class="footer-bar"></div>

在你的控制器里。。。

var leftLeftSide = function () {
  $state.go('home.leftSideTwo');
  // or whatever state you should be moving to
}
相关文章：