Our client wants a responsive website, but he wants to change and move so much content that we will run into bootstrap limitations.
With bootstrap you can show and hide blocks and move them around with offset, but somehow it has it's limitations. It is a demanding client that will not respect such limitations so we are looking for other options.
To avoid creating duplicate content and still have the ability to give the mobile/desktop experience our team came up with AngularJS.
Our JSON data and Angular controllers can stay the same, but we only need to switch views if it is on mobile/tablet/desktop.
Is there a good stable solution to get this working?
And can we test it like we test responsive design by resizing the browser, or is useragent detection the only solution?
That would be a pain during testing, since we need then many devices or emulators to test.
You can create a custom directive for this.
app.directive('responsiveTemplate', function() {
return {
restrict: 'E',
template: '<ng-include src="template"></ng-include>',
scope: true,
link: function(scope, elem, attr) {
var mobile = attr.mobile;
var desktop = attr.desktop;
scope.template = desktop;
$(window).resize(function() {
if (windowSizeIsDesktop() && scope.template != desktop) {
scope.template = desktop;
scope.$apply();
}
else if (windowSizeIsMobile() && scope.template != mobile) {
scope.template = mobile;
scope.$apply();
}
});
}
}
})
Use as an element
<responsive-template desktop="desktop.html" mobile="mobile.html"></responsive-template>
I have not defined the windowSize functions though they are trivial to implement
I'd probably just use ng-if for this, but I'd make sure you need it first and can't simply use css / media queries for what you're describing. Here's an example of the ng-if logic:
<body ng-app="myApp">
<div ng-controller="ctrl" >
<div ng-if="isWide()">
<p>Wide Content</p>
</div>
<div ng-if="!isWide()">
<p>Narrow Content</p>
</div>
</div>
</body>
And the js:
angular.module('myApp', []).controller('ctrl', function($scope, $window) {
$scope.isWide = function() {
return $window.innerWidth > 500; //your breakpoint here.
}
angular.element($window).on('resize', angular.bind($scope, $scope.$apply));
});
http://jsfiddle.net/gq2obdcq/8/
Just drag the split pane to see the results in the fiddle.
$routeProvider.
when('/:menu/:page', {
controller:HandleCtrl,
template:'<div ng-include="templateUrl">Loading...</div>'
}).
Combined with:
function HandleCtrl($scope, $routeParams){
$scope.templateUrl = $routeParams.menu +'/'+ $routeParams.page + '.html'
}
Would this be safe?
Inside the controller I can decide what html file I want to use as template
Related
I am two weeks into Angular. I have watched several Pluralsite videos and read several post and this has resulted in great progress but also some confusion. I want to notify one directive of some change in another directive. Then refresh the directive. In other words it needs to go back to the server with the selection from the first and pull the appropriate data.
I have read about eventing and things like $watch() but then I have seen others say to avoid watch and to use $emit and $on. I have even seen one article say to use transclusion.
I have access to Pluralsight and other resources. I will self educate if someone could just point my nose in the right direction.
My directive markup html:
<div class="col-md-3">
<dashboard-main-nav></dashboard-main-nav>
</div>
<div class="col-md-3">
<dash-select ng-show="vm.isDashSelectionVisible">Selections</dash-select>
</div>
My app declaration: NOTE I know I need to get the parm from scope but not sure how...
(function ()
{
"use-strict";
...snip controller setup etc..
.directive("dashboardMainNav", function () {
return {
restrict: "E",
templateUrl: "/Navigation/GetDashItems",
scope: true
}
})
.directive("dashSelect", function () {
return {
restrict: "E",
templateUrl: "/Navigation/GetDashSelections/:" + $scope.??,
scope: true
}
});
})();
routingController:
(function () {
...snip...
function routingController($http, $scope) {
var vm = this;
var isDashSelectionVisible = false;
var dashSelectionId = 0;
$scope.LetterSearch= function (dashSelId) {
vm.isDashSelectionVisible = true;
vm.dashSelectionId = dashSelId;
alert("Letters Clicked: " + dashSelId);
}
}
})();
Rendered HTML:
<dashboard-main-nav>
....snip....
Letters
</dashboard-main-nav>
..... snip.....
<dash-select>
Numbers
</dash-select>
I am not showing the $routeProvider config that wires up the routingController as that works fine. I just need to get that custom directive to grab the parm from scope..refresh then update the dom.
Thank You for your patience and knowledge sharing.
I am aware of a similar question being asked before:
Change the templateUrl of directive based on screen resolution AngularJS
This was first asked over a year ago and since then AngularJS got changed a bit. I am curious to find out if there are any other ways to achieve something similar as I haven't found many information about templateUrl swapping, so maybe I am barking up the wrong tree here.
I have a single page app without any routes.
html:
<body ng-app="App">
// lots of html same for both desktop/mobile
<my-dir></my-dir>
// even more here
</body>
template 1:
<p>Mobile</p>
template 2:
<p>Desktop</p>
I would like to render template 1 when the screen goes below 700px and template 2 otherwise. The templates change just what is inside my-dir directive. For example Template 1 renders list and template 2 renders table.
Another requirement would be to make it responsive if possible(aka templates would change as you resize the window)
At the moment I can use the solution from the above questions but are there any other ways to do it?
In your controller:
$scope.includeDesktopTemplate = false;
$scope.includeMobileTemplate = false;
var screenWidth = $window.innerWidth;
if (screenWidth < 700){
$scope.includeMobileTemplate = true;
}else{
$scope.includeDesktopTemplate = true;
}
html template:
<body ng-app="App">
<p ng-if="includeMobileTemplate">Mobile</p>
<p ng-if="includeDesktopTemplate">Desktop</p>
</body>
Hope it helps
You can add window resize and scroll event listener on my-dir directive:
angular.module("App").directive('myDir', ['$window', '$timeout', function($window, $timeout){
return {
restrict: 'EA',
scope: {},
template:'<div>
<p ng-if="showFirstTemplate">Mobile</p>
<p ng-if="showSecondTemplate">Desktop</p>
</div>',
link: function(scope, element, attr){
function checkTemplateVisible(event){
//use $timeout to make sure $apply called in a time manner
$timeout(function(){
//pageYoffset is equal to window scroll top position
if($window.pageYOffset > 700){
scope.showFirstTemplate = true;
scope.showSecondTemplate = false;
}else{
scope.showFirstTemplate = false;
scope.showSecondTemplate = true;
}
})
})
//scroll event make sure checkTemplateVisible called on browser scrolling
$window.on('scroll', checkTemplateVisible)
//resize event make sure checkTemplateVisible called on browser resizing
$window.on('resize', checkTemplateVisible)
}
}
}])
I am looking for a way to obtain an iframe contentWindow object and post a message to it after some action of the user. My current solution does not feel ok with angular at all (especially accessing the DOM from the controller).
I have created a plunker demonstrating the issue:
http://plnkr.co/edit/aXh4jydWGWfK3QQD4edd
Is the a more angular way to execute the postMessage?
controller:
app.controller('Main', function($scope) {
$scope.click = function() {
var iframe = document.getElementById("inner").contentWindow;
iframe.postMessage("Hello iframe", '*');
}
});
html:
<body ng-controller="Main">
<button ng-click="click()">send message</button>
<iframe id="inner" src="inner.html"/>
</body>
I realize your question is over a year old at this point but I've recently had a similar need so I thought I'd post my solution. Originally I had something like you posted but as you pointed out this doesn't feel very "Angular". It's also not easily testable which I supposed is also not very "Angular".
Instead I've refactored my code to implement the iframe as a directive. I then $broadcast() events from my app's controllers and have the directive listen for them. This code can probably be improved quite a bit but it's feels a little more "Angular" and avoids directly touching the DOM.
'use strict';
angular.module('app')
.directive('angularIframe', ['$rootScope', function($rootScope) {
return {
restrict: 'E',
replace: true,
template: '<iframe id="game" src="/iframe/index.html" width="100%" height="100%" frameboarder="0" scrolling="no"></iframe>',
link: function(scope, elem) {
var off = $rootScope.$on('app.postmessage', function(ev, data, targetOrigin) {
var str = JSON.stringify(data);
targetOrigin = targetOrigin || '*';
elem[0].contentWindow.postMessage(str, targetOrigin);
});
// See: http://stackoverflow.com/a/14898795/608884
elem.on('$destroy', function() {
off();
});
}
};
}]);
You can then use this directive by adding <game></game> somewhere in your application.
In a controller you can now broadcast the app.postmessage event along with some data to invoke postMessage() on the iframe:
var myData = { foo: 'bar' };
$rootScope.$broadcast('app.postmessage', myData);
I would like to be able to capture the fact that a user moved their finger through a set of DOM elements on a touch device. This example works fine on a desktop browser but does not fire all the expected events when viewed in mobile Safari.
Working Plunkr (demonstrates the issue on mobile safari):
http://plnkr.co/edit/J8sfuJ9o6DorMSFlK9v2
HTML:
<body ng-controller="MainCtrl">
<p>Hello {{name}}! This works from a desktop browser but not from mobile Safari. I would simply like to be able to drag my finger down, across all four letters, and have their events fire. I thought that touchMove would work in place of mouseMove when running this Plunkr on iOS, but it doesn't.</p> Current letter: {{currentLetter}}
<div swipe-over="swipeOver()">A</div>
<div swipe-over="swipeOver()">B</div>
<div swipe-over="swipeOver()">C</div>
<div swipe-over="swipeOver()">D</div>
</body>
Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $log) {
$scope.name = 'World';
$scope.currentLetter = "";
$scope.swipeOver = function() {
$log.info("In swipeOver");
};
});
app.directive('swipeOver', function($log) {
return {
restrict: "A",
scope: true,
link: function(scope, element, attrs) {
// For touch devices
element.bind("touchmove", function() {
scope.$apply(function(evt) {
$log.info("in touchmove - " + element.text());
scope.$parent.currentLetter = element.text();
});
});
// For desktops
element.bind("mousemove", function(evt, e2) {
scope.$apply(function() {
$log.info(evt);
$log.info(e2);
$log.info("in mousemove - " + element.text());
scope.$parent.currentLetter = element.text();
});
});
}
};
});
I have tried the ng-touch library but it does not support vertical touch movements, amazingly. Any help would be massively appreciated at this point . . .
This is a limitation of touchmove currently, and I'm afraid there's no really good answer.
The best solution is to bind touchmove to a parent element and then calculate which child element is under the current touch point. It's answered in a jQuery context here Crossing over to new elements during touchmove.
You'll need to cycle through each of the child elements on the parent and check if the touch point is within their bounds.
Use Hammer.JS, it's the best I know. Angular-Hammer can be easily modified to support version 2.
I am having an issue in Angularjs where there is a flicker in my HTML before my data comes back from the server.
Here is a video demonstrating the issue: http://youtu.be/husTG3dMFOM - notice the #| and the gray area to the right.
I have tried ngCloak with no success (although ngCloak does prevent the brackets from appearing as promised) and am wondering the best way to hide content until the HTML has been populated by Angular.
I got it to work with this code in my controller:
var caseCtrl = function($scope, $http, $routeParams) {
$('#caseWrap').hide(); // hides when triggered using jQuery
var id = $routeParams.caseId;
$http({method: 'GET', url: '/v1/cases/' + id}).
success(function(data, status, headers, config) {
$scope.caseData = data;
$('#caseWrap').show(); // shows using jQuery after server returns data
}).
error(function(data, status, headers, config) {
console.log('getCase Error', arguments);
});
}
...but I have heard time and time again not to manipulate the DOM from a controller. My question is how can I achieve this using a directive? In other words, how can I hide the element that a directive is attached to until all content is loaded from the server?
In your CSS add:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
and just add a "ng-cloak" attribute to your div like here:
<div id="template1" ng-cloak>{{scoped_var}}<div>
doc: https://docs.angularjs.org/api/ng/directive/ngCloak
On your caseWrap element, put ng-show="contentLoaded" and then where you currently have $('#caseWrap').show(); put $scope.contentLoaded = true;
If the caseWrap element is outside this controller, you can do the same kind of thing using either $rootScope or events.
Add the following to your CSS:
[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important}
The compiling of your angular templates isn't happening fast enough.
UPDATE
You should not do DOM manipulation in your controller. There are two thing you can do...
1. You can intercept changes to the value within the scope of the controller via a directive! In your case, create a directive as an attribute that is assigned the property you want to watch. In your case, it would be caseData. If casedata is falsey, hide it. Otherwise, show it.
A simpler way is just use ngShow='casedata'.
Code
var myApp = angular.module('myApp', []);
myApp.controller("caseCtrl", function ($scope, $http, $routeParams, $timeout) {
$scope.caseData = null;
//mimic a delay in getting the data from $http
$timeout(function () {
$scope.caseData = 'hey!';
}, 1000);
})
.directive('showHide', function () {
return {
link: function (scope, element, attributes, controller) {
scope.$watch(attributes.showHide, function (v) {
if (v) {
element.show();
} else {
element.hide();
}
});
}
};
});
HTML
<div ng-controller='caseCtrl' show-hide='caseData'>using directive</div>
<div ng-controller='caseCtrl' ng-show='caseData'>using ngShow</div>
JSFIDDLE:http://jsfiddle.net/mac1175/zzwBS/
Since you asked for a directive, try this.
.directive('showOnLoad', function() {
return {
restrict: 'A',
link: function($scope,elem,attrs) {
elem.hide();
$scope.$on('show', function() {
elem.show();
});
}
}
});
Stick (show-on-load) in your element, and in your controller inject $rootScope, and use this broadcast event when the html has loaded.
$rootScope.$broadcast('show');
I have used Zack's response to create a 'loading' directive, which might be useful to some people.
Template:
<script id="ll-loading.html" type="text/ng-template">
<div layout='column' layout-align='center center'>
<md-progress-circular md-mode="indeterminate" value="" md-diameter="52"></md-progress-circular>
</div>
</script>
Directive:
directives.directive('loading', function() {
return {
restrict: 'E',
template: 'll-loading.html',
link: function($scope,elem,attrs) {
elem.show();
$scope.$on('loaded', function() {
console.log("loaded: ");
elem.hide();
});
}
}
});
This example uses angular-material in the html
The accepted answer didn't work for me. I had some elements that had ng-show directives and the elements would still show momentarily even with the ng-cloak. It appears that the ng-cloak was resolved before the ng-show returned false. Adding the ng-hide class to my elements fixed my issue.