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

Question

So, I'm interested to use ionic-audio by arielfaur

into my ionic project.

My question I guess in general is what's the proper way to do this. If I download the zip file from github, where should I put this extracted files as part of ionic project, that way if there's update to the module, I can just download the zip file and extract to the same directory without worrying about different files in different folder.

What's the best practice in here?

Answer 1

Use the suggested directions in the Docs , this is the most common way to include 3rd Party Plugins not found on ngCordova since Ionic makes use of Bower. By using Bower, you don't need to go to the actual Github repo, download the source and have to worry about updates in the future. Just simply do bower install --save <pkg> where <pkg> is the name of the 3rd party module you'd like to install.

If you used ionic start , when doing a bower install --save <pkg> , it will install your dependencies into your www/lib directory. This is because ionic will add a .bowerrc file that changes your bower install folder from ./bower_components to whatever is specified in the .bowerrc file's directory attribute.

.bowerrc file

{
  "directory": "www/lib"
}

Usage

Install dependencies

Cordova media plugin

ionic plugin add cordova-plugin-media

Install this module using bower

bower install ionic-audio

There's a sample Ionic project in the folder example-audio. The project contains not platforms, so you must add one and make a build if you want to test it on your device. Keep in mind that the module depends on a Cordova plugin so the module won't run locally with ionic serve. However, you can still run the project locally to tune the UI before deploying to the device.

Include JS file

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

Inject the dependency in your app's module

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

Answer 2

I've been working with Ionic for a while now, so what I would recommend you is to Implement the track list in the specific controller you need the music player in

$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'
    }
];

And since Ionic has it's own directives, you only need to implement the ion-audio-track in the view you need. This is what I personally prefer if the music player will be in a single view.

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