javascript AngularJS：如何在 AngularJS 中使用或注入第三方库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18342059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: How to use or inject thirdparty lib in AngularJS
提问by punkbit
I'm new to Angular and Deployd and wondering how to use them together.
我是 Angular 和 Deployd 的新手，想知道如何一起使用它们。
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.
我发现 Deployd 网站中的示例很好，但它只消耗其余 API 数据，我想了解如何在 AngularJS 中将 Deployd 作为服务。例如，使所有客户端 API 与集合的最新数据保持同步，并在部署中使用可用的集合事件。
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
我想出了下面的例子，我们可以看到我正在使用 $resource 来消耗其余的 api，但是在控制器“MyCtrl”中，我正在调用 dpd，我想用它来利用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);
});
});
}]);
采纳答案by punkbit
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;
});
});
}]);
回答by thibautg
If you're using AngularJS 1.5+ with componentsand ES2015/ES6, you can inject an external library by using a constant.
如果您将 AngularJS 1.5+ 与组件和 ES2015/ES6 一起使用，则可以使用常量注入外部库。
For example, to inject d3.jsinto an AngularJS component:
例如，将d3.js注入 AngularJS 组件：
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.
首先使用 安装 d3 npm install d3 --save，然后将其导入您的应用程序模块，然后将其作为常量注入到您的组件中。
in app.module:
在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
};
回答by Nils Larson
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.
我并不直接熟悉已部署，但正如他们在本教程中所说的那样：已部署 ng-todo-app。很可能最简单的方法是使用带有 angular 内置 $http 的 API。
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:
您至少必须做一些手动工作才能将数据从部署领域移植到“角度范围”。如果您愿意，您可以包装/重新制作/使用您在自己的服务中构建的已部署 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.
});
}])
回答by Instabledesign
Third party library was define in global scope (window) so you can inject a $window to get third party
第三方库在全局范围（窗口）中定义，因此您可以注入 $window 以获取第三方
回答by Rummy
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.
我对你的问题感到困惑。AngularJS 使用 api 来生成数据（deployd 是一个用于创建 api 的框架）。您需要查看 AngularJS $resource 或 $http 来调用 api。在你编写了部署的 api 之后。
