0

My RoutConfig :

{ path:'/player', name: 'Player', component: PlayerComponent }

The router directive I use :

<a [routerLink]="['Player', {id: 1}]">Player</a>

The give URL on click :

http://localhost/player?id=1

And the question is, how can I get the value of this "id" parameter with the $_GET function of PHP ?

Because right now PHP gives me an error saying that the "id" parameter does not exist. So I guess that angular 2 doesn't forward the parameter to the PHP template file when it loads it.

One of the solution could be to read the parameter with Angular and then load the content with AJAX. But I'm pretty sure there is an obvious solution that I'm missing.

PS : I know I could use the following RouteConfig :

{ path:'/player/:id', name: 'Player', component: PlayerComponent }
Ploppy
  • 14,810
  • 6
  • 41
  • 58
  • 1
    PHP is server side and Angular routing is client side. Why do you expect to get the id in PHP? When you click the router link Angular doesn't call to the server, it just updates the current page. – Günter Zöchbauer May 02 '16 at 13:58
  • It was possible and really easy to do with AngularJS and UI-Router. Angular2 is meant to be cross platform. So it should be possible, or am I missing a huge part of angular 2 ? How could I query my MySQL database without PHP ? – Ploppy May 02 '16 at 13:58
  • I don't know UI-Router – Günter Zöchbauer May 02 '16 at 13:59
  • The main thing is that they say that Angular 2 is Cross Platform. And if it was possible with AngularJS, I'm almost certain taht it's possible to do it with Angular 2. – Ploppy May 02 '16 at 14:03
  • To me this doesn't make sense. How would you get the parameter on the server when the server isn't even contacted. Why do you expect the server being involved at all? – Günter Zöchbauer May 02 '16 at 14:04
  • I did a quick website project with AngularJS that was supporting PHP Get&Post parameters, PHP Session, Login Forms etc. – Ploppy May 02 '16 at 14:07
  • Then you need to actually make a get and post request which the Angular router doesn't make. I just updates the page inside the browser. – Günter Zöchbauer May 02 '16 at 14:08
  • That is the solution I explained at the end of the my post. But it increases the loading time which is against the way Angular 2 was designed and that make me think that there is an other way to do it. – Ploppy May 02 '16 at 14:12

2 Answers2

1

The router doesn't make HTTP requests on route change and there is currently no feature that allows to enable that. If you want to pass data to the server use

http.get(...).map(...).subscribe(...);

or

http.post(...).map(...).subscribe(...);

using Http

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    So the only way to do it is to use AJAX basically ? I first load the empty page then load with AJAX the php file that could load as example an article stored in the database ? – Ploppy May 02 '16 at 14:18
  • Currently yes. . . – Günter Zöchbauer May 02 '16 at 14:19
  • Not sure what you mean by that. What would the article return? HTML, JSON? Angular2 doesn't process dynamically added HTML (no binding and component or instantiation). There are workarounds to make Angular parse HTML at runtime but it's not clear this will be officially supported. – Günter Zöchbauer May 02 '16 at 14:22
  • I was able to do all of this with AngularJS. If I can't simply load content from a database, why should I use Angular2 when I'm building a website ? I'm pretty sure there is something big that I'm missing right now. – Ploppy May 02 '16 at 14:25
  • The question might be why would you do it "this way". You can load data dynamically and bind the data using a component. The Angular team strives to resolve as much as possible statically to minimize time to first interaction for the user by reducing the code that needs to be run for showing content and minimize download size. – Günter Zöchbauer May 02 '16 at 14:27
  • The most simple example I'm trying to do right now is basically to load a page with an ID as a parameter and query the Database to get the complete profile of the user. If I understand correctly, what you are telling me to do is to load the empty profile template file and then use the Angular Http class to request a php file that would return as example the JSON data of the profile stored in the database. – Ploppy May 02 '16 at 14:34
  • The empty template might be included in the initial load anyway. You might need to reconsider how web applications are built if you want to use Angular2. Trying to use the "old" thinking with a new tool might not work well. – Günter Zöchbauer May 02 '16 at 14:36
  • By default Angular2 only load the template file of the current and keep a cache version of it. So I would need to load the empty profile template anyway. And then request the content of the profile using the http class. I know I'm new to the concept. So what I'm saying may look stupid. So feel free to correct me. Thank you. – Ploppy May 02 '16 at 14:42
  • AFAIK this is only if a route is declared as async route but by default components are included in the initial load. There is ongoing work for a build step that replaces the reflective access for binding and all other kind of stuff (also routing) that is used during development by generated code. So you should strive for making things statically resolveable instead of loading HTML from a server. I have seen it mentioned that it still should be possible to include the compiler in the bundle the client actually loads but this approach doesn't seem to be a high priority for first release. – Günter Zöchbauer May 02 '16 at 14:48
  • You said earlier that all the templates were loaded during the first load, that's why I got confused. On the other side, I agree that all the components are loaded though. But anyway I still need to request the supposed JSON file using the http class. Now, I need to figure out when I should load it. Should I put it in the constructor of the profileComponent ? – Ploppy May 02 '16 at 14:58
  • Such code is best placed into a service. I guess it's best to invoke it from the constructor of your component. See also https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service, http://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in – Günter Zöchbauer May 02 '16 at 15:01
  • I've never used the Services provided by Angular, that's why I'm having such problems I guess. Thank you very much for your help. I'm gonna learn those services :) – Ploppy May 02 '16 at 15:03
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110846/discussion-between-ploppy-and-gunter-zochbauer). – Ploppy May 02 '16 at 15:14
0

in PHP you can easily access the GET parameters using $_GET array, in this scenario :

$id = $_GET['id'];

Additionally you should always verify that given parameter exists, so the full example would be :

$id = array_key_exists('id', $_GET) ? intval($_GET['id']) : null;
if ($id === null) {
    //error handling for missing or non-int id
}

For debugging purpouses just do var_dump($_GET);. It should show you all get parameters

PolishDeveloper
  • 930
  • 5
  • 17
  • This is what I am doing right now. But I get the following error : "Undefined index: id". So I suppose that Angular2 doesn't forward URL parameters by default and I am looking for a way to do it. – Ploppy May 02 '16 at 14:10
  • Then try to check the full server uri. You can check or browser dev tools (network tab) to check outgoing requests, or check the apache/nging logs to see the GET request, or you can dump the full request URI in PHP (http://stackoverflow.com/questions/6768793/get-the-full-url-in-php) – PolishDeveloper May 02 '16 at 14:19
  • Thank you for the info, I checked and the url is : http://localhost/templates/player.php so there is no parameters which brings me back all the way to the beginning : Angular2 doesn't forward parameters to the php file. – Ploppy May 02 '16 at 14:23