Angular code review request

Hello,

I’m learning Angular and have created an enhanced version of the OWM widget. Before I release it, I would appreciate if someone with Angular knowledge can review the code.

I’ve used $interval to trigger the first load, there must be antother way of doing this? And I used $interval to retrieve fresh data every x seconds. There’s probably an existing trigger from OH where I can hook on to refresh.

Any other suggestions?

Are you using your own controller? HabPanel broadcasts the item update on rootscope are you can see here so the only thing you need is do a $rootScope.$on(...)

You do not need to use any interval based logic. Let OHService do it for you. It opens an EvenSource to OH’s /rest/events and broadcasts the changes. You can see I do the same thing here

I also took a quick look at your code:

		$interval(function() {			// First load
				loadOwmForecast();
		}, 500, 1);

you’r redeclaring a function that calls another function. Just pass it directly

$interval(loadOwmForecast, 500, 1)

And I’m not entirely sure what you’re tying to do in the controller. Looks like I could have done all that in the template (HTML) with proper ng-repeat and getItem calls?

1 Like

What Lucky says, and

I suppose you can just call your function without the $interval, directly in the controller.
I assume the controller is just to call mostly for getClosest()

Not too important, you can replace:

var hours = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48, 41, 54, 57, 60, 63, 66, 69, 72, 75, 78, 81, 84, 87, 90, 93, 96];

by something like:

Array.from(Array(24).keys(), (h) => (h+1)*3)

Thank you both for your input.

I have implemented the $rootScope so my main function loadOwmForecast() gets fired when an item changes.

Somehow in my build process I suddenly have non working controller. My widget HTML is like:

<div oc-lazy-load="['/static/openweathermap/owm.controller.js']">
  <div ng-controller="ngOwmCtrl">
    <div class="row owm-row-current">
    </div>
  </div>
</div>

And my controller like:

(function() {
console.log("Logged 1");
  'use strict';
  angular
  .module('app.widgets.owm', ['widget.owm.core'])
  .controller('ngOwmCtrl', ngOwmCtrl);
  console.log("Logged 2");
  ngOwmCtrl.$inject = ['$rootScope', '$scope', 'OHService'];
  console.log("Logged 3");
  function ngOwmCtrl($rootScope, $scope, OHService) { 
	console.log("Not logged");
        //rest of code
  }; 
})();

The console log output of “Not logged” is not shown in the browser debugger. Somehow it isn’t loading my controller anymore.

Any idea’s?

Found it, needed to this:

.module('app.widgets.owm', ['widget.owm.core'])

To:

.module('app.widgets.owm', [])

Going to publish the new widget, thanks!