AngularJS - Directives vs Controllers

Question

I am trying to create my first app using AngularJS. However, I'm a bit confused if I need to use directives for my particular case.

I have a simple Map page, where I need to show lat/lon value of selected region. At the moment I'm not using directives at all. I do everything in controller and use partials to display the results. I am not planning to reuse my map view in any other place. That's why I didn't feel I would need a directive.

On the other hand, I read somewhere that every time you try to manipulate DOM in your controller(which I'm doing using google maps API), you should move that part to directives.

Here's my simple controller:

function MapViewController($scope) {   $scope.zoom = 6;   $scope.lat = 37;   $scope.lon = -122;   var mapOptions = {     center: new google.maps.LatLng($scope.lat, $scope.lon),     zoom: $scope.zoom,     mapTypeId: google.maps.MapTypeId.HYBRID   };   $scope.map = new google.maps.Map(       document.getElementById('map-canvas'), mapOptions);    /*    * Update zoom and other map attributes.    */   google.maps.event.addListener($scope.map, 'center_changed', function() {     $scope.$apply(function () {       $scope.zoom = $scope.map.getZoom();       var center = $scope.map.getCenter();       $scope.lat = center.lat();       $scope.lon = center.lng();       var bounds = $scope.map.getBounds();       var northEast = bounds.getNorthEast();       $scope.northEastLat = northEast.lat();       $scope.northEastLon = northEast.lng();       var southWest = bounds.getSouthWest();       $scope.southWestLat = southWest.lat();       $scope.southWestLon = southWest.lng();     });   });    /*    * Set zoom and other map attributes.    */   google.maps.event.addListener($scope.map, 'some event', function() {     $scope.$apply(function () {       ...     });   });    /*    * Add markers to map.    */   google.maps.event.addListener($scope.map, 'another event', function() {     $scope.$apply(function () {       ...     });   });  } 

And here's my partials:

  <div id="map-controllers" class="span4">     <form class="form-horizontal">       <div class="control-group">         <label class="control-label" for="inputNumber">Zoom:</label>         <div class="controls">           <input type="text" class="input-mini" placeholder="zoom" value="{{ zoom }}">         </div>       </div>       <div class="control-group">         <label class="control-label" for="inputNumber">Latitude:</label>         <div class="controls">           <input type="text" class="input-large" placeholder="Latitude" value="{{ lat }}">         </div>       </div>       <div class="control-group">         <label class="control-label" for="inputNumber">Longitude:</label>         <div class="controls">           <input type="text" class="input-large" placeholder="Longitude" value="{{ lon }}">         </div>       </div>       <div class="control-group">         <label class="control-label" for="inputNumber">North East Latitude:</label>         <div class="controls">           <input type="text" class="input-large" placeholder="Latitude" value="{{ northEastLat }}">         </div>       </div>       <div class="control-group">         <label class="control-label" for="inputNumber">North East Longitude:</label>         <div class="controls">           <input type="text" class="input-large" placeholder="Longitude" value="{{ northEastLon }}">         </div>       </div>       <div class="control-group">         <label class="control-label" for="inputNumber">South West Latitude:</label>         <div class="controls">           <input type="text" class="input-large" placeholder="Latitude" value="{{ southWestLat }}">         </div>       </div>       <div class="control-group">         <label class="control-label" for="inputNumber">South West Longitude:</label>         <div class="controls">           <input type="text" class="input-large" placeholder="Longitude" value="{{ southWestLon }}">         </div>       </div>     </form>   </div> 

Answer 1

Here's a brief stand-alone answer, with links to official docs for further info (definition of "services" added for good measure):

http://docs.angularjs.org/guide/controller

In AngularJS, a controller is a JavaScript constructor function that is used to augment the AngularJS scope.

When a controller is attached to the DOM via the ng-controller directive, AngularJS will instantiate a new controller object, using the specified controller's constructor function. A new child scope will be available as an injectable parameter to the controller's constructor function as $scope.

http://docs.angularjs.org/guide/directive

At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even to transform the DOM element and its children.

http://docs.angularjs.org/guide/services

AngularJS services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.