Ionic / Angular - 主细节中的主细节答案

【问题标题】：Ionic / Angular - Master detail within master detailIonic / Angular - 主细节中的主细节
【发布时间】：2016-08-10 05:27:00
【问题描述】：

您好，我正在尝试开发（使用 ionic，因此也使用 angular）一种功能，用户可以在该功能中查看所有活动，并查看所有参加者。在所有这些参与者中都有可用的信息，所以我尝试在主细节（所以基本上是主细节）中制作一个主细节模式。

问题是，它返回 404 而链接是 http://localhost:8100/evenement/1/deelnemers/1 并且 http 函数应该返回一个 JSON 对象，但我无法测试它，因为找不到页面或 url .

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();
    }
  });    
})

【问题讨论】：

标签： javascript angularjs rest ionic-framework

【解决方案1】：

Angular 和 ionic 中的 URL 使用哈希，所以你的 url 应该是：

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

【讨论】：

Angular（也是ionic）应用程序是所谓的“单页”应用程序，因此无需在浏览器中重新加载页面即可正常运行。它来自具有 html 标准的锚点。可以从 Angular 中的链接中删除哈希，但它还需要在服务器端进行一些更改。如果您使用 ionic，我假设您也想创建移动应用程序。那么最好留下散列，它不会对用户可见，因为当你的应用程序的网址在科尔多瓦中构建时是不可见的。