AngularJS：如何在 AngularJS 中使用或注入第三方库

Question

我是 Angular 和 Deployd 的新手，想知道如何一起使用它们。

我发现 Deployd 网站中的示例很好，但它只消耗其余 API 数据，我想了解如何在 AngularJS 中将 Deployd 作为服务。例如，使所有客户端 API 与集合的最新数据保持同步，并在已部署的集合事件中可用。

我想出了下面的例子，我们可以看到我正在使用 $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);
    });
  });

}]);

Answer 1

如果您将 AngularJS 1.5+ 与 components 和 ES2015/ES6 一起使用，则可以使用 constant 注入外部库。

例如，将 d3.js 注入到 AngularJS 组件中：

首先使用npm install d3 --save 安装d3，然后将其导入您的应用模块，然后将其作为常量注入到您的组件中。

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

Answer 2

我找到了解决方案。这可能对其他人有所帮助：

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 3

第三方库是在全局范围（窗口）中定义的，因此您可以注入 $window 来获取第三方

Angular JS and external libraries

Answer 4

我并不直接熟悉部署，但正如他们在本教程中所说的那样：Deployd ng-todo-app。很可能最简单的方法是使用内置 $http 的 API。

您必须至少做一些手动工作才能将数据从部署领域移植到“角度范围”。 如果您愿意，您可以在自己的服务中包装/重新制作/使用您正在构建的已部署 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.
    });
}])

Answer 5

我对你的问题感到困惑。 AngularJS 使用 api 来生成数据（deployd 是它出现的用于创建 api 的框架）。您将需要查看 AngularJS $resource 或 $http 来调用 api。在您使用已部署的方式编写 api 之后。