如何在 Mobile Angular UI 框架中添加外部库？

Question

我刚刚开始使用 Mobile Angular UI (http://mobileangularui.com/)，但不知道需要采取哪些步骤才能包含另一个外部库。我有我的lib文件 bower_components 文件夹，与文件结构中的 src 文件夹处于同一级别。我需要在项目中包含js、css和图片文件。

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

查看 Gulpfile，我发现没有发生 CSS 文件从源目录到目标目录的传输，只有 src/less/ 文件夹中的 LESS 文件在那里处理。无论如何，Gulpfile 仅用于默认设置。它在文件的开头声明：“请使用 config.js 选择性地覆盖这些：”。

在 config.js 中，有一节展示了如何添加 3rd 方 Javascript 组件：

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

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

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

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

Answer 1

要解决这个问题，你可以修改 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 目录之上。是一个自定义解决方案，但对我有用。我希望该解决方案对您有所帮助。

谢谢。

Answer 2

这是一个非常好的示例，说明如何读取 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
        });
      }}
  }]);

看看这个tutorial 作为参考。

这是一个很酷的解决方法，如果您不喜欢只在 HTML 中包含引用，您也可以使用异步加载器库添加引用，看看项目 angular seed 可能也有帮助。

Answer 3

外部库是指其他 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">