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);
    });
  });

}]);

I haven't used Deployd ever but generally speaking things that handle calls to the server are best encapsulated in services and to encapsulate any DOM manipulation code into directives as shown here:http://briantford.com/blog/angular-d3.html — shaunhusain, Aug 20 '13 at 18:19
Thanks @shaunhusain for sharing this link! I'll take the time to understand it, but I'll also go through directives. The reason I'd like to encapsulate Deployd in services, for example, is that I'd like to take advantage of features that let me notify all clients that are viewing the app in real time, etc. I can basically, just throw "drd" that's available globaly but I think that maybe I shouldn't do that, should I ?! — punkbit, Aug 20 '13 at 22:30

score 5 · Answer 1 · answered Feb 09 '17 at 20:23

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
};

Syntaxe is more Angular than AngularJS, but creating a constant with Javascript Object of library and inject it into controller works like a charm! Thanks :-) — Camille, Mar 08 '21 at 11:56

score 4 · Accepted Answer · answered Aug 21 '13 at 00:50

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;        
    });
  });

}]);

score 3 · Answer 3 · edited May 23 '17 at 11:53

3

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

Angular JS and external libraries

edited May 23 '17 at 11:53

Community

1
1

answered Feb 21 '15 at 10:24

Instabledesign

47
6

score 1 · Answer 4 · answered Aug 20 '13 at 18:37

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.
    });
}])

score 0 · Answer 5 · edited Dec 14 '17 at 15:43

0

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.

edited Dec 14 '17 at 15:43

Graham

7,431
18
59
84

answered Aug 20 '13 at 18:34

Rummy

105
5

Hi, thanks for looking! I know how to consume it using $http or $resource, as we can see in the example. I'm just wondering what to do, if I'd like to use an external library in AngularJS, in this case Deployd. This because, I can have views updated in all clients, because of the way deployd uses sockets/nodejs. – punkbit Aug 20 '13 at 22:19

AngularJS: How to use or inject thirdparty lib in AngularJS

5 Answers5

Linked