2016-08-09 5 views
0

こんにちは私は、ユーザーがすべてのイベントを見ることができ、参加しているすべての参加者を見ることができる機能を開発しようとしています。これらの参加者の中には入手可能な情報があるので、私はマスターディテールの中にマスターディテールパターン(基本的にマスターディテールディテール)を作ってみました。イオン/角度 - マスターディテール内のマスター詳細

問題は、リンクが JSONオブジェクトを返す必要がありますが、ページやURLが見つかりませんでしたので、私はそれをテストすることができませんでしたhttp://localhost:8100/evenement/1/deelnemers/1とHTTP機能である一方で、それは404を返している、です。


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

答えて

0

URLを、あなたのURLがなければなりませんので:

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

おかげで、それが働きました。しかし、イオンはなぜこれを行うのですか? – Ivaro18

+0

Angular(ionic)アプリもいわゆる「1ページ」アプリであるため、ブラウザでページをリロードしなくてもすべて機能します。それはhtml標準であるアンカーを持っています。 Angularのリンクからハッシュを削除することは可能ですが、サーバー側でも変更が必要です。 ionicを使用している場合は、モバイルアプリも作成したいと考えています。あなたのアプリのURLがcordovaでビルドされているときに表示されないので、ハッシュを残しておくと、ユーザーには表示されません。 –

関連する問題