如何在移动角度UI框架中添加外部库

How to add an external library in Mobile Angular UI framework?

本文关键字：框架 添加 外部 UI 移动      更新时间：2023-09-26

我刚刚开始使用Mobile Angular UI（http://mobileangularui.com/），但无法弄清楚我需要采取哪些步骤才能包含另一个外部库。我的库文件在bower_components文件夹，它与文件结构中的 src 文件夹位于同一级别。我需要在项目中包括js，css和图像文件。

例如，我正在使用引导类glyphicon-plus，它存在于bower_components文件夹中（bower_components/bootstrap/less/和bower_components/bootstrap/dist/css/）。生成项目后，该类不存在于目标目录 （www/css/） 中。

查看 Gulpfile，我没有看到 CSS 文件从源目录传输到目标目录，只有来自 src/less/文件夹中的 LESS 文件在那里处理。无论如何，Gulpfile 仅用于默认设置。它在文件的开头指出："请使用配置.js有选择地覆盖这些："。

在config.js中，有一个部分展示了如何添加第三方Javascript组件：

config.vendor.js.push('.bower_components/lib/dist/lib.js');

但是，CSS 文件没有相应的数组。

如果你在index.html中查看，对CSS文件的文件引用都适用于目标文件夹（www/），因为它们都以"css/"开头，这在源文件夹中不是有效的引用。

如何将 css、字体、图像从 bower_components 和 src 文件夹添加到项目中，以便它们出现在目标中？

要解决此问题，您可以修改 gulpfile.js 文件，添加以下行：

首先，定义一个"bower_css"空数组：

vendor: {
    js: [
      './bower_components/angular/angular.js',
      './bower_components/angular-route/angular-route.js',
      './bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js'
    ],
    fonts: [
      './bower_components/font-awesome/fonts/fontawesome-webfont.*'
    ],
    bower_css: []
  },

然后，构建一个任务以将 css 文件复制到 dist 文件夹：

/*==================================
=            Copy bower_components css files          =
==================================*/
gulp.task('bower_css', function() {
  return gulp.src(config.vendor.bower_css, {base: './'})
  .pipe(gulp.dest(path.join(config.dest, 'css/')));
});

因此，在config.js文件中，您可以添加以下行，例如对于sweetalert：

config.vendor.bower_css.push(
    './bower_components/sweetalert/dist/sweetalert.css'
);

这样，在html文件中，您可以加载相应的css文件，因为都在www目录上。是一个定制的解决方案，但对我有用。我希望该解决方案对您有所帮助。

谢谢。

这是一个

非常好的示例，说明如何读取 JavaScript 文件并将其包装在服务工厂中，该示例使用 D3，但它可以是任何库，服务返回库的实际实例，您可以注入它并根据需要使用它。

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 上的 .then 方法返回

假设您正在使用该服务到指令中：

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 中包含引用，您也可以使用异步加载器库添加引用，看看项目 Angular 种子也可能有所帮助。

外部库是指其他JavaScript依赖项，如jQuery吗？ 另外，进入项目，你的意思是HTML文件吗？ 如果您使用的是 bower，则可以像使用移动 Angular UI 一样引用其他已安装的 javascript 依赖项。

当你做bower.init时，它会设置一个bower.json文件以及一个包含你的依赖项的bower_components文件夹。 如果您使用的是jQuery（并且已经完成了bower install --save jquery），请将以下行添加到HTML文档中：

<script src="bower_components/jquery/dist/jquery.min.js">

这是粗略的方式，如果您想通过某种加载器/构建工具来加载javascript依赖项，该工具也会缩小您的JS文件，请查看构建工具，例如grunt或gulp。 以下是这些工具的链接：

http://bower.io/docs/tools/

CSS 文件可以通过链接标签包含在 HTML 文档中：

<link href="bower_components/path/to/style.css" rel="stylesheet" type="text/css" media="all">
相关文章：