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

我对Angular和Deployed不熟悉，不知道如何将它们结合使用

我在部署的网站nice中发现了这个示例，但它只使用restapi数据，我想了解如何在AngularJS中部署为服务。例如，使所有客户端API与集合的最新数据保持最新，并且集合事件在部署中可用

我提出了下面的例子，在这里我们可以看到我使用$resource来使用RESTAPI，但在控制器“MyCtrl”中，我调用了dpd，我想使用它来利用以下特性

我真的很想看到一些例子，或任何有关这方面的建议

感谢您的关注：）

---

你的问题把我弄糊涂了。AngularJS使用api生成数据（部署为一个用于创建api的框架）。您需要查看AngularJS$resource或$http来调用api。在使用deployd编写api之后

我不太熟悉deployd，但正如他们在本教程中所说的那样：。最简单的方法可能是在angular中使用内置的$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.
    });
}])

---

我找到了解决办法。这可能在将来对其他人有所帮助：

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

}]);

---

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

---

如果使用AngularJS 1.5+和ES2015/ES6，可以使用

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

首先使用npm install d3安装d3——保存，然后将其导入应用程序模块，然后将其作为常量注入组件

在应用程序模块中：

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

在我的组件中：

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

---

我从未使用过Deployd，但一般来说，处理服务器调用的东西最好封装在服务中，并将任何DOM操作代码封装到如下所示的指令中：感谢@shaunhusain共享此链接！我会花时间去理解它，但我也会通过指令。例如，我想封装部署在服务中的原因是，我想利用一些功能，让我实时通知所有正在查看应用程序的客户端，等等。基本上，我可以抛出全球可用的“drd”，但我认为也许我不应该这样做，对吗？！嗨，谢谢你的关注！我知道如何使用$http或$resource使用它，正如我们在示例中看到的。我只是想知道，如果我想使用AngularJS中的外部库（在本例中是部署的），该怎么办。这是因为，我可以在所有客户机中更新视图，因为部署使用sockets/nodejs的方式。Syntaxe比AngularJS更具角度，但使用库的Javascript对象创建常量并将其注入控制器工作起来非常有魅力！谢谢：-）