added gulp and tasks to build dist files

dude, gulp is pretty rad
also added dotfiles to support tasks

.editorconfig

@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 4
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.jshintrc

@@ -0,0 +1,24 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "bitwise": true,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 2,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "quotmark": "single",
+  "regexp": true,
+  "undef": true,
+  "unused": true,
+  "strict": false,
+  "trailing": true,
+  "smarttabs": true,
+  "globals": {
+    "angular": false
+  }
+}

dist/angular-esri-map.js

@@ -0,0 +1,208 @@
+angular.module('esri.map', []).directive('esriMap', function ($q) {
+    return {
+        restrict: 'E',
+        scope: {
+          basemap: '=',
+          center: '=',
+          zoom: '='
+        },
+        compile: function ($element, $attrs) {
+            // remove the id attribute from the main element
+            $element.removeAttr('id');
+
+            // append a new div inside this element, this is where we will create our map
+            $element.append('<div id=' + $attrs.id + '></div>');
+
+            // since we are using compile we need to return our linker function
+            // the 'link' function handles how our directive responds to changes in $scope
+            /*jshint unused: false*/
+            return function (scope, element, attrs, controller) {
+                // link function
+            };
+        },
+        controller: function ($scope, $element, $attrs) {
+            // only do this once per directive
+            // this deferred will be resolved with the map
+            var mapDeferred = $q.defer();
+
+            // setup our map options based on the attributes and scope
+            var mapOptions = {};
+            if($attrs.extent){
+              mapOptions.extent = $scope[$attrs.extent];
+            }
+            if($scope.center){
+              mapOptions.center = $scope.center.split(',');
+            } else if ($attrs.lng && $attrs.lat) {
+              mapOptions.center = [$attrs.lng, $attrs.lat];
+            }
+            if($scope.zoom){
+              mapOptions.zoom = $scope.zoom;
+            }
+            if($scope.basemap){
+              mapOptions.basemap = $scope.basemap;
+            }
+
+            // load esri dependencies via AMD
+            require(['esri/map'], function (Map) {
+
+                // initialize map and resolve the deferred
+                var map = new Map($attrs.id, mapOptions);
+                mapDeferred.resolve(map);
+
+                // listen for changes to scope and update map
+                $scope.$watch('basemap', function(newBasemap) {
+                  if (map.loaded) {
+                    map.setBasemap(newBasemap);
+                  }
+                });
+                $scope.$watch('zoom', function(newZoom) {
+                  if (map.loaded) {
+                    map.setZoom(newZoom);
+                  }
+                });
+
+                // listen for map events and update scope
+                map.on('extent-change', function() {
+                  $scope.$apply(function() {
+                    $scope.zoom = map.getZoom();
+                  });
+                });
+            });
+
+            // method returns the promise that will be resolved with the map
+            this.getMap = function () {
+                return mapDeferred.promise;
+            };
+
+            // adds the layer, returns teh promise that will be resolved with the result of map.addLayer
+            this.addLayer = function (layer) {
+                return this.getMap().then(function (map) {
+                    return map.addLayer(layer);
+                });
+            };
+
+            this.addLayerInfo = function(lyrInfo){
+              if(!this.layerInfos){
+                this.layerInfos = [lyrInfo];
+              } else {
+                this.layerInfos.push(lyrInfo);
+              }
+            };
+
+            this.getLayerInfos = function(){
+              return this.layerInfos;
+            };
+
+        }
+    };
+});
+
+angular.module('esri.map').directive('esriFeatureLayer', function ($q) {
+    // this object will tell angular how our directive behaves
+    return {
+        // only allow esriFeatureLayer to be used as an element (<esri-feature-layer>)
+        restrict: 'E',
+
+        // require the esriFeatureLayer to have its own controller as well an esriMap controller
+        // you can access these controllers in the link function
+        require: ['esriFeatureLayer', '^esriMap'],
+
+        // replace this element with our template.
+        // since we aren't declaring a template this essentially destroys the element
+        replace: true,
+
+        // define an interface for working with this directive
+        controller: function ($scope, $element, $attrs) {
+            var layerDeferred = $q.defer();
+
+            require([
+                'esri/layers/FeatureLayer'], function (FeatureLayer) {
+                var layer = new FeatureLayer($attrs.url);
+
+                layerDeferred.resolve(layer);
+            });
+
+            // return the defered that will be resolved with the feature layer
+            this.getLayer = function () {
+                return layerDeferred.promise;
+            };
+        },
+
+        // now we can link our directive to the scope, but we can also add it to the map..
+        link: function (scope, element, attrs, controllers) {
+            // controllers is now an array of the controllers from the 'require' option
+            var layerController = controllers[0];
+            var mapController = controllers[1];
+
+            layerController.getLayer().then(function (layer) {
+                // add layer
+                mapController.addLayer(layer);
+
+                //look for layerInfo related attributes. Add them to the map's layerInfos array for access in other components
+                mapController.addLayerInfo({
+                  title: attrs.title || layer.name,
+                  layer: layer,
+                  hideLayers: (attrs.hideLayers) ? attrs.hideLayers.split(',') : undefined,
+                  defaultSymbol: (attrs.defaultSymbol) ? JSON.parse(attrs.defaultSymbol) : true
+                });
+
+                // return the layer
+                return layer;
+            });
+        }
+    };
+});
+
+/**
+ * @ngdoc directive
+ * @name esriApp.directive:esriLegend
+ * @description
+ * # esriLegend
+ */
+angular.module('esri.map')
+  .directive('esriLegend', function ($document, $q) {
+    return {
+      //run last
+      priority: -10,
+      scope:{},
+      replace: true,
+      // require the esriMap controller
+      // you can access these controllers in the link function
+      require: ['^esriMap'],
+
+      // now we can link our directive to the scope, but we can also add it to the map..
+      link: function(scope, element, attrs, controllers){
+        // controllers is now an array of the controllers from the 'require' option
+        var mapController = controllers[0];
+        var targetId = attrs.targetId || attrs.id;
+        var legendDeferred = $q.defer();
+
+        require(['esri/dijit/Legend', 'dijit/registry'], function (Legend, registry) {
+          mapController.getMap().then(function(map) {
+            var opts = {
+                map: map
+            };
+            var layerInfos = mapController.getLayerInfos();
+            if (layerInfos) {
+              opts.layerInfos = layerInfos;
+            }
+            // NOTE: need to come up w/ a way to that is not based on id
+            // or handle destroy at end of this view's lifecyle
+            var legend = registry.byId(targetId);
+            if (legend) {
+              legend.destroyRecursive();
+            }
+            legend = new Legend(opts, targetId);
+            legend.startup();
+            scope.layers = legend.layers;
+            angular.forEach(scope.layers, function(layer, i) {
+              scope.$watch('layers['+i+'].renderer',function() {
+                legend.refresh();
+              });
+            });
+            legendDeferred.resolve(legend);
+          });
+        });
+      }
+    };
+  });

