Ivaro18 Ivaro18 - 3 months ago 38
reST (reStructuredText) Question

Ionic / Angular - Master detail within master detail

Hi I'm trying to develop (using ionic, so also angular) a feature in which users can see all events, and see all attending participants. Of all these participants there is information available, so I tried making a master-detail pattern within the master-detail (so basically master-detail-detail).

Problem is, it is returning a 404 while the link is

http://localhost:8100/evenement/1/deelnemers/1
and the http function should return a JSON object but I couldn't test it since the page or url wasn't found.




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'
var app = angular.module('newsApp', ['ionic']);

app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('list',{
url: '/',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('detail',{
url: '/evenement/:eventId',
templateUrl: 'detail.html',
controller: 'DetailCtrl'
})
.state('deelnemer', {
url: '/evenement/:eventId/deelnemers/:deelnemerId',
templateUrl: 'deelnemer.html',
controller: 'DeelnemerCtrl'
})
;

$urlRouterProvider.otherwise("/");
});

app.factory('Evenementen', function($http){
var cachedData;

function getData(callback){
var url = "http://localhost:8080/evenementen";

$http.get(url).success(function(data){
cachedData = data;
callback(data);
});
}

return {
list: getData,
find: function(pid, callback){
$http.get("http://localhost:8080/evenement/"+pid).success(function(data){
console.log("greater succes");
console.log(data);
callback(data);
});
callback(event);
}
};
});


app.controller('ListCtrl', function($scope, $http, Evenementen){
$scope.news = [];

$scope.getMovieDB = function(){
Evenementen.list(function(evenementen){
$scope.evenementen = evenementen;
});
};

$scope.getMovieDB();
});


app.controller('DetailCtrl', function($scope, $http, $stateParams, Evenementen){
Evenementen.find($stateParams.eventId, function(evenement){
$scope.evenement = evenement;
$scope.deelnemers = evenement.alleDeelnemers;
});
});

app.controller('DeelnemerCtrl', function($scope, $http, $stateParams){
$http.get("http://localhost:8080/evenementen/"+ $stateParams.eventId+"/deelnemers/"+$stateParams.deelnemerId)
.success(function(data){
$scope.deelnemer = data;
});
});




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

// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})




Answer

Urls in Angular and ionic use hash, so your url should be:

http://localhost:8100/#/evenement/1/deelnemers/1
Comments