ngCesium – integrating angularjs and cesiumjs – part 3

In the last two parts we went through building our reusable cesium directive and module and then added our module to an app and extended it with an API stored in a factory. What we have now is a working angular module we can just add to any angular app, and it will allow us to insert a cesium directive and control it via the API.

In this part of the guide, we’ll go a few extra miles and build a sub module for our cesium module.  This modularity allows you to add more functionality to the module, without touching what is actually working. This also allows you many other benefits, like testing each module separately, easier maintenance and more.

Because this step is a bit long, we’ll start with a simple sub module. What we’re going to do is make the “add entity” and “remove entity” buttons a module.

We’ll start by adding a new module:

angular.module(‘ngCesiumButtons’, [‘ngCesium’])
.directive(‘cesiumButtons’, function(){

})
.factory(‘cesiumButtonsService’, function(){
// constructor
function cesiumButtonsService(ngCesiumInstance){
this.ngCesiumInstance = ngCesiumInstance;
ngCesiumInstance.cesiumButtons = this;
};

cesiumButtonsService.prototype = {

}

return cesiumButtonsService;
})

The code is quite similar to the ngCesium module.  It contains a directive and a factory.  Looking at the factory’s constructor (in function cesiumButtonsService), we can see that it stores the parent module instance (this.ngCesiumInstance = ngCesiumInstance;) and makes itself known to the parent module (ngCesiumInstance,cesiumButtons = this;).  Here, the module is dependent on ngCesium itself (angular.module(‘ngCesiumButtons’, [‘ngCesium’])), since it has no reason to “live” without it.

Now we’re ready to actually code the module itself.  Our entry point is the directive, so we’ll start there.  The first thing we need is to create the cesiumButtons instance.  It is done the same we we’ve created the cesiumInstance: new cesiumButtons(cesiumInstance);.  We add this code in the  directive’s link function, which requires the cesiumDirective’s controller.

Now we want to inject our buttons to the view.  This can be done easily in many ways. What I’m going to do is hard code the buttons into JS and inject them into the DOM when the view is loading.

I first cache the template when the module runs for the first time.

.run(function($templateCache){
$templateCache.put(‘ngCesium/cesiumButtons’,
‘<div class=”cesiumButtonsWrapper>\
<button ng-click=”cesiumButtonsCtrl.addEntity()”>Add   Entity</button>\
<button ng-  disabled=”!cesiumButtonsCtrl.cesiumConfig.cesiumInstance._viewer.entities.values.length” ng-click=”mainAppCtrl.removeEntity()”>Remove Entity</button>\
</div>’)
})

Then it is available for the cesiumButtonsService using the $templateCache service, and I expose a method that returns it to the directive:

getTemplate: function(){
return $templateCache.get(‘ngCesium/cesiumButtons’);
}

Now we can inject the template into the DOM after compiling it with angular’s $compile service:

// get the template
var template = ctrl.cesiumButtonsInstance.getTemplate();

// turn the template into an angular element
template = angular.element(template);

// compile the template
template = $compile(template)(scope);

// inject into the DOM
element.append(template);

We’re left now with 2 things:

1. Remove the buttons from our main HTML.
2. Setup the buttons’ functions from the directive.

Let’s start with the easy part.  We just need to delete the buttons code from the main HTML view. Now we need to remove the functions from the main controller, because we’re not going to use them.  What we are going to do is to move these functions to the cesiumButtonsService.

With the above steps, we are done with building our brand new ngCesium extension!  Here’s the full working example with two cesium instances, to show they are completely apart of each other:

In the next part, we’re going to use this method, to extend our ngCesium module with a much more effective function – a polygon drawing module.  We’ll see how we can use angularJS functionality to easily communicate with the rest of the application and use our drawing module anywhere in the application.