AngularJS Philips Hue Project

Question

I started working on a little AngularJS - Philips Hue project and I'm kinda stuck...

I'm fairly new to AngularJS... but here goes.

What I want to do is to list the lamps I have, the status of the lamps and a toggler to switch them.

I decided to build a factory (based on this article: http://davidsalter.com/2013/08/16/using-angular-dot-js-factories-to-get-remote-data/) for the data getting/putting:

app.factory('lampsFactory', function($http) {
  return {
      getLamps: function(callback) {
          $http.get('http://172.16.0.2/api/newdeveloper/lights').success(callback);
      },
      getLampState: function(callback, lampID) {
          $http.get('http://172.16.0.2/api/newdeveloper/lights/'+ lampID).success(callback);
      }
  };
});

The getLamps function works as it should but I don't know how to get lamp data based on an id. I tried to add an extra paremeter but that did not work.

Can you please help me and push me in the right direction?

I also have a plunker: http://plnkr.co/edit/ySa0PVBahM7sxU4lasgP

Thanks!

Can you expand on this statement: `but that did not work`? You're not receiving the ID at the API access point? If that's the case, did you make sure the AJAX request is correctly passing the ID? — Jasper, Feb 28 '14 at 21:15
Ive changed my code so `getLampState: function(callback, lampID) { $http.get('http://172.16.0.2/api/newdeveloper/lights/'+ lampID).success(callback); }` and my controller function to: `$scope.getLampState = function(taskId){ lampsFactory.getLampState(function(results) { console.log(results.state.on); return results.state.on; },taskId); };` and it works! The only thing that does not work is the ng-repeat code: `{{getLampState($index + 1)}` It will keep repeating the getLampState function... — svh1985, Feb 28 '14 at 22:20

score 0 · Accepted Answer · answered Mar 01 '14 at 14:59

I've change the code to:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, lampsFactory) {

  lampsFactory.getLamps(function(results) {
      $scope.lamps = results;
  });

  $scope.getLampState = function(lampID){
    lampsFactory.getLampState(function(results) {
      console.log(results.state.on);
      return results.state.on;
  },lampID);
  };


});

app.factory('lampsFactory', function($http) {
  return {
      getLamps: function(callback) {
          $http.get('http://172.16.0.2/api/newdeveloper/lights').success(callback);
      },
      getLampState: function(callback, lampID) {
          $http.get('http://172.16.0.2/api/newdeveloper/lights/'+ lampID).success(callback);
      }
  };
});

and it works! Thanks!

AngularJS Philips Hue Project

1 Answers1