AngularJS: How to use or inject thirdparty lib in AngularJS

Question

I'm new to Angular and Deployd and wondering how to use them together.

I found the example in Deployd website nice, but it's only consuming rest API data and I'd like to understand how to have Deployd as a service inside AngularJS. For example, keeping all of the clients API up-to-date with the collection's latest data with collection events available in deployd.

I came up with the example below, where we can see that I'm using $resource to consume the rest api, but inside the controller "MyCtrl", I'm calling dpd, that I'd like to use to take advantage of features such as http://docs.deployd.com/docs/collections/notifying-clients.md

I'd really like to see some examples, or any advice concerning this!

Thanks for looking :)

angular.module('questions', ['ngResource'])

.factory('Deployd', function(dpd){
  return dpd;
})

.factory('EntriesService', function($resource){
  return $resource('/entries', {});
})

.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {

  $scope.title = "Q&A Module";

  $scope.entries = [];

  EntriesService.query(function(response){
    $scope.entries = response;       
  });

  $scope.addMessage = function() {
    $scope.entries.push({
        author: "myAuthor",
        message: $scope.message
    });

    EntriesService.save({
        author: "myAuthor",
        message: $scope.message
    });

  };

  dpd.comments.get(function(comments, error) {
    comments.forEach(function(comment) {
      console.log(comment);
    });
  });

}]);

Answer 1

I found a solution. This may be helpful in the future for someone else:

angular.module('questions', ['ngResource'])

.factory('Deployd', function(){
  return dpd;
})

.factory('EntriesService', function($resource){
  return $resource('/entries', {});
})

.controller('MainCtrl', ['$scope', 'EntriesService', 'Deployd', function($scope, EntriesService, Deployd) {

  $scope.title = "Q&A Module";

  $scope.entries = [];

  EntriesService.query(function(response){
    $scope.entries = response;        
  });

  $scope.addMessage = function() {

    var author = "myAuthor";
    var message = $scope.message;

    Deployd.entries.post({
      author: author,
      message: message
    }, function(comment, error) {

      if (error) {
        return showError(error);
      }

      $scope.entries.push({
        author: author,
        message: message
      });

    });

  };

  Deployd.entries.on('create', function() {
    EntriesService.query(function(response){
      $scope.entries = response;        
    });
  });

}]);

Answer 2

If you're using AngularJS 1.5+ with components and ES2015/ES6, you can inject an external library by using a constant.

For example, to inject d3.js into an AngularJS component:

First install d3 with npm install d3 --save, then import it into your app module and then inject it as a constant to your component.

in app.module:

import * as d3 from 'd3';
import { MyComponent } from './my-component/my-component';

export default angular.module('app', [])
    .constant('d3', d3)
    .component('myComponent', MyComponent)
    .name;

in my-component:

// Controller
class MyController {
    constructor(d3, $element) {
        this.d3 = d3;
        this.$element = $element;
    }

    $onInit() {
        // $element is the jqLite or jQuery component's element and 
        // $element[0] is the DOM node element
        this.d3.select(this.$element[0]).append('p').text('Hello world');
    }
}

// Component
export var MyComponent = {
    template: require('./my-component.html'),
    controller: MyController
};

Answer 3

I'm not directly familiar with deployd, but as they sort of say in this tutorial: Deployd ng-todo-app. Most probably it is easiest to just consume the API's with the built in $http in angular.

You must atleast do some manual work to port data from deployd-realm to "angular scope". If you want to you can wrapp/remake/consume the deployd API you are building inside an own service similar to:

angular.module("questions").
factory("dpdFactory", function($http){
    return{
        getComments: function(callback){
            $http.get("/comments").success(function(comments){
                callback(comments);
            });
        }
    }
}).
controller("MainCtrl", ["dpdFactory", function(dpdFactory){
    dpdFactory.getComments(function(comments){
        //Do whatever with comments.
    });
}])

Answer 4

Third party library was define in global scope (window) so you can inject a $window to get third party

Angular JS and external libraries

Answer 5

I am confused by your question. AngularJS consumes api's to generate data(deployd being a framework it appears for creating a api). You will need to look into AngularJS $resource , or $http to make calls to the api. After you write the api with deployd.