如何在移动角UI框架添加外部库？ [英] How to add an external library in Mobile Angular UI framework?
问题描述
我刚开始使用移动角度UI（ http://mobileangularui.com/ ），但可T弄清楚哪些步骤，我需要采取以包含其他外部库。我在我的lib文件
bower_components文件夹，它是在相同的水平在文件结构中的src文件夹。我需要包括JS，CSS和图像文件的项目。
I'm just getting started with Mobile Angular UI (http://mobileangularui.com/), but can't figure out which steps I need to take in order to include another external library. I have my lib files in the bower_components folder, which is on the same level as the src folder in the file structure. I need to include js, css and image files in the project.
例如，我使用的引导类的 glyphicon加的，它存在于bower_components文件夹（bower_components /引导/更少/和bower_components /引导/距离/ CSS /）。建设项目后，该类不是在目标目录（WWW / CSS /）present。
For example, I am using the bootstrap class glyphicon-plus, which exists in the bower_components folder (bower_components/bootstrap/less/ and bower_components/bootstrap/dist/css/). After building the project, the class is not present in the target directory (www/css/).
综观Gulpfile，我看没有转移的CSS文件从源目录从SRC /少/文件夹目标目录中发生的事情，只有不到文件的处理存在。无论如何，Gulpfile只是为默认设置。它指出在文件的开头：请用config.js有选择地覆盖这些：
Looking at the Gulpfile, I see no transfer of CSS files from source directory to target directory happening, only LESS files from the src/less/ folder are handled there. Anyway, the Gulpfile is only intended for default settings. It states at the beginning of the file: "Please use config.js to override these selectively:".
在config.js，有展示如何添加第三方JavaScript组件的一部分：
In config.js, there is a section showing how to add 3rd party Javascript components:
config.vendor.js.push('.bower_components/lib/dist/lib.js');
不过，对于CSS文件中没有相应的数组。
However, there is no corresponding array for CSS files.
如果你的index.html的样子，到CSS文件的文件引用都适合的目标文件夹（WWW /），因为它们都启动CSS /，这是不是在源文件夹的有效参考。
If you look in index.html, the file references to CSS files are all adapted for the target folder (www/), as they all start "css/", which is not a valid reference in the source folder.
我如何从bower_components和src文件夹CSS，字体，图片添加到项目中，使他们出现在目标？
How do I add css, fonts, images from bower_components and src folders to the project, so that they appear in the target?
推荐答案
这是如何阅读的JavaScript文件，并把它包装服务工厂内的一个非常好的例子，例子中使用D3，但它可以是任何图书馆，服务回报图书馆的实际情况下，你可以注入它，只要你喜欢使用它。
this is a very nice example of how to read the javascript file and wrap it inside a service factory, the example uses d3 but it could be any library, the service return the actual instance of the library you can inject it and use it as you like.
angular.module('d3', [])
.factory('d3Service', ['$document', '$q', '$rootScope',
function($document, $q, $rootScope) {
var d = $q.defer();
function onScriptLoad() {
// Load client in the browser
$rootScope.$apply(function() { d.resolve(window.d3); });
}
// Create a script tag with d3 as the source
// and call our onScriptLoad callback when it
// has been loaded
var scriptTag = $document[0].createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = 'http://d3js.org/d3.v3.min.js';
scriptTag.onreadystatechange = function () {
if (this.readyState == 'complete') onScriptLoad();
}
scriptTag.onload = onScriptLoad;
var s = $document[0].getElementsByTagName('body')[0];
s.appendChild(scriptTag);
return {
d3: function() { return d.promise; }
};
}]);
你需要等待承诺的分辨率使用方法。然后在d3Service
you'll need to wait on the resolution of the promise to return by using the .then method on the d3Service
假设你正在使用的服务为一体的指令：
let's say you are using the service into a directive:
angular.module('myApp.directives', ['d3'])
.directive('barChart', ['d3Service', function(d3Service) {
return {
link: function(scope, element, attrs) {
d3Service.d3().then(function(d3) {
// d3 is the raw d3 object
});
}}
}]);
一起来看看这个教程作为参考。
这是一个很酷的解决办法，如果你不喜欢，只是包括在HTML参考，你也可以使用一个异步加载库看看该项目的角度种子可能是有帮助。
that's a cool workaround, if you don't like to just include the reference on the HTML, also you can add the reference using an async loader library take a look to the project angular seed that might be helpful as well.
这篇关于如何在移动角UI框架添加外部库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
