[英]How to read module vs. vanilla JS library in angular?
我是角度服务/提供商/工厂模块的新手。 我一直在使用一个名为annyang的库30分钟,我想找到使用这个库的更“有棱角”的方式。
一些独立于git的人在这里找到了一个moduleProvider: ngAnnyang 。
它没有关于如何正确使用它的文档。
但传统的annyang你只需运行:
var commands = {
'remind me to *val' : reminders,
};
annyang.addCommands(commands);
annyang.start();
问题: 将模块注入我的角度应用程序后:
将此模块实现相同或现在命令的前缀为ng
: ngAnnyang.addCommands(); ngAnnyang.start();
ngAnnyang.addCommands(); ngAnnyang.start();
?
我还需要在应用程序中将annyang的原始库作为脚本标记吗?
这个角度包装的内容使它“有角度”,除了它现在可以注入?
JS:NG-annyang
/**
* ngAnnyang Module
*
* Annyang Angular wrapper
*/
angular.module('ngAnnyang', ['ng'])
.provider('ngAnnyang', function ngAnnyangProvider() {
'use strict';
var isEnabledFn = function() {};
// events
console.log('ngAnnyang: set events');
annyang.addCallback('start', function() {
console.log('ngAnnyang: enabled true');
isEnabledFn(true);
});
_.each(['end', 'error', 'errorNetwork', 'errorPermissionBlocked', 'errorPermissionDenied'], function(v) {
annyang.addCallback(v, function() {
console.log('ngAnnyang: enabled false');
isEnabledFn(false);
});
});
console.log('ngAnnyang: start');
annyang.start();
this.debug = function(state) {
if(state){
console.log('ngAnnyang: set debug', !!state);
annyang.debug(!!state);
} else {
console.log('ngAnnyang: set debug', true);
annyang.debug();
}
};
this.setLanguage = function(lang) {
if(lang){
console.log('ngAnnyang: debug', ''+lang);
annyang.setLanguage(''+lang);
}
};
this.$get = function ngAnnyangFactory(){
return {
isEnabled: function(fn) {
console.log('ngAnnyang: isEnabled callback', fn);
isEnabledFn = fn;
},
addCommands: function(commands) {
console.log('ngAnnyang: add commands', commands);
annyang.addCommands(commands);
},
removeCommands: function(commands) {
console.log('ngAnnyang: remove commands', commands);
annyang.removeCommands(commands);
}
};
};
});
您需要使用以下内容:
angular.module(“你的app name”)。config(“ngAnnyangProvider”,function(ngAnnyangProvider){
ngAnnyangProvider.addCommands(...);
});
更多细节:
将此模块实现相同或现在命令以nglike为前缀:
ngAnnyang.addCommands(); ngAnnyang.start();
ngAnnyang.addCommands(); ngAnnyang.start();
?
似乎ngWrapper在实例化提供程序后立即启动服务。 你会以同样的方式使用它:
var app = angular.module('app',[]);
app.controller('SpeechRecognize', ['ngAnnyang','tpsService',function(speechRecognition, tpsService) {
var commands = {
'show tps report': function() {
tpsService.show();
}
};
speechRecognition.addCommands(commands);
}]);
我还需要在应用程序中将annyang的原始库作为脚本标记吗?
是的,因为这只是原始库的包装。
这个角度包装的内容使它“有角度”,除了它现在可以注入?
似乎这是它提供的唯一好处。 这也使测试更容易。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.