我是Angular和Deployd的新手,想知道如何一起使用它们。
我发现Deployd网站上的示例很好,但它只消耗了其他API数据,我想了解如何将Deployd作为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);
});
});
}]);
答案 0 :(得分:4)
我找到了解决方案。这对其他人来说可能会有所帮助:
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;
});
});
}]);
答案 1 :(得分:4)
如果您将AngularJS 1.5+与components和ES2015 / ES6一起使用,则可以使用constant注入外部库。
例如,将 d3.js 注入AngularJS组件:
首先使用npm install d3 --save
安装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;
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
};
答案 2 :(得分:1)
我并不直接熟悉deployd,但正如他们在本教程中所说:Deployd ng-todo-app。最有可能最简单的方法是使用内置的$ http in angular。来消费API。
您必须至少做一些手动工作,将数据从deployd-realm移植到“angular scope”。 如果您愿意,可以使用deplo /重新/使用deployd 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.
});
}])
答案 3 :(得分:1)
第三方库是在全局范围(窗口)中定义的,因此您可以注入$ window来获取第三方
答案 4 :(得分:0)
我对你的问题感到困惑。 AngularJS使用api来生成数据(deployd是一个用于创建api的框架)。您将需要查看AngularJS $资源或$ http来调用api。用deployd编写api之后。