3

在 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>

应用程序.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

  1. 这是进行自适应布局的首选方式吗？

  2. 我怎么能（使用这种方法）：

    1. 根据移动/桌面选择在 index.html 中添加一个类
    2. 动态加载 mobile.css 或 desktop.css

此致，

4

2 回答 2

2

我最近遇到了同样的问题，这就是为什么我来到这里寻找一些答案。根据我的发现，看起来我有两种不同的选择：

  1. 使用你的方法

事实

  • 两个部分不同的布局，因为页眉和页脚以及其他一些正文标签仍然共享。否则你将不得不在 html 上应用 data-ui-view
  • 这只有在使用 ui-router 时才能实现，这不适用于 Angular 默认路由器
  • 您将从桌面和移动设备加载所有路由和配置，因为您有一个共享的配置文件。这意味着即使用户仅访问移动版本，您也需要以某种方式加载所有 js 文件。否则，您将不得不为移动版本创建一个新的配置文件并将该配置文件用于移动布局，或者根据检测到的设备动态排除某些路线。
  • 您将能够在单页应用程序中从移动设备切换到桌面设备，而无需重新加载。不确定这是否是优势。

好的部分：

您不会应用任何服务器逻辑，也不会将主要 index.html 文件与服务器分开。这意味着整个逻辑都在客户端。

坏零件：

您使逻辑复杂化，因为您需要在设备之间进行明确的分离，并尽可能避免加载未使用的 js 文件。如果你这样做，基本上你是在做另一个 SPA，因为桌面版本在你的 SPA 中不可用。

  1. 共享相同的应用程序，但从基于域的服务器您可以提供不同的 html 文件。例如：yoursite.com 将提供 index.html 最终将加载桌面版本，m.yourside.com 将提供 mobile.html 最终将加载移动版本。

事实：

  • 这更像是硬分离，并暗示服务器逻辑进行分离
  • 从移动和桌面切换时，将进行重新加载。
  • 现在，您不能使用引用桌面版本的 app.js 中的相同配置或其他更改，因此可能需要更改某些文件以不再引用用于桌面的库
  • 这种方法看起来更像是同一个项目（文件夹结构/应用程序文件夹）中的一个新的 angularJs 应用程序，可能具有相同的名称和许多共享组件和服务，但依赖关系更少且更简洁。

对我来说，这听起来更像是一种逻辑分离，考虑到您不需要在移动版本上提供所有这些 js 文件，也许您不会使用桌面版本的所有功能到移动版本。我在演示级别看到的唯一区别可能是不同的路由、配置文件、控制器和视图。仍然是相同的模型并共享服务和大型组件。

为了做出决定，您需要考虑两种情况，每种情况都有好的和坏的部分。现在我还不知道该做出哪个决定，我可能会调查一两天。

美好的一天，祝你好运。

安德烈

于 2015-10-14T16:14:50.780 回答
0 
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',
         })}
于 2019-08-13T10:20:47.153 回答