AngularJS: как использовать или внедрить стороннюю библиотеку в AngularJS

Я новичок в Angular и Deployd, и мне интересно, как их использовать вместе.

Я нашел пример на веб-сайте Deployd хорошим, но он использует только остальные данные API, и я хотел бы понять, как использовать Deployd в качестве службы внутри AngularJS. Например, поддержание актуальности всех клиентских API с использованием последних данных коллекции с событиями коллекции, доступными в файле deployed.

Я придумал приведенный ниже пример, где мы видим, что я использую $resource для использования остальных API, но внутри контроллера «MyCtrl» я вызываю dpd, который я хотел бы использовать, чтобы воспользоваться преимуществами такие функции, как http://docs.deployd.com/docs/collections/notifying-clients.md

Я действительно хотел бы увидеть некоторые примеры или какие-либо советы по этому поводу!

Спасибо за поиск :)

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

}]);

javascript dependency-injection angularjs deployd
person punkbit    schedule 20.08.2013    source источник
comment
Я никогда не использовал Deployd, но, вообще говоря, вещи, которые обрабатывают обращения к серверу, лучше всего инкапсулировать в службы и инкапсулировать любой код манипулирования DOM в директивы, как показано здесь: briantford.com/blog/angular-d3.html   -  person shaunhusain    schedule 20.08.2013
comment
Спасибо @shaunhusain за то, что поделились этой ссылкой! Я потрачу время, чтобы понять это, но я также пройдусь по директивам. Например, причина, по которой я хотел бы инкапсулировать Deployd в службы, заключается в том, что я хотел бы воспользоваться преимуществами функций, которые позволяют мне уведомлять всех клиентов, просматривающих приложение, в режиме реального времени и т. д. В принципе, я могу просто бросить drd это доступно во всем мире, но я думаю, что, может быть, мне не следует этого делать, не так ли?!   -  person punkbit    schedule 21.08.2013

Ответы (5)


arrow_upward
4
arrow_downward

Я нашел решение. Это может быть полезно в будущем для кого-то еще:

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

}]);
person punkbit    schedule 21.08.2013

arrow_upward
4
arrow_downward

Если вы используете AngularJS 1.5+ с компонентами и ES2015/ES6, вы можете внедрить внешний библиотеку с помощью константы.

Например, чтобы внедрить d3.js в компонент AngularJS:

Сначала установите d3 с npm install d3 --save, затем импортируйте его в свой модуль приложения, а затем внедрите его как константу в свой компонент.

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

в мой-компонент:

// 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
};
person thibautg    schedule 09.02.2017
comment
Синтаксис более Angular, чем AngularJS, но создание константы с Javascript-объектом библиотеки и внедрение ее в контроллер работает как шарм! Спасибо :-) - person Camille; 08.03.2021

arrow_upward
2
arrow_downward

Сторонняя библиотека была определена в глобальной области (окне), поэтому вы можете ввести $window, чтобы получить стороннюю

Angular JS и внешние библиотеки

person Instabledesign    schedule 21.02.2015

arrow_upward
1
arrow_downward

Я не знаком с развернутым, но, как говорится в этом руководстве: Разверните приложение ng-todo. Скорее всего, проще всего использовать API со встроенным $http в angular.

Вы должны по крайней мере выполнить некоторую ручную работу, чтобы перенести данные из развернутой области в «угловую область». Если вы хотите, вы можете обернуть/переделать/использовать развернутый API, который вы создаете внутри собственной службы, аналогичной:

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.
    });
}])
person Nils Larson    schedule 20.08.2013

arrow_upward
0
arrow_downward

Я смущен вашим вопросом. AngularJS использует API для генерации данных (deployd является фреймворком, который появляется для создания API). Вам нужно будет заглянуть в AngularJS $resource или $http, чтобы совершать вызовы API. После того, как вы напишете API с помощью deployed.

person Rummy    schedule 20.08.2013
comment
Привет, спасибо за поиск! Я знаю, как использовать его с помощью $http или $resource, как мы видим в примере. Мне просто интересно, что делать, если я хочу использовать внешнюю библиотеку в AngularJS, в данном случае Deployd. Это потому, что я могу обновлять представления во всех клиентах из-за того, как развернуто использует сокеты/узлы. - person punkbit; 21.08.2013