examples/simple-map.html

@@ -18,9 +18,8 @@
         <script type="text/javascript" src="http://js.arcgis.com/3.11compact"></script>
         <!-- load Angular -->
         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
-        <!-- load angular-esri-map directive(s) -->
-        <!-- TODO: reference dist once we have a build -->
-        <script src="../src/directives/esriMap.js"></script>
+        <!-- load angular-esri-map directives -->
+        <script src="../dist/angular-esri-map.js"></script>
         <script type="text/javascript">
             angular.module('simple-map-example', ['esri.map'])
                 .controller('SimpleMapController', function ($scope) {

gulpfile.js

@@ -0,0 +1,40 @@
+var gulp = require('gulp');
+var jshint = require('gulp-jshint');
+var clean = require('gulp-clean');
+var concat = require('gulp-concat');
+var ngAnnotate = require('gulp-ng-annotate');
+var uglify = require('gulp-uglify');
+var debug = require('gulp-debug');
+var rename = require('gulp-rename');
+var stripDebug = require('gulp-strip-debug');
+var runSequence = require('run-sequence');
+var gutil = require('gulp-util');
+
+gulp.task('lint', function() {
+  return gulp.src('src/**/*.js')
+    .pipe(jshint())
+    .pipe(jshint.reporter('default'));
+});
+
+gulp.task('clean', function() {
+  return gulp.src('dist')
+    .pipe(clean({force: true}));
+});
+
+gulp.task('build-js', function() {
+  return gulp.src(['src/directives/esriMap.js',
+    'src/directives/esriFeatureLayer.js',
+    'src/directives/esriLegend.js'])
+    .pipe(concat('angular-esri-map.js'))
+    .pipe(gulp.dest('dist'))
+    .pipe(stripDebug())
+    .pipe(ngAnnotate())
+    .pipe(uglify())
+    .pipe(rename('angular-esri-map.min.js'))
+    .pipe(gulp.dest('dist'))
+    .on('error', gutil.log);
+});
+
+gulp.task('build', function(callback) {
+  runSequence('lint', 'clean', 'build-js', callback);
+});

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "angular-esri-map",
+  "version": "0.0.0",
+  "description": "A collection of directives to help you use Esri maps and servies in an Angular app",
+  "main": "dist/angular-esri-map.js",
+  "directories": {
+    "example": "examples"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "gulp": "^3.8.9",
+    "gulp-clean": "~0.3.0",
+    "gulp-concat": "~2.2.0",
+    "gulp-debug": "^1.0.1",
+    "gulp-jshint": "^1.8.5",
+    "gulp-ng-annotate": "^0.3.3",
+    "gulp-rename": "~1.2.0",
+    "gulp-strip-debug": "~0.3.0",
+    "gulp-uglify": "~0.3.0",
+    "gulp-util": "~2.2.16",
+    "run-sequence": "~0.3.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Esri/angular-esri-map.git"
+  },
+  "keywords": [
+    "Angular",
+    "Esri"
+  ],
+  "author": "Tom Wayson <[email protected]> (http://tomwayson.com)",
+  "contributors": [
+    "Patrick Arlt <[email protected]> (http://patrickarlt.com)",
+    "Matt Priour <[email protected]> (https://github.com/mpriour)",
+    "Tom Wayson <[email protected]> (http://tomwayson.com)"
+  ],
+  "license": "Apache",
+  "bugs": {
+    "url": "https://github.com/Esri/angular-esri-map/issues"
+  },
+  "homepage": "https://github.com/Esri/angular-esri-map"
+}