I've finally had some time to put Angular to use this week in a small project I'm working on for fun. Angular's routing is great and makes it real easy to map URL routes to controllers and model data into views. But what if you don't actually need a view, if you effectively need a headless controller that just runs code, but doesn't render a view?Preserve
the ViewWhen Angular navigates a route and and presents a new view, it loads
the controller and then renders
the view from scratch. Views are not cached or stored, but displayed and then removed. So if you have routes configured like this:'use strict';
// Declare app level module which depends on filters, and services
window.myApp = angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/map',
{
template: "partials/map.html ", controller: 'mapController',
reloadOnSearch: false,
animation: 'slide'
});
… $routeProvider.otherwise({redirectTo: '/map'});
}]);
Angular routes to
the mapController and then re-renders
the map.html template with
the new data from
the $scope filled in.But, but… I don't want a new View!Now in most cases this works just fine. If I'm rendering plain DOM content, or textboxes in a form interface that is all fine and dandy - it's perfectly fine to completely re-render
the UI.But in some cases,
the UI that's being managed has state and shouldn't be redrawn. In this case
the main page in question has a Google Map on it.
The map is going to be manipulated throughout
the lifetime of
the application and
the rest of
the pages. In my application I have a toolbar on
the bottom and
the rest of
the content is replaced/switched out by
the Angular Views:The problem is that
the map shouldn't be redrawn each time
the Location view is activated. It should maintain its state, such as
the current position selected (which can move), and shouldn't redraw due to
the overhead of re-rendering
the initial map.Originally I set up
the map, exactly like all my other views - as a partial, that is rendered with a separate file, but that didn't work.
The Workaround - Controller Only RoutesThe workaround for this goes decidedly against Angular's way of doing things:Setting up a Template-less RouteIn-lining
the map view directly into
the main pageHiding and showing
the map view manuallyLet's see how this works.Controller Only RouteThe template-less route is basically a route that doesn't have any template to render. This is not directly supported by Angular, but thankfully easy to fake.
The end goal here is that I want to simply have
the Controller fire and then have
the controller manage
the display of
the already active view by hiding and showing
the map and any other view content, in effect bypassing Angular's view display management.In short - I want a controller action, but no view rendering.
The controller-only or template-less route looks like this: $routeProvider.when('/map',
{
template: " ", // just fire controller
controller: 'mapController',
animation: 'slide'
});Notice I'm using
the template property rather than templateUrl (used in
the first example above), which allows specifying a string template, and leaving it blank.
The template property basically allows you to provide a templated string using Angular's HandleBar like binding syntax which can be useful at times. You can use plain strings or strings with template code in
the template, or as I'm doing here a blank string to essentially fake 'just clear
the view'. In-lined ViewSo if there's no view where does
the HTML go? Because I don't want Angular to manage
the view
the map markup is in-lined directly into
the page. So instead of rendering
the map into
the Angular view container,
the content is simply set up as inline HTML to display as a sibling to
the view container.<div id="MapContent" data-icon="LocationIcon"
ng-controller="mapController" style="display:none">
<div class="headerbar">
<div class="right-header" style="float:right">
<a id="btnShowSaveLocationDialog"
class="iconbutton btn btn-sm"
href="#/saveLocation" style="margin-right: 2px;">
<i class="icon-ok icon-2x" style="color: lightgreen; "></i>
Save Location
</a>
</div>
<div class="left-header">GeoCrumbs</div>
</div>
<div class="clearfix"></div>
<div id="Message">
<i id="MessageIcon"></i>
<span id="MessageText"></span>
</div>
<div id="Map" class="content-area">
</div>
</div>
<div id="ViewPlaceholder" ng-view></div>Note that there's
the #MapContent element and
the #ViewPlaceHolder.
The #MapContent is my static map view that is always 'live' and is initially hidden. It is initially hidden and doesn't get made visible until
the MapController controller activates it which does
the initial rendering of
the map. After that
the element is persisted with
the map data already loaded and any future access only updates
the map with new locations/pins etc.Note that default route is assigned to
the mapController, which means that
the mapController is fired right as
the page loads, which is actually a good
thing in this case, as
the map is
the cornerstone of this app that is manipulated by some of
the other controllers/views.
The Controller handles some UISince there's effectively no view activation with
the template-less route,
the controller unfortunately has to take over some UI interaction directly. Specifically it has to swap
the hidden state between
the map and any of
the other views.Here's what
the controller looks like:myApp.controller('mapController', ["$scope", "$routeParams", "locationData",
function($scope, $routeParams, locationData) {
$scope.locationData = locationData.location;
$scope.locationHistory = locationData.locationHistory;
if ($routeParams.mode == "currentLocation") {
bc.getCurrentLocation(false);
}
bc.showMap(false,"#LocationIcon");
}]);bc.showMap is responsible for a couple of display tasks that hide/show
the views/map and for activating/deactivating icons.
The code looks like this:this.showMap = function (hide,selActiveIcon) {
if (!hide)
$("#MapContent").show();
else {
$("#MapContent").hide();
}
self.fitContent();
if (selActiveIcon) {
$(".iconbutton").removeClass("active");
$(selActiveIcon).addClass("active");
}
};Each of
the other controllers in
the app also call this function when they are activated to basically hide
the map and make
the View Content area visible.
The map controller makes
the map.This is UI code and calling this sort of
thing from controllers is generally not recommended, but I couldn't figure out a way using directives to make this work any more easily than this. It'd be easy to hide and show
the map and view container using a flag an ng-show, but it gets tricky because of scoping of
the $scope. I would have to resort to storing this setting on
the $rootscope which I try to avoid.
The same issues exists with
the icons.It sure would be nice if Angular had a way to explicitly specify that a View shouldn't be destroyed when another view is activated, so currently this workaround is required. Searching around, I saw a number of whacky hacks to get around this, but this solution I'm using here seems much easier than any of that I could dig up even if it doesn't quite fit
the 'Angular way'.Angular nice, until it's notOverall I really like Angular and
the way it works although it took me a bit of time to get my head around how all
the pieces fit together. Once I got
the idea how
the app/routes,
the controllers and views snap together, putting together Angular pages becomes fairly straightforward. You can get quite a bit done never going beyond those basics. For most common things Angular's default routing and view presentation works very well.But, when you do something a bit more complex, where there are multiple dependencies or as in this case where Angular doesn't appear to support a feature that's absolutely necessary, you're on your own. Finding information on more advanced topics is not trivial especially since versions are changing so rapidly and
the low level behaviors are changing frequently so finding something that works is often an exercise in trial and error. Not that this is surprising. Angular is a complex piece of kit as are all
the frameworks that try to hack JavaScript into submission to do something that it was really never designed to. After all everything about a framework like Angular is an elaborate hack. A lot of shit has to happen to make this all work together and at that Angular (and Ember, Durandel etc.) are pretty amazing pieces of JavaScript code. So no harm, no foul, but I just can't help feeling like working in toy sandbox at times :-)© Rick Strahl, West Wind Technologies, 2005-2013Posted in Angular JavaScript
Tweet
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
