个人中心
gpt4 book ai didi

angularjs - AngularJS 中的自适应布局(移动/桌面) - 首选的方式是什么(内部示例)

转载 作者：行者123 更新时间：2023-12-03 08:01:13 25 4
gpt4 key购买 nike

在 AngularJS 中处理自适应(与响应无关)布局的首选方法是什么？我需要做的是为桌面和移动设备设置不同的布局，其中包含不同的共享组件(共享指令和 Controller )。我正在考虑使用 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

最好的问候，

最佳答案

我最近遇到了同样的问题，这就是我来到这里寻找答案的原因。根据我的发现，看起来我有两种不同的选择:

  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 文件提供服务器，也许您不会将桌面版本的所有功能都用于移动版本。我在演示级别看到的唯一区别可能是不同的路由、配置文件、 Controller 和 View 。仍然是相同的模型并共享服务和大组件。

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

祝你好运。

安德烈

关于angularjs - AngularJS 中的自适应布局(移动/桌面) - 首选的方式是什么(内部示例)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31012074/

25 4 0
文章推荐： cassandra - DevCenter 报告语法错误，但在 cqlsh 上运行相同的 CQL
文章推荐： c# - Visual Studio 在构建后显示虚假错误
文章推荐： reporting-services - 可以为 SQL Server 2012 报告配置自定义错误处理程序吗？
文章推荐： coldfusion - 如何通过脚本使用access ="remote"属性定义ColdFusion函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com