Directive to component for examples

examples/animation.js

@@ -15,28 +15,22 @@ app.module = angular.module('app', ['ngeo']);
 
 
 /**
- * App-specific directive wrapping the ngeo map directive. The directive's
+ * App-specific component wrapping the ngeo map component. The component's
  * controller has a property "map" including a reference to the OpenLayers
  * map.
  *
- * @return {angular.Directive} The directive specs.
- * @ngInject
+ * @type {!angular.Component}
  */
-app.mapDirective = function() {
-  return {
-    restrict: 'E',
-    scope: {
-      'map': '=appMap',
-      'class': '=appMapClass'
-    },
-    controller: () => {},
-    bindToController: true,
-    template: '<div ngeo-map="$ctrl.map"></div>'
-  };
+app.mapComponent = {
+  bindings: {
+    'map': '=appMap',
+    'class': '=appMapClass'
+  },
+  template: '<div ngeo-map="$ctrl.map"></div>'
 };
 
 
-app.module.directive('appMap', app.mapDirective);
+app.module.component('appMap', app.mapComponent);
 
 
 /**

examples/backgroundlayer.js

@@ -18,33 +18,29 @@ app.module = angular.module('app', ['ngeo']);
 
 
 /**
- * The application-specific background layer directive.
+ * The application-specific background layer component.
  *
- * The directive is based on Angular's select, ngOptions, ngModel, and
- * ngChange directives. ngChange is used to avoid adding a watcher on
+ * The component is based on Angular's select, ngOptions, ngModel, and
+ * ngChange components. ngChange is used to avoid adding a watcher on
  * the ngModel expression.
  *
  * Note: we don't need two-way binding for ngModel here, but using ::
  * for the ngModel expression doesn't actually make a difference. This
  * is because ngModel doesn't actually watch the ngModel expression.
  *
- * @return {angular.Directive} Directive Definition Object.
- * @ngInject
+ * @type {!angular.Component}
  */
-app.backgroundlayerDirective = function() {
-  return {
-    restrict: 'E',
-    scope: {
-      'map': '=appBackgroundlayerMap'
-    },
-    templateUrl: 'partials/backgroundlayer.html',
-    bindToController: true,
-    controller: 'AppBackgroundlayerController as ctrl'
-  };
+app.backgroundlayerComponent = {
+  bindings: {
+    'map': '=appBackgroundlayerMap'
+  },
+  templateUrl: 'partials/backgroundlayer.html',
+  controller: 'AppBackgroundlayerController',
+  controllerAs: 'ctrl'
 };
 
 
-app.module.directive('appBackgroundlayer', app.backgroundlayerDirective);
+app.module.component('appBackgroundlayer', app.backgroundlayerComponent);
 
 
 /**

examples/backgroundlayerdropdown.js

@@ -18,28 +18,24 @@ app.module = angular.module('app', ['ngeo']);
 
 
 /**
- * The application-specific background layer directive.
+ * The application-specific background layer component.
  *
- * The directive is based on Bootstrap's dropdown jQuery plugin and on
+ * The component is based on Bootstrap's dropdown jQuery plugin and on
  * the ngeoBackgroundLayerMgr service.
  *
- * @return {angular.Directive} Directive Definition Object.
- * @ngInject
+ * @type {!angular.Component}
  */
-app.backgroundlayerDirective = function() {
-  return {
-    restrict: 'E',
-    scope: {
-      'map': '=appBackgroundlayerMap'
-    },
-    templateUrl: 'partials/backgroundlayerdropdown.html',
-    bindToController: true,
-    controller: 'AppBackgroundlayerController as ctrl'
-  };
+app.backgroundlayerComponent = {
+  bindings: {
+    'map': '=appBackgroundlayerMap'
+  },
+  templateUrl: 'partials/backgroundlayerdropdown.html',
+  controller: 'AppBackgroundlayerController',
+  controllerAs: 'ctrl'
 };
 
 
-app.module.directive('appBackgroundlayer', app.backgroundlayerDirective);
+app.module.component('appBackgroundlayer', app.backgroundlayerComponent);
 
 
 /**

examples/bboxquery.js

@@ -28,22 +28,17 @@ app.module.value('ngeoQueryOptions', {
 
 
 /**
- * A sample directive to display the result.
+ * A sample component to display the result.
  *
- * @return {angular.Directive} The directive specs.
- * @ngInject
+ * @type {!angular.Component}
  */
-app.queryresultDirective = function() {
-  return {
-    restrict: 'E',
-    scope: {},
-    controller: 'AppQueryresultController as qrCtrl',
-    bindToController: true,
-    templateUrl: 'partials/queryresult.html'
-  };
+app.queryresultComponent = {
+  controller: 'AppQueryresultController',
+  controllerAs: 'qrCtrl',
+  templateUrl: 'partials/queryresult.html'
 };
 
-app.module.directive('appQueryresult', app.queryresultDirective);
+app.module.component('appQueryresult', app.queryresultComponent);
 
 
 /**

examples/colorpicker.js

@@ -11,24 +11,19 @@ app.module = angular.module('app', ['ngeo']);
 
 
 /**
- * The application-specific color picker directive, based on the
- * ngeo-colorpicker directive.
+ * The application-specific color picker component, based on the
+ * ngeo-colorpicker component.
  *
- * @return {angular.Directive} Directive Definition Object.
- * @ngInject
+ * @type {!angular.Component}
  */
-app.colorpickerDirective = function() {
-  return {
-    restrict: 'E',
-    scope: true,
-    template: '<div ngeo-colorpicker="ctrl.colors" ngeo-colorpicker-color="mainCtrl.color"></div>',
-    bindToController: true,
-    controller: 'AppColorpickerController as ctrl'
-  };
+app.colorpickerComponent = {
+  template: '<div ngeo-colorpicker="ctrl.colors" ngeo-colorpicker-color="mainCtrl.color"></div>',
+  controller: 'AppColorpickerController',
+  controllerAs: 'ctrl'
 };
 
 
-app.module.directive('appColorpicker', app.colorpickerDirective);
+app.module.component('appColorpicker', app.colorpickerComponent);
 
 
 /**

examples/layertree.js

@@ -24,32 +24,29 @@ app.module = angular.module('app', ['ngeo']);
 
 
 /**
- * An application-specific directive wrapping the ngeo tree layer directive.
- * The directive includes a controller defining the tree tree.
- * @return {angular.Directive} The Directive Definition Object.
- * @ngInject
+ * An application-specific component wrapping the ngeo tree layer component.
+ * The component includes a controller defining the tree tree.
+ *
+ * @type {!angular.Component}
  */
-app.layertreeDirective = function() {
-  return {
-    restrict: 'E',
-    scope: {
-      'map': '=appLayertreeMap'
-    },
-    controller: 'AppLayertreeController as ctrl',
-    bindToController: true,
-    // use "::ctrl.tree" for the "tree" expression as we know the
-    // layer tree won't change
-    template:
-        '<div ngeo-layertree="::ctrl.tree" ' +
-        'ngeo-layertree-templateurl="partials/layertree.html" ' +
-        'ngeo-layertree-map="ctrl.map" ' +
-        'ngeo-layertree-nodelayer="ctrl.getLayer(node)">' +
-        '</div>'
-  };
+app.layertreeComponent = {
+  bindings: {
+    'map': '=appLayertreeMap'
+  },
+  controller: 'AppLayertreeController',
+  controllerAs: 'ctrl',
+  // use "::ctrl.tree" for the "tree" expression as we know the
+  // layer tree won't change
+  template:
+      '<div ngeo-layertree="::ctrl.tree" ' +
+      'ngeo-layertree-templateurl="partials/layertree.html" ' +
+      'ngeo-layertree-map="ctrl.map" ' +
+      'ngeo-layertree-nodelayer="ctrl.getLayer(node)">' +
+      '</div>'
 };
 
 
-app.module.directive('appLayertree', app.layertreeDirective);
+app.module.component('appLayertree', app.layertreeComponent);
 
 
 /**

examples/locationsearch.js

@@ -17,27 +17,23 @@ app.module = angular.module('app', [ngeo.module.name]);
 
 
 /**
- * @return {angular.Directive} Directive Definition Object.
- * @ngInject
+ * @type {!angular.Component}
  */
-app.locationSearchDirective = function() {
-  return {
-    restrict: 'E',
-    scope: {
-      'map': '=appSearchMap'
-    },
-    controller: 'AppSearchController as ctrl',
-    bindToController: true,
-    template:
-        '<input type="text" placeholder="Search…" ' +
-        'ngeo-search="ctrl.options" ' +
-        'ngeo-search-datasets="ctrl.datasets" ' +
-        'ngeo-search-listeners="ctrl.listeners">'
-  };
+app.locationSearchComponent = {
+  bindings: {
+    'map': '=appSearchMap'
+  },
+  controller: 'AppSearchController',
+  controllerAs: 'ctrl',
+  template:
+      '<input type="text" placeholder="Search…" ' +
+      'ngeo-search="ctrl.options" ' +
+      'ngeo-search-datasets="ctrl.datasets" ' +
+      'ngeo-search-listeners="ctrl.listeners">'
 };
 
 
-app.module.directive('appLocationSearch', app.locationSearchDirective);
+app.module.component('appLocationSearch', app.locationSearchComponent);
 
 
 /**

examples/mapquery.js

@@ -29,22 +29,17 @@ app.module.value('ngeoQueryOptions', {
 
 
 /**
- * A sample directive to display the result.
+ * A sample component to display the result.
  *
- * @return {angular.Directive} The directive specs.
- * @ngInject
+ * @type {!angular.Component}
  */
-app.queryresultDirective = function() {
-  return {
-    restrict: 'E',
-    scope: {},
-    controller: 'AppQueryresultController as qrCtrl',
-    bindToController: true,
-    templateUrl: 'partials/queryresult.html'
-  };
+app.queryresultComponent = {
+  controller: 'AppQueryresultController',
+  controllerAs: 'qrCtrl',
+  templateUrl: 'partials/queryresult.html'
 };
 
-app.module.directive('appQueryresult', app.queryresultDirective);
+app.module.component('appQueryresult', app.queryresultComponent);
 
 
 /**

examples/measure.html

@@ -53,7 +53,7 @@
   </head>
   <body ng-controller="MainController as ctrl">
     <div id="map" ngeo-map="::ctrl.map"></div>
-    <div app-measuretools app-measuretools-map="::ctrl.map" app-measuretools-lang="ctrl.lang"></div>
+    <app-measuretools app-measuretools-map="::ctrl.map" app-measuretools-lang="ctrl.lang"></app-measuretools>
     <p>Use the following selector to change the language used for the measure tooltips.</p>
     <label>Select language:</label>
     <select ng-options="lang for lang in ['en', 'fr']" ng-model="ctrl.lang"></select>

examples/measure.js

@@ -26,36 +26,23 @@ app.module = angular.module('app', ['ngeo']);
 
 
 /**
- * App-specific directive wrapping the measure tools. The directive's
+ * App-specific component wrapping the measure tools. The component's
  * controller has a property "map" including a reference to the OpenLayers
  * map.
  *
- * @return {angular.Directive} The directive specs.
- * @ngInject
+ * @type {!angular.Component}
  */
-app.measuretoolsDirective = function() {
-  return {
-    restrict: 'A',
-    scope: {
-      'map': '=appMeasuretoolsMap',
-      'lang': '=appMeasuretoolsLang'
-    },
-    controller: 'AppMeasuretoolsController as ctrl',
-    bindToController: true,
-    templateUrl: 'partials/measuretools.html',
-    /**
-     * @param {angular.Scope} scope Scope.
-     * @param {angular.JQLite} element Element.
-     * @param {angular.Attributes} attrs Attributes.
-     * @param {app.MeasuretoolsController} controller Controller.
-     */
-    link: (scope, element, attrs, controller) => {
-      controller.init();
-    }
-  };
+app.measuretoolsComponent = {
+  bindings: {
+    'map': '=appMeasuretoolsMap',
+    'lang': '=appMeasuretoolsLang'
+  },
+  controller: 'AppMeasuretoolsController',
+  controllerAs: 'ctrl',
+  templateUrl: 'partials/measuretools.html'
 };
 
-app.module.directive('appMeasuretools', app.measuretoolsDirective);
+app.module.component('appMeasuretools', app.measuretoolsComponent);
 
 
 /**
@@ -225,7 +212,7 @@ app.MeasuretoolsController = function($scope, $compile, $sce,
 
 app.module.controller('AppMeasuretoolsController', app.MeasuretoolsController);
 
-app.MeasuretoolsController.prototype.init = function() {
+app.MeasuretoolsController.prototype.$onInit = function() {
   this.map.addInteraction(this.measureLength);
   this.map.addInteraction(this.measureArea);
   this.map.addInteraction(this.measureAzimut);