You should consider writing a directive. Directive are intended to encapsulate reusable components, especially graphic ones.
define [
'app' # or use any other way to get to your Angular module.
'snap'
], (app, Snap) ->
app.directive 'awesomeMap', ->
# directive template: will be injected into controller ($element variable)
template: "<svg></svg>"
# will remplace hosting element
replace: true
# applicable as element and attribute
restrict: 'EA'
# here the "parameters" of your directive: can be parsed from HTML, or bound to parent scope (my example).
scope:
svgPath: '=?path'
# controller
controller: AwesomeMap
class AwesomeMap
# Controller dependencies: scope and HTML element
@$inject: ['$scope', '$element']
# Controller constructor: bind methods and attributes to current scope
#
# @param scope [Object] directive scope
# @param element [Object] root element's HTML (angular.element)
constructor: (@scope, element) -
@snap = Snap(element[0])
Snap.load(@scope.svgPath, (data) ->
console.log "Loaded map in Map!">
# do your stuff here !
Your directive needs to be loaded after Angular's module initialization (don't forget to require it somewhere), and you just have to use it in your HTML.
<div data-ng-controller="AParentScope">
My awesome map <awsome-map data-path="scopeAttribute"></awsome-map>
(Using CoffeeScript classes with Angular is a challenge, I'm happy to find someone else trying :))