Any ionic/AngularJS client examples using the particle-api-js available?

Cloud
1

I am working on an ionic app for a project I am getting way too deep into but can’t find any code using the new particle-api-js. I have figured out that I need to inject it as an Angular module but I am new to all things mobile app/ionic. If I can get this figured out I will package it and make it available in bower for others or submit it as a PR to Particle. I think this would be really helpful for people that want to use Ionic to create hybrid apps instead of having to build multiple apps for the leading mobile platforms. Any pointers would be greatly appreciated!

2

Haven’t got any experience with Ionic but it seems as though you can just include the library without having to mess with Angular. http://stackoverflow.com/questions/26496451/where-to-include-js-libraries-in-ionic
I’ve been using it in combination with AngularJS on this page, should that help.

3

Yeah I see how to include it in my app but how do I call functions from the lib in my app? Is it particle/Particle or what? I know this is my lack of knowledge but examples I have seen of other JavaScript libs being injected into Ionic/AngularJS requires an angular module like this https://gonzalo123.com/2015/03/02/building-a-angularjs-provider-for-hello-js-library/ I just found this one this am so still parsing this through my brain but it looks to show a very similar usecase so hoping I can employ this method so it is testable, resuable and doesn’t bind to $scope as my research has shown is a no-no. Funny enough the lib got updated since I started this.

4

I’m not proficient in Angular whatsoever (a bit of a steep learning curve, but I’m trying to learn by doing ;)), but my page seems to work without injecting anything.

var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);

var particle = new Particle();
var accessToken;

app.controller('AppCtrl', ['$scope', '$mdBottomSheet','$mdSidenav', '$mdDialog', '$mdToast', function($scope, $mdBottomSheet, $mdSidenav, $mdDialog, $mdToast){

// code here
}]);

Again, no idea if that’s the ‘right’ way of doing things, but it certainly works :smile:

5

I am the same way so I understand your method and Thanks! I will see if I can get the same to kick off in Ionic. If I do I will post what I come up with.

1 Like
6

Belated follow up. I’ve had a crack at this. :slight_smile: Added:

<script src="assets/scripts/particleApi.js"></script>

into index.html. And dropped the contents of http://cdn.jsdelivr.net/npm/particle-api-js@7/dist/particle.min.js into the file.

So during compilation, the stuff inside the assets folder gets copied into www/assets. that works nicely. In my actual code, I had to add declare var Particle; above my component, or else it shows an error. The error goes away, but Ioinic still doesn’t have any clue what Particle is, which is painful given the number of lengthy functions in it: no autofill!

var particleOptions = {
  clientSecret: 'ReallySecret',
  clientId: 'particle-api',
  tokenDuration: 7776000 // 90 days
};

var particleApi = new Particle(particleOptions);

particleApi.setContext({'client_id' : 'myClientID'});
console.dir(this.particleApi);

compiles and works. The defaults are overridden as expected. Well, actually I had no idea what to expect.

Disclaimer. I have absolutely no clue what I’m doing, but the following seemed to work:

this.particleApi.login({username:'al@email.com', password: 'reallySecret'})
  .then(function(result){
    console.log("Your access Token is: " + result.body.access_token);
  }, function(err) {
    console.log("Oh, balls. Error = " + err);
  })

It gave me a valid token, which is great! So, maybe this is helpful for others. For my next steps:

  1. The setContext function did nothing. What’s it for? Thought it might overwrite various values.
  2. What’s all this ‘context’ business. It’s all over the js functions.
  3. Is the structure of the Particle object explained anywhere?

Time to wander blindly into the dark. Further.

monkey

7

Hey. I’ve made some mediocre progress in Ionic with the particle-api-js. But I wanted to ask you, in your opinion, is it worthwhile going the whole hog and writing a module so the whole thing will work properly in ionic? In saying that, I’ve never done that before, so I have no idea how big a job it would be!

Cheers,