在 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>