在 ionic 项目中包含 3rd 方模块的正确方法

Question

所以，我有兴趣使用arielfaur 的 ionic-audio

进入我的离子项目。

我想我的问题一般是这样做的正确方法是什么。 如果我从 github 下载 zip 文件，我应该把这个提取的文件作为 ionic 项目的一部分放在哪里，这样如果模块有更新，我就可以下载 zip 文件并解压到同一目录，而不必担心不同的文件不同的文件夹。

这里的最佳做法是什么？

Answer 1

使用Docs 中的建议说明，这是包含ngCordova上未找到的 3rd Party Plugins 的最常用方法，因为 Ionic 使用了 Bower。 通过使用 Bower，您无需前往实际的 Github 存储库，下载源代码，也不必担心未来的更新。 只需简单地执行bower install --save <pkg>其中<pkg>是您要安装的第 3 方模块的名称。

如果您使用ionic start ，则在执行bower install --save <pkg> ，它会将您的依赖项安装到您的www/lib目录中。 这是因为 ionic 将添加一个 .bowerrc 文件，该文件将您的 bower 安装文件夹从./bower_components更改为 .bowerrc 文件的directory属性中指定的任何内容。

.bowerrc 文件

{
  "directory": "www/lib"
}

用法

安装依赖

Cordova 媒体插件

ionic plugin add cordova-plugin-media

使用 bower 安装此模块

bower install ionic-audio

文件夹 example-audio 中有一个示例 Ionic 项目。 该项目不包含平台，因此如果您想在您的设备上测试它，您必须添加一个并进行构建。 请记住，该模块依赖于 Cordova 插件，因此该模块不会在本地使用 ionic serve 运行。 但是，您仍然可以在本地运行项目以在部署到设备之前调整 UI。

包含JS文件

<script src="dist/ion-audio.js"></script>

在应用程序的模块中注入依赖项

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ionic-audio'])

Answer 2

我已经与 Ionic 合作了一段时间，所以我建议您在需要音乐播放器的特定控制器中实现曲目列表

$scope.tracks = [
    {
        url: 'https://ionic-audio.s3.amazonaws.com/Message%20in%20a%20bottle.mp3',
        artist: 'The Police',
        title: 'Message in a bottle',
        art: 'https://ionic-audio.s3.amazonaws.com/The_Police_Greatest_Hits.jpg'
    },
    {
        url: 'https://ionic-audio.s3.amazonaws.com/Roxane.mp3',
        artist: 'The Police',
        title: 'Roxane',
        art: 'https://ionic-audio.s3.amazonaws.com/The_Police_Greatest_Hits.jpg'
    }
];

由于 Ionic 有它自己的指令，你只需要在你需要的视图中实现ion-audio-track 。 如果音乐播放器处于单一视图中，这是我个人更喜欢的。

      <ion-audio-track ng-repeat="track in tracks" track="track">
    <div class="card">
      <div class="item item-thumbnail-left">
        <img src="{{track.art}}">

        <h2>{{track.title}}</h2>

        <p>{{track.artist}}</p>
        <ion-audio-controls>
          <a class="button button-icon icon" ion-audio-play></a>
          <ion-spinner icon="ios" style="position: relative; top: 8px; left: 4px"></ion-spinner>
        </ion-audio-controls>
      </div>
      <div class="item item-divider">
        <ion-audio-progress-bar display-time></ion-audio-progress-bar>
      </div>
    </div>
  </ion-audio-track>