Create music playlist, with information of artists

I’m trying to make a playlist of information of artists, but I’m caught, with the angular js, the basic logic … the User selects the musical style, then select the music, and then view the artist information the code follows below.

please help me T_T

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

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

  .state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html"
      }
    }
  })
    .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'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

controller.js

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})
    .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;
}]);

playlist.html

<ion-view view-title="Playlists">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="music in musics" href="#/app/playlist/{{music.id}}">
                {{music.title}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

playlists.html

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-click="teste()" ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>

artist.html

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


  </ion-content>
</ion-view>

I can not make him take the name of the song and demonstrates the artist information

Could you throw this into a Codepen or Plunker? :smile:

1 Like

Can pass the project folder, I can not mess with these services, do not know how they behave in folders

You’re not including artist.html in your states? I’m confused. Can you explain what you’re trying to do? Go from playlists.html to playlist.html to artist.html?

A musical rhythm, has a song and this song belongs to an artist … after showing the list of songs according to the rhythm of another page I want to see the artist information of this song. but I do not know how to assemble this part of the artist playlists-> playlist-> artist

I made a basic update, but still do not know how to show the artist’s data

Sounds like it’s something that needs be read from the database?

SONGS
[
{songName, ID, rhythm, artistID, etc},
{songName, ID, rhythm, artistID, etc}
]

ARTISTS
[
{artistName, ID, other, info},
{artistName, ID, other, info}
]

Then you could grab the artist ID and query the artist class for a matching ID. Not sure if that’s what you’re trying to do?

It will not necessarily use the database, but like I said. A musical rhythm has a song that has an artist to ideas is the usual pick up the pace, will show the songs that pace, after choosing the music, the application will show the artist of that song is a simple approach, the main difficulty is show that of the last step.

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

Hi, can you post the solution please?

Here is the modified code I sent him:

Hello , sorry I am very new to ionic, I program in visual studio, How can I have more information of pages app.js , controller.js and template folder, would you please help me to improve.
thanks in advance.