Каков предпочтительный способ обработки адаптивного (а не адаптивного) макета в 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="[email protected]" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
<script data-require="[email protected]" 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
- Является ли это предпочтительным способом создания адаптивной верстки?
Как я могу (с таким подходом):
- Add a class to in index.html based on mobile/desktop choice
- Динамически загружать mobile.css или desktop.css
С уважением,
