用法

Question

进入我的离子项目。

我的问题我猜一般来说这是正确的方法。如果我从github下载zip文件，我应该把这些提取的文件作为离子项目的一部分，这样如果模块有更新，我可以下载zip文件并解压缩到同一目录而不用担心不同的文件不同的文件夹。

这里的最佳做法是什么？

Answer 1

使用Docs中的建议说明，这是自Ionic使用Bower以来，ngCordova中未包含第三方插件的最常用方法。通过使用Bower，您无需转到实际的Github存储库，下载源代码并且不得不担心将来的更新。只需执行bower install --save <pkg>，其中<pkg>是您要安装的第三方模块的名称。

如果您使用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插件，因此模块不会使用离子服务本地运行。但是，您仍然可以在部署到设备之前在本地运行项目以调整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>

在离子项目中包含第三方模块的正确方法

2 个答案:

用法

安装依赖项

Cordova媒体插件

使用bower

包含JS文件

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