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

Ways to remove an item from firebase database

Currently, I am exploring ways to delete data stored in the Firebase database specifically under the requests category. Check out this example Below are the functions I have implemented to fetch and manipulate the data: export default { async contactArtis ...

JavaScript Array Objects

As a newcomer to the world of Javascript, I've decided to take on the challenge of creating a blackjack game. Utilizing arrays and objects for my game: card = {}, //each card is represented as an object with suit, number, and points properties playe ...

Add CSS styles directly into the shadow-root instead of the head tag | Vue.js and Webpack

Currently, I'm developing a widget that can be embedded on websites using Vue.js along with vue-custom-element. Everything was going well until I encountered an issue. The problem arises when trying to integrate a component (along with its CSS) from ...

Ensuring that all checkboxes have been selected

I have 5 checkboxes all with the attribute name set as relative-view. To confirm that all of them are checked, I know how to verify the first and last one: expect(element.find('input[name="relative-view"]').first().prop("checked")).toBe(true); ...

Struggling to properly parse JSON data using jQuery

I am a beginner in jquery and have a php script that returns JSON data. However, I am facing an issue while trying to fetch and process the result using jquery. Below is the code snippet: calculate: function(me, answer, res_id, soulmates) { conso ...

Deactivating Timeout Requests in Koa Server

I keep encountering a connection reset error. I strongly believe it's stemming from a lengthy REST request, causing it to timeout. { [Error: socket hang up] code: 'ECONNRESET' } Is there a method to deactivate request timeouts within Koa, ...

Exploring the Utilization of FormData and form.serialize within the Data Parameter of Ajax Jquery

My form includes a multiupload uploader for files, structured like this : <div class="col-md-4"> <div class="form-group"> <label class="control-label col-md-3">Location</label> <div class="col-md-9"> <?php ...

Implementing slideDown() functionality to bootstrap 4 card-body with jQuery: A step-by-step guide

Here is the unique HTML code I created for the card section: <div class="row"> <% products.forEach(function(product){ %> <div class="col-lg-3 col-md-4"> <div class="card mb-4 shadow "> &l ...

integrating a ui-bootstrap modal in a sidebar using angularjs

I recently utilized the modal example from https://angular-ui.github.io/bootstrap/ and everything worked perfectly. By using the code snippet below, I was able to successfully open the modal as shown in the example: $scope.open = function (size) { v ...

Can the default Bootstrap classes in the ExtLib application layout control be modified?

I am currently using the responsive Bootstrap theme in combination with the application layout control in extlib, but I have been unable to locate any documentation on whether it is possible to modify the predefined Bootstrap classes. In the example below ...

Exploring a JSON Object with Nested Data

I am trying to recursively parse a JSON object in JavaScript. Below is an example of the JSON structure: const obj = { tag: 'AA', type: 'constructed', value: 'ABCD1', child: [ { tag: 'BB', ty ...

Tips for sending data to Jade templates:1. Use the `locals`

Review the code below user.js exports.index = function (req, res){ res.render('user', { id: req.params.id }); }; user.jade body - var x = #{id} div.container div.headpic if (x < 10) ...

When refreshing, the useEffect async function will not execute

Upon page load, the getImages function is intended to run only once. After refreshing the page, both tempQuestionImages and questionImages are empty. However, everything works perfectly after a hot reload. I am utilizing nextJs along with Firebase Cloud ...

The existence of useRef.current is conditional upon its scope, and it may be null in certain

I'm currently working on drawing an image on a canvas using React and Fabric.js. Check out the demo here. In the provided demo, when you click the "Draw image" button, you may notice that the image is not immediately drawn on the canvas as expected. ...

Implementing a filter function in Angular 2 and Ionic 2 that is dependent on *ngFor on a separate page

I recently created a simple ion-list along with a filter to display items based on a specific key:value pair. I'm not entirely sure if I've implemented it correctly, so any suggestions on a better approach would be greatly appreciated. LIST.HTML ...

Ensuring the vue carousel component stops rendering once all of its data has been displayed

Is it possible to stop rendering a vue carousel component once its data is displayed or after a certain amount of time? I've searched for information on this, but haven't found anything relevant. Despite it being an unusual request, I still want ...

Scroll horizontally through the thumbnails with the IONIC app's slider feature

Whenever I access the list of orders and click on the right chevron detail option, I am redirected to the order detail page. On this page, there is a list of items ordered by a single person, each with a camera option to capture a picture. If there are tw ...

How can I load a specific div region using ajax for submitting a form?

I'm not sure if my approach is correct. On my main page, I have some information displayed. When you click a button, the form will load from a separate file: $('#viewport').load('/views/myView.php #targetDiv') This works fine ...

What is the best way to fetch information from an API using Angular5 with Material2 components?

Here are the 'table.component.html' and 'table.component.ts' files where I am pulling data from an API to display in a table. Below is the object received from the API: [ {position: 1, name: 'Hydrogen', weight: 1.0079, sym ...

Unrecognized files located within the same directory

My main.html file located in the templates folder also contains three additional files: date.js, daterangepicker.js, and daterangepicker.css. Despite including them in the head of the HTML as shown below: <script type="text/javascript" src="date.js"> ...