adapted syntax to documentation

plugins/iconmap/cumulocity.json

@@ -1,12 +1,12 @@
 {
   "name": "Icon Map",
   "description": "Shows devices on a map using an icon for the device type.",
-  "ngModules": [ "myapplication.iconmap" ],
-  "js": [
-      "iconmap.config.js",
-      "iconmap.controller.js"
+  "ngModules": [
+    "myapp.iconmap"
   ],
-  "imports": [],
-  "css": [],
-  "copy": []
+  "js": [
+    "iconmap.module.js",
+    "iconmap.config.js",
+    "iconmap.controller.js"
+  ]
 }

plugins/iconmap/iconmap.config.js

@@ -1,19 +1,25 @@
-(function wrapper() {
+(function () {
   'use strict';
-  /* global angular */
 
-  var app = angular.module('myapplication.iconmap', []);
+  angular
+    .module('myapp.iconmap')
+    .config(configure);
 
-  configure.$inject = [ 'c8yComponentsProvider', 'gettext' ];
-  app.config(configure);
+  configure.$inject = [
+    'c8yComponentsProvider',
+    'gettext'
+  ];
 
-  function configure(c8yComponentsProvider, gettext) {
-    c8yComponentsProvider.add({
-      name: 'Icon Map',
-      nameDisplay: gettext('Icon Map'),
-      description: gettext('Displays a map with icons for devices instead of markers'),
-      templateUrl: ':::PLUGIN_PATH:::/views/iconmap.main.html',
+  function configure(
+    c8yComponentsProvider,
+    gettext
+  ) {
+    c8yComponentsProvider.add({ // adds a menu item to the widget menu list with ...
+      name: 'Icon Map', // ... the name *"Icon Map"*
+      nameDisplay: gettext('Icon Map'), // ... the displayed name *"Icon Map"*
+      description: gettext('Displays a map with icons for devices instead of markers'), // ... a description
+      templateUrl: ':::PLUGIN_PATH:::/views/iconmap.main.html', // ... displaying *"iconmap.main.html"* when added to the dashboard
       options: { noDeviceTarget: true }
     });
   }
-})();
+}());

plugins/iconmap/iconmap.controller.js

@@ -1,13 +1,23 @@
-(function wrapper() {
+(function () {
   'use strict';
-  /* global angular */
 
-  var app = angular.module('myapplication.iconmap');
-
-  iconmapController.$inject = [ '$scope', '$q', 'c8yInventory', 'c8yBinary' ];
-  app.controller('iconmapController', iconmapController);
-
-  function iconmapController($scope, $q, c8yInventory, c8yBinary) {
+  angular
+    .module('myapp.iconmap')
+    .controller('iconmapController', iconmapController);
+
+  iconmapController.$inject = [
+    '$scope',
+    '$q',
+    'c8yInventory',
+    'c8yBinary'
+  ];
+
+  function iconmapController(
+    $scope,
+    $q,
+    c8yInventory,
+    c8yBinary
+  ) {
     $scope.markers = [];
 
     var getDevicesAndBinaries = {
@@ -89,4 +99,4 @@
       $scope.markers.push(marker);
     }
   }
-})();
+}());

plugins/iconmap/iconmap.module.js

@@ -0,0 +1,5 @@
+(function () {
+  'use strict';
+
+  angular.module('myapp.iconmap', []);
+}());

plugins/weather/cumulocity.json

@@ -4,7 +4,7 @@
   "category": "Widgets",
   "icon": "cloud",
   "ngModules": [
-    "myapplication.weather"
+    "myapp.weather"
   ],
   "imports": [
     "myapplication/weatherService"

plugins/weather/weather.config.js

@@ -1,18 +1,24 @@
-(function wrapper() {
+(function () {
   'use strict';
-  /* global angular */
 
-  var app = angular.module('myapplication.weather', [ 'myapplication.weatherService' ]);
+  angular
+    .module('myapp.weather', [ 'myapp.weatherService' ])
+    .config(configure);
 
-  configure.$inject = [ 'c8yComponentsProvider', 'gettext' ];
-  app.config(configure);
+  configure.$inject = [
+    'c8yComponentsProvider',
+    'gettext'
+  ];
 
-  function configure(c8yComponentsProvider, gettext) {
-    c8yComponentsProvider.add({
-      name: 'weather',
-      nameDisplay: gettext('Weather'),
-      description: gettext('Shows the current weather at the location of a device'),
-      templateUrl: ':::PLUGIN_PATH:::/views/weather.main.html'
+  function configure(
+    c8yComponentsProvider,
+    gettext
+  ) {
+    c8yComponentsProvider.add({ // adds a menu item to the widget menu list with ...
+      name: 'weather', // ... the name *"weather"*
+      nameDisplay: gettext('Weather'), // ... the displayed name *"weather"*
+      description: gettext('Shows the current weather at the location of a device'), // ... a description
+      templateUrl: ':::PLUGIN_PATH:::/views/weather.main.html' // ... displaying *"iconmap.main.html"* when added to the dashboard
     });
   }
-})();
+}());

plugins/weather/weather.controller.js

@@ -1,13 +1,25 @@
-(function wrapper() {
+(function () {
   'use strict';
-  /* global angular */
 
-  var app = angular.module('myapplication.weather');
+  angular
+  .module('myapp.weather')
+  .controller('weatherController', weatherController);
 
-  weatherController.$inject = [ '$scope', '$q', 'weatherService', 'gettext', 'c8yInventory' ];
-  app.controller('weatherController', weatherController);
+  weatherController.$inject = [
+    '$scope',
+    '$q',
+    'weatherService',
+    'gettext',
+    'c8yInventory'
+  ];
 
-  function weatherController($scope, $q, weatherService, gettext, c8yInventory) {
+  function weatherController(
+    $scope,
+    $q,
+    weatherService,
+    gettext,
+    c8yInventory
+  ) {
     $scope.$watch('child.config.device', function reInit(newVal, oldVal) {
       if (newVal && !angular.equals(newVal, oldVal)) {
         init();
@@ -65,4 +77,4 @@
       return 'rotate(' + direction + 'deg)';
     }
   }
-})();
+}());

plugins/weatherAdmin/cumulocity.json

@@ -3,8 +3,12 @@
   "description": "Configure the API key for weather forecasts",
   "icon": "cloud",
   "category": "Administrator",
-  "ngModules": [ "myapplication.weatherAdmin" ],
-  "imports": [ "myapplication/weatherService" ],
+  "ngModules": [
+    "myapp.weatherAdmin"
+  ],
+  "imports": [
+    "myapplication/weatherService"
+  ],
   "js": [
     "weatheradmin.config.js",
     "weatheradmin.controller.js"

plugins/weatherAdmin/weatheradmin.config.js

@@ -1,21 +1,30 @@
-(function wrapper() {
+(function () {
   'use strict';
-  /* global angular */
 
-  var app = angular.module('myapplication.weatherAdmin', [ 'myapplication.weatherService' ]);
-  configure.$inject = [ 'c8yNavigatorProvider', 'c8yViewsProvider', 'gettext' ];
-  app.config(configure);
+  angular
+  .module('myapp.weatherAdmin', [ 'myapp.weatherService' ])
+  .config(configure);
 
-  function configure(c8yNavigatorProvider, c8yViewsProvider, gettext) {
-    c8yNavigatorProvider.addNavigation({
-      parent: gettext('Settings'),
-      name: gettext('Weather'),
-      path: 'weather',
-      icon: 'cloud'
+  configure.$inject = [
+    'c8yNavigatorProvider',
+    'c8yViewsProvider',
+    'gettext'
+  ];
+
+  function configure(
+    c8yNavigatorProvider,
+    c8yViewsProvider,
+    gettext
+  ) {
+    c8yNavigatorProvider.addNavigation({ // adds a menu item to the navigator with ...
+      parent: gettext('Settings'), // ... the category *"Settings"*
+      name: gettext('Weather'), // ... the name *"Weather"*
+      path: 'weather', // ... */weather* as path
+      icon: 'cloud' // ... the cloud icon (icons are provided by the great Font Awesome library and you can use any of their [icon names](http://fontawesome.io/icons/) without the *fa-* prefix here
     });
 
-    c8yViewsProvider.when('/weather', {
-      templateUrl: ':::PLUGIN_PATH:::/views/weatherAdmin.html'
+    c8yViewsProvider.when('/weather', { // when the path "/weather" is accessed ...
+      templateUrl: ':::PLUGIN_PATH:::/views/weatherAdmin.html' //  ... display our html file "weatheAdmin.html" inside the "views" folder of our plugin (the plugin's folder is represented using the magic string ```:::PLUGIN_PATH:::```, which is replaced by the actual path during the build process)
     });
   }
-})();
+}());

plugins/weatherAdmin/weatheradmin.controller.js

@@ -1,12 +1,22 @@
-(function wrapper() {
+(function () {
   'use strict';
-  /* global angular */
 
-  var app = angular.module('myapplication.weatherAdmin');
-  weatherAdminController.$inject = [ '$scope', 'c8yTitle', 'weatherService', 'gettext' ];
-  app.controller('weatherAdminController', weatherAdminController);
+  angular
+    .module('myapp.weatherAdmin')
+    .controller('weatherAdminController', weatherAdminController);
 
-  function weatherAdminController($scope, c8yTitle, weatherService, gettext) {
+  weatherAdminController.$inject = [
+    '$scope',
+    'c8yTitle',
+    'weatherService',
+    'gettext'
+  ];
+
+  function weatherAdminController(
+    $scope, c8yTitle,
+    weatherService,
+    gettext
+  ) {
     $scope.updateKey = updateKey;
     weatherService.load().then(function setOpt(key) {
       $scope.key = key;
@@ -20,4 +30,4 @@
       weatherService.save($scope.key);
     }
   }
-})();
+}());

plugins/weatherService/cumulocity.json

@@ -2,12 +2,17 @@
   "name": "Weather service plugin",
   "description": "Weather service based on darksky.net",
   "icon": "cloud",
-  "ngModules": [ "myapplication.weatherService" ],
+  "ngModules": [
+    "myapp.weatherService"
+  ],
   "js": [
       "angular-dark-sky/angular-dark-sky.min.js",
       "weatherService.js"
   ],
-  "imports": [],
-  "less": [ "weather.less" ],
-  "copy": [ "weather-icons/font" ]
+  "less": [
+    "weather.less"
+  ],
+  "copy": [
+    "weather-icons/font"
+  ]
 }

plugins/weatherService/weatherService.js

@@ -1,21 +1,33 @@
-(function wrapper() {
+(function () {
   'use strict';
-  /* global angular */
 
-  var app = angular.module('myapplication.weatherService', [ 'dark-sky' ]);
+  angular
+  .module('myapp.weatherService', [ 'dark-sky' ])
+  .config(configure)
+  .service('weatherService', WeatherService);
 
-  configure.$inject = [ 'darkSkyProvider' ];
-  app.config(configure);
+  configure.$inject = [
+    'darkSkyProvider'
+  ];
 
-  function configure(darkSkyProvider) {
+  function configure(
+    darkSkyProvider
+  ) {
     darkSkyProvider.setUnits('si');
     app.darkSkyProvider = darkSkyProvider;
   }
 
-  WeatherService.$inject = [ '$q', 'darkSky', 'c8ySettings' ];
-  app.service('weatherService', WeatherService);
+  WeatherService.$inject = [
+    '$q',
+    'darkSky',
+    'c8ySettings'
+  ];
 
-  function WeatherService($q, darkSky, c8ySettings) {
+  function WeatherService(
+    $q,
+    darkSky,
+    c8ySettings
+  ) {
     var self = this;
     self.$q = $q;
     self.weather = darkSky;
@@ -43,4 +55,4 @@
     self.c8ySettings.updateOption(self.option);
     app.darkSkyProvider.setApiKey(apiKey);
   };
-})();
+}());