AngularJS 中的自适应布局（移动/桌面） - 首选方式是啥（内部示例）
Posted
技术标签:
【中文标题】AngularJS 中的自适应布局（移动/桌面） - 首选方式是啥（内部示例）【英文标题】：Adaptive layout (mobile/desktop) in AngularJS - what is the preferred way to do it (example inside)AngularJS 中的自适应布局（移动/桌面） - 首选方式是什么（内部示例） 【发布时间】：2015-09-09 19:13:05 【问题描述】：在 AngularJS 中处理自适应（不是响应式）布局的首选方法是什么？我需要做的是使用不同的共享组件（共享指令和控制器）为桌面和移动设备提供不同的布局。我正在考虑使用 ui-router，这是我现在拥有的：
index.html（主文件）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
<script data-require="ui-router@0.2.15" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body data-ng-app="plunker" data-ng-strict-di>
<header>
<nav>
<ul>
<li><a data-ui-sref="mobile.user">Mobile</a></li>
<li><a data-ui-sref="desktop.user">Desktop</a></li>
</ul>
</nav>
</header>
<main data-ui-view>
</main>
</body>
</html>
desktop.html（桌面内容的包装器）：
<h1>Desktop</h1>
<div data-ui-view>
</div>
mobile.html（移动内容的包装器）：
<h1>Mobile</h1>
<div data-ui-view>
</div>
user.html（共享内容）：
<div data-ng-controller="UserCtrl">
User name: name
</div>
app.js
var app = angular.module('plunker', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)
$stateProvider
.state('mobile',
abstract: true,
url: '/mobile',
templateUrl: 'mobile.html'
)
.state('mobile.user',
url: '/user',
templateUrl: 'user.html'
)
.state('desktop',
abstract: true,
url: '/desktop',
templateUrl: 'desktop.html'
)
.state('desktop.user',
url: '/user',
templateUrl: 'user.html'
)
]);
app.controller('UserCtrl', ['$scope', function($scope)
$scope.name = 'John';
]);
预览和编辑：
http://plnkr.co/edit/gRnTJkMa7hTLnffOERMT?p=preview
-
这是进行自适应布局的首选方式吗？
我该怎么做（用这种方法）：
-
根据移动/桌面选择在 index.html 中添加一个类
动态加载 mobile.css 或 desktop.css
最好的问候，
【问题讨论】：
【参考方案1】：我最近遇到了同样的问题，这就是为什么我来到这里寻找一些答案。根据我的发现，看起来我有两种不同的选择：
-
使用你的方法
事实
两个部分不同的布局，因为页眉和页脚以及其他一些正文标签仍然共享。否则你将不得不在 html 上应用 data-ui-view 只有使用 ui-router 才能实现，这不适用于 Angular 默认路由器 您将从桌面和移动设备加载所有路由和配置，因为您有一个共享的配置文件。这意味着即使用户仅访问移动版本，您也需要以某种方式加载所有 js 文件。否则，您将不得不为移动版本创建一个新的配置文件并将该配置文件用于移动布局，或者根据检测到的设备动态排除某些路线。 您可以在单页应用程序中从移动设备切换到桌面设备，而无需重新加载。不确定这是否是一种优势。好的部分：
您不会应用任何服务器逻辑，也不会将主要 index.html 文件与服务器分开。这意味着整个逻辑都在客户端。
坏的部分：
您使逻辑复杂化，因为您需要在设备之间进行明确的分离，并尽可能避免加载未使用的 js 文件。如果你这样做，基本上你是在做另一个 SPA，因为桌面版本在你的 SPA 中不可用。
-
共享相同的应用程序，但从基于域的服务器，您可以提供不同的 html 文件。例如：yoursite.com 将提供 index.html 最终将加载桌面版本，m.yourside.com 将提供 mobile.html 最终将加载移动版本。
事实：
这更像是硬分离，暗示服务器逻辑进行分离 从移动设备和桌面设备切换时，会重新加载。 现在，您不能使用 app.js 中引用桌面版本的相同配置或其他更改，因此可能需要更改某些文件以不再引用用于桌面的库 这种方法看起来更像是同一项目（文件夹结构/应用程序文件夹）中的新 angularJs 应用程序，可能具有相同的名称和许多共享组件和服务，但依赖关系更少且更简洁。对我来说，这听起来更像是一种逻辑分离，考虑到您不需要在移动版本上提供所有这些 js 文件，也许您不会使用桌面版本的所有功能到移动版本。我在演示级别看到的唯一区别可能是不同的路由、配置文件、控制器和视图。仍然是相同的模型并共享服务和大型组件。
为了做出决定，您需要考虑两种情况，每种情况都有好的部分和坏的部分。现在我还不知道该做出哪个决定，我可能会调查一两天。
祝你好运。
安德烈
【讨论】：
【参考方案2】：var isMobile = window.orientation > -1;
var orientationVariable = isMobile ? 'Mobile' : 'DeskTop';
if (orientationVariable == 'Mobile')
$urlRouterProvider.otherwise("/mobile/main");
$stateProvider
.state('mobile',
abstract: true,
url: '/mobile',
controller: 'appCtrl',
templateUrl: '../app/tpl/mobile-main.html'
)
.state('mobile.main',
url: '/main',
controller: 'appCtrl',
templateUrl: '../app/tpl/app-mobile.html'
)else if(orientationVariable == 'DeskTop')
$urlRouterProvider.otherwise("/desktop/main");
$stateProvider.state('desktop',
abstract: true,
url: '/desktop',
controller: 'appCtrl',
templateUrl: '../app/tpl/desktop.html',
)
.state('desktop.main',
url: '/main',
controller: 'appCtrl',
templateUrl: '../app/tpl/desktop.main.html',
)
【讨论】：
以上是关于AngularJS 中的自适应布局（移动/桌面） - 首选方式是啥（内部示例）的主要内容，如果未能解决你的问题，请参考以下文章