Exploring the depths of Master-Detail functionality with Ionic and Angular, unlocking nested

Hey there! I'm currently working on a project using Ionic and Angular, where users can view events and see all the attending participants along with their information. To achieve this, I implemented a master-detail pattern within another master-detail (essentially a master-detail-detail).

The issue I am facing is that when trying to access the link

http://localhost:8100/evenement/1/deelnemers/1
, it returns a 404 error. The HTTP function is supposed to return a JSON object, but I haven't been able to test it due to the page or URL not being found.


app.js

// Ionic Starter App

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 success");
    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) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });    
})

Answer №1

In Angular and Ionic, URLs utilize a hash, therefore your URL should appear as follows:

http://localhost:8100/#/event/1/participants/1

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VueJS fails to display table information

I am facing an issue with rendering data from my API using VueJS 2. Although the backend services are successfully sending the data, the HTML table does not display it. There are no errors shown in the debug console, and even the Vue Debug extension for Fi ...

Even after setting the handler to return false, Angular continues to submit the form

In the following scenario, I have encountered an issue: Here is the HTML template snippet: <form [action]='endpoint' method="post" target="my_iframe" #confirmForm (ngSubmit)="submitConfirmation()"> <button type="submit" (click)="conf ...

Issue with Snackbar slide transition not functioning properly in mui 5

Transitioning from material-ui 4 to mui 5 has presented me with a challenge. Whenever I try to display my snackbar, an error pops up in the console. After some investigation, I realized that the issue lies within the Slide component that I'm using as ...

Establishing Redux States within the Provider (error: Provider encountering useMemo issue)

Exploring redux for state management has been a new journey for me. I am hoping it will help reduce API calls and increase speed, but I've hit a roadblock with an error that I can't seem to figure out. To troubleshoot, I created a simplified vers ...

When using Vue.js, binding may not function properly if it is updated using jQuery

Link to JsFiddle Below is the HTML code: <div id="testVue"> <input id="test" v-model="testModel"/> <button @click="clickMe()">Click me</button> <button @click="showValue()">Show value</button> </div& ...

What is the scope parameter for the facebook-node-sdk in node.js?

https://github.com/amachang/facebook-node-sdk I decided to utilize this module in order to create a Facebook-integrated login for my node.js project, following the example provided with express: var express = require('express'); var Facebook = ...

Steps for configuring gulp-watch with a TFS project to prevent the EPERM problem

In my current project, I am utilizing angularJS with bower for managing dependencies on the web UI and npm for handling dependencies like bower, gulp, karam, etc. This project is stored in TFS and we are using VS2013 as we have a Web API v2 project that re ...

Issues encountered with Three.js MeshBasicMaterial functionality

I am currently working on generating a texture using Three.js. The texture_f1 source I am using is a .png file, which allows the background to show through. The issue arises when attempting to set the background color using color: 0xffffff in conjunction ...

Guide to combining an object with an array object in Vue.js

After receiving an API response's data, [{id: 1, name:"Test 1"},{id: 2, name:"Test 2"}] I am working on my component .vue file. ... created() { const request = axios.get("***api_url***").then(response => { ...

Tips for changing the TextField variant when it receives input focus and keeping the focus using Material-UI

When a user focuses on the input, I'd like to change the variant of the TextField. The code snippet below accomplishes this, but the input loses focus. This means the user has to click again on the input to focus and start typing. import React, { useS ...

Is there a way to retrieve the value from a moment-formatted date picker in the (YYYY-MM-DD) format?

I have a Vue application with a datepicker from Ant Design Vue that is returning the following moment object: Moment {…} _d: Thu Oct 24 1996 00:00:00 GMT+0800 (Malaysia Time) _f: "YYYY-MM-DD" _i: "1996-10-15" _isAMomentObject: (...) _isUTC: (...) _isVal ...

Retrieve data from HTML Form arrays using JavaScript

I have a situation in my forms where arrays are being sent back in the following format: <input class="checkbox-service" name="services['electricity']" type="checkbox"> <input class="checkbox-service" name="services['water'] ...

Tips on obtaining the element that was used as the event selector

I am facing a challenge with a specific issue. Within a div containing various elements, I have implemented a mouseover event. The issue arises when trying to target this particular div in the mouseover function, as there are multiple automatically genera ...

Strategies for Handling Errors within Observable Subscriptions in Angular

While working with code from themes written in the latest Angular versions and doing research online, I've noticed that many developers neglect error handling when it comes to subscription. My question is: When is it necessary to handle errors in an ...

Once an element is removed from ng-repeat, it does not provide the capability to remove or conceal the element from

The following code is used to display records using ng-repeat: <div class="gallery"> <div ng-cloak ng-repeat="photo in photos| orderBy:'-id'" ng-mouseLeave = "delete_btn = !delete_btn" ng-m ...

The dynamic form is programmed to display identical values for both the initial and subsequent inputs

Currently, I am developing a personalized dynamic form utilizing the Material UI library as the component for my React Js application. You can find more information about this library at https://mui.com/. In front of you is the initial setup of the dynami ...

Tips for retaining the value of a variable in JavaScript

I am a page that continuously redirects to itself, featuring next day and previous day arrows. Upon loading, the page always displays the new day. The days are stored in a localStorage as follows: for(var i = 0; i < status.length; i++) { local ...

Adapt vanilla JavaScript code to be compatible with Node.js, MongoDB, and Express framework

In the midst of working on a blog project for my class, I find myself faced with the challenge of integrating Nodejs, Mongo, and Express into our existing setup. Up until now, we have been gradually transitioning to using Express in our application develop ...

What is the best way to start tiny-slider automatically once the video has ended?

I am currently using the tns-slider plugin and have a setup with 3 slides (2 photos and 1 video). <div class='tiny-slider'> <div class='slide slide1'> <div class='video-slide'> <video id=&qu ...

Executing a server-side Java function from client-side JavaScript or jQuery on a JSP page

My JSP file has a dropdown list where I can select different entity kinds. Upon selecting an entity kind, I want to populate another dropdown list with the field names associated with that entity kind. This requires calling a JavaScript function when chang ...