How to Make Music Playlist?

ionic-v1
1

I’m new with angular and especially with javascript and ionic, would like to know how to perform the following operation, I

 .controller ('PlaylistsCtrl', function ($ scope) {
   scope.playlists $ = [
     {Title: 'Reggae', id: 1},
     {Title: 'Chill', id: 2},
     {Title: 'Dubstep', id: 3},
     {Title: 'Indie', id: 4},
     {Title: 'Rap', id: 5},
     {Title: 'Cowbell', id: 6}
   ];
 })

 .controller ('PlaylistCtrl', function ($ scope, $ stateParams) {

 // Here in when the playlist selected by the Reggae id 1, show music and use the playlist name in the title of the page.

 swtich case?

 case PlaylistsCtrl = "1"
  scope.musics $ = [
     {Title: 'music', id: 1},
     {Title: 'music2', id: 2},
     {Title: 'music3', id: 3}

 });

 and when selecting the music show the following information

 .controller ('MusicCtrl', function ($ scope, $ stateParams) {
  case PlaylistCtrl= "1"
  scope.artist $ = [
     {Artist: 'test'},
    {Age: '19'}

 });
2

To give you an idea, you can do something like the following:

.factory('MusicFactory', function() {

    var playlists = [
        { title: 'Reggae', id: 1, musics: [{title: 'music1', artist: {name: 'artist1', age: 27}}, {title: 'music2', artist: {name: 'artist2', age: 24} }] },
        { title: 'Chill', id: 2, musics: [{title: 'music3', artist: {name: 'artist1', age: 27}}, {title: 'music4', artist:  {name: 'artist1', age: 27}}] },
        { title: 'Dubstep', id: 3, musics: [{title: 'music5', artist:  {name: 'artist1', age: 27}}, {title: 'music6', artist:  {name: 'artist1', age: 27}}] },
        { title: 'Indie', id: 4, musics: [{title: 'music1', artist: {name: 'artist1', age: 27}}, {title: 'music2', artist:  {name: 'artist1', age: 27}}] }
    ];

    var currentPlaylist = null,
        currentMusic = null;

    return {
        getPlaylists: function() {
            return playlists;
        },
        getPlaylist: function(id) {
            if (!id) return null;

            for (var pl in playlists) {
                if (playlists[pl].id === id) {
                    currentPlaylist = playlists[pl];
                    return currentPlaylist;
                }
            }

            return null;
        },
        getMusic: function(id) {
            if (!id) return null;

            for (var mu in currentPlaylist) {
                if (currentPlaylist[mu].id === id) {
                    currentMusic = currentPlaylist[mu];
                    return currentMusic;
                }
            }

            return null;
        }
    }
})

.controller ('PlaylistsCtrl', ['$scope', 'MusicFactory', function ($scope, MusicFactory) {
    
    $scope.playlists = MusicFactory.getPlaylists();
}])

.controller ('PlaylistCtrl', ['$scope', '$stateParams', 'MusicFactory', function ($scope, $stateParams, MusicFactory) {

    // Here in when the playlist selected by the Reggae id 1, show music and use the playlist name in the title of the page.
    var playlist = MusicFactory.getPlaylist($stateParams.playlistId);

    $scope.musics = playlist.musics;
    $scope.title = playlist.title;
}])

.controller ('MusicCtrl', ['$scope', '$stateParams', 'MusicFactory', function ($scope, $stateParams, MusicFactory) {

    var music = MusicFactory.getMusic($stateParams.musicId);

    $scope.artist = music.artist;
}]);

Of course you still need to add the routing logic and set up your views, but I think you will manage with this example.

As a side note, this is an example on how to achieve this. You’ll probably want some relational data storage instead of storing each artist in a music in a playlist.

3

First page and second page OK … but as I ride the third?

app.js

    .state('app.playlists', {
      url: "/playlists",
      views: {
        'menuContent': {
          templateUrl: "templates/playlists.html",
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.playlist', {
    url: "/playlists/:playlistId",
    views: {
      'menuContent': {
        templateUrl: "templates/playlist.html",
        controller: 'PlaylistCtrl'
      }
    }
  })
  .state('app.music', {
    url: "/playlists/:musicId",
    views: {
      'menuContent': {
        templateUrl: "templates/musics.html",
        controller: 'MusicCtrl'
      }
    }
  });

controller.js

    .factory('MusicFactory', function() {

        var playlists = [
            { title: 'Reggae', id: 1,
                musics: [{title: 'music1', id: 1,
                    artist: {name: 'artist1', age: 27}},
                    {title: 'music2',
                     artist: {name: 'artist2', age: 24} },
                    {title: 'music2',
                     artist: {name: 'artist2', age: 24} }

                ] },
            { title: 'Chill', id: 2, musics: [{title: 'music3', artist: {name: 'artist1', age: 27}}, {title: 'music4', artist:  {name: 'artist1', age: 27}}] },
            { title: 'Dubstep', id: 3, musics: [{title: 'music5', artist:  {name: 'artist1', age: 27}}, {title: 'music6', artist:  {name: 'artist1', age: 27}}] },
            { title: 'Indie', id: 4, musics: [{title: 'music1', artist: {name: 'artist1', age: 27}}, {title: 'music2', artist:  {name: 'artist1', age: 27}}] }
        ];

        var currentPlaylist = null,
            currentMusic = null;

        return {
            getPlaylists: function() {
                return playlists;
            },
            getPlaylist: function(id) {
                if (!id) return null;

                for (var pl in playlists) {
                    if (playlists[pl].id == id) {
                        currentPlaylist = playlists[pl];
                        return currentPlaylist;
                    }
                }

                return null;
            },
            getMusic: function(id) {
                if (!id) return null;

                for (var mu in currentPlaylist) {
                    if (currentPlaylist[mu].id == id) {
                        currentMusic = currentPlaylist[mu];
                        return currentMusic;
                    }
                }

                return null;
            }
        }
    })

    .controller ('PlaylistsCtrl', ['$scope', 'MusicFactory', function ($scope, MusicFactory) {

    $scope.playlists = MusicFactory.getPlaylists();
}])

    .controller ('PlaylistCtrl', ['$scope', '$stateParams', 'MusicFactory', function ($scope, $stateParams, MusicFactory) {

    // Here in when the playlist selected by the Reggae id 1, show music and use the playlist name in the title of the page.
    var playlist = MusicFactory.getPlaylist($stateParams.playlistId);

    $scope.musics = playlist.musics;
    $scope.title = playlist.title;
}])

    .controller ('MusicCtrl', ['$scope', '$stateParams', 'MusicFactory', function ($scope, $stateParams, MusicFactory) {

    var music = MusicFactory.getMusic($stateParams.musicId);

    $scope.artist = music.artist;
}]);

musics.html

<ion-view view-title="Musics">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="music in musics">
                {{music.name}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>
4

I wanted to thank Ms @brandyshea for helping me solve the problem