Android fragment like UI


I’v been struggling a lot with that, without finding a proper solution. I’m actually looking for a UI that works like an Android fragment, with a master list on the left side and the main content on the right when the screen is large enough, or by navigating to it in case of smaller screens. I know about the side-menu, but I’m already using it for some options. And the behavior is a bit different.
Any idea on how this can be done? I have not found any boilerplate or sample code achieving this design, which seems pretty common nowadays.


So, one way you could accomplish this is using my showWhen directive.

I’ll try to get a better example going today.


So, maybe not the best way to do it (there are a couple ways) due to maintainability, but here is an example…




This looks great Andrew, thanks a lot. I’ll implement that and blog about it if we feel it should be shared.


@Andrew, you might be interested by this. Show/Hide are actually hidding the DOM, which has a performance penalty as you don’t want to have both layouts systematically processed. A ng-if will be more appropriate, as the hidden DOM elements are actually removed.
For this purpose, I created my own directive, that you might want to integrate to your showWhen:

function media(m) {
	if(m=="large") return "(min-width:768px)"
	return m;
function ifmedia(ngIfDirective,$window,show) {
	var ngIf = ngIfDirective[0];
	return {
		transclude: ngIf.transclude,
		priority: ngIf.priority,
		terminal: ngIf.terminal,
		restrict: ngIf.restrict,
		link: function($scope, $element, $attr) {
			$attr.ngIf = function() {
				var mq = media($attr[show?'ifMedia':'ifNotMedia']);
				var matches = $window.matchMedia(mq).matches;
				var visible = (show && matches) || (!show && !matches);
				return visible;
			};, arguments);
mod.directive('ifMedia', ['ngIfDirective', '$window', function(ngIfDirective,$window) {
	return ifmedia(ngIfDirective,$window,true);
mod.directive('ifNotMedia', ['ngIfDirective', '$window', function(ngIfDirective,$window) {
	return ifmedia(ngIfDirective,$window,false);