Javascript AngularJs nexted视图

嗨，我要开始一个项目。 在tablet页面中，左侧包含项目列表，右侧包含项目详细信息，如下图所示

在mobile中，它在一个页面上显示项目列表，在另一个页面上显示活动细节，如下图所示

我使用AngularJs实现了这样的应用程序（伪代码）

Index.html

---

在Controller.js中

---

在List.html中，我使用了下一个视图

<div id="middleContent" ui-view style="padding-left: 317px;"></div>

如果是平板电脑，它会被加载。否则在那里就没用了

是否有一些简单的方法来处理这种情况。请帮忙

---

关于

我们不清楚你在问什么。你是否想过使用移动优先框架，如Twitter引导或骨架（getskeleton）。骨架很简单，可以让你设计它的样式，bootstrap有一种css的风格，我用复杂的方式处理移动和平板电脑视图（即在list.html中定义嵌套视图，并定义复杂的路由状态）。有没有其他方法来处理这种情况

<ul><li ng-repeat='item in items' >{{item.title}}</li></ul>

<div id="middleContent" ui-view style="padding-left: 320px;"></div>

<div>Acitivity detail <div>

app = angular.module('MyApp', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider.state('List', {
            url: '/List',
            templateUrl: 'Partial/List.html',
            controller: 'ListController'
        })
        $stateProvider.state('Detail', {
            url: '/Detail/:id',
            templateUrl: 'Partial/Detail.html',
            controller: 'DetailController'
        })

        $stateProvider.state('TabletList', {
            url: '/TabletList',
            data: { 'parent': 'tablet' },
            templateUrl: 'Partial/List.html',
            controller: 'ListController'
        })


        $stateProvider.state('TabletList.Detail', {
            url: '/Detail/:id',
            templateUrl: 'Partial/Detail.html',
            controller: 'DetailController',
        })

    })

app.controller('ListController',function(){

if($(window).width() > mobileView )( $state.go('TabletList.Detail'))

})

<div id="middleContent" ui-view style="padding-left: 317px;"></div>