Angular2 and Symfony combined in the same application - symfony

this is my first question on stack overflow so please be kind!
I have designed a Symfony server based application with an almost complete backend interface. Using symfony router, i can login in the backend using a url (ex. www.domain.com/admin) and see backend pages.
Based on this backend, i want to create an Angular2 application for dealing with the front end. It is quite straight forward to make it working for the front page url (www.domain.com). However, if i use any subroutes which would otherwise work in an Angular2 app (ex. www.domain.com/inner-page), Symfony router takes over and throws a 404 Not Found - NotFoundHttpException.
The question is, how can i use both routers in "parallel"? Any URL under www.domain.com/admin will be handled by Symfony router, and any other url by Angular2 router?
EDIT
Thank you for your replies!
I have something in mind. It might not be elegant, since it will require manual exclusion of angular routes from symfony, and vice versa, but it will look cleaner. I am still working on it though, so its still a theoretical concept:
For each url containing "/admin/", Symfony router will serve backend twig-php pages as it is designed to do. For any other url however, a simple controller will just serve the angular app.
On the other hand, in the front end, Angular router will work as it would normally do. However, if a url contains "/admin/", it will be handled by an Angular component that will simply change window.location.href within its OnInit function to redirect to Symfony backend.

The angular app should be built separately, Symfony is a back end framework and isn't a good choice to use for building angular apps.
I created an example of how to use the 2 together, with FOS User Bundle and FOS OAuth Server Bundle to deal with authentication.
It's a couple of years old now, but should give you a good idea of how to go about using them together.
Github is down right now, but I'll update this with a link when it comes back.
edit:
https://github.com/mbates/Symfony2-AngularJs

There is AngularUI routing framework available in AngularJS for routing purposes in your AngularJS application. You can use Angular UI-Routing framework to govern your application's frontend while Symfony2 take care of the backend of your application. Angular JS UI-Routing URL's will looks like this,
www.domain.com/#page1
instead of this,
www.domain.com/page1
After the hash (#) the url will not be a part of Symfony2. The place where you map Symfony2 urls with Angular UI-Router urls will be within states. Take a look at this tutorial. I hope AngularUI will solve your issue :)
Cheers!

Related

Added angular project into a current ASP.NET website

i am having a problem which i want to combine my old ASP.net website into a new web project but i want to remain my current ASP.net backend. And its mean i just want to change the front end only for this thing.
The front end that i want to try is using the Angular JS, but soon i found out that wasnt easy to setup for this project.
Because when have angular project it need to build only can work, so how do i have the project to star this new front end. I not clear what should i start as a correct way.
Or it must separate to a new project and redo the front end and backend?
Angular usually uses REST calls to communicate with the back-end. With ASP.NET the back-end renders the page and sends the complete HTML page to your browser. In Angular your browser renders the incomplete HTML page and then fill it with the result from your REST call.
In your case you will have to add a REST layer to your back-end. Then you can create an Angular project which calls this REST layer. So these are 2 seperate projects.
These are some usefull links that might help you:
https://learn.microsoft.com/en-us/aspnet/web-api/overview/older-versions/build-restful-apis-with-aspnet-web-api
https://spring.io/guides/gs/consuming-rest-angularjs/

What are reliable ways to identify/spot a single page application (SPA)?

When viewing a web application as a user, what are some reliable ways to determine if the app is a single page application (SPA)?
Depending on the framework used, the URL might make extensive use of hashtags. IF you click on navigation links, etc and the URL looks like http://somesite/#/some/route, then it is using hashtag-based routing and is a SPA. Angular 1.x did this for a while. However, newer routing engines use HTML5 features that make the route look like a normal URL: http://somesite/some/route. This URL would be indistinguishable from a non-SPA site. In that case, the only way to tell it is a SPA is to look at the javascript code (Does it use a SPA framework) and/or network traffic (when you click a link does it get the whole page, or just some JSON needed for the current view).

How to use/integrat the Piwik tracking API in Symfony 2 without JavaScript

I would like to track the users on my Symfony 2.7 page using Piwik.
Piwiks default tracking option is the integration of a small JavaScript into the webpage, e.g. with the page footer. Of course this could easily be done by adding the code to the base Twig template.
However I would like to avoid the usage of JavaScript. My Symfony page and the Piwik page both run on the same server. Actually I am surprised that letting the client communicate with Piwik (over Javascript) is the recommended option instead of a direct way to let the webpage server talk to Piwik.
I think the Tracking HTTP API and the PHP Client are what I am looking for. However I am not sure on how to integrate this into Symfony.
I managed to connect my Symfony page with Piwik, however I wonder if this the right/best way to do it:
Used composer require "piwik/piwik-php-tracker" to add the PHPTracker to my Symfony project
Added a new Service that is responsible to create and manage a PiwikTracker object. The Service makes different methods of the Tracker, e.g. doTrackPageView() available to the rest of the project.
Added a new Twig function which uses the Service to trigger the doTrackPageView() method.
Added a call to this function to my base template
This works fine: Page views are correctly reported to Piwik and recorded without any problem. Of course I could easily add other methods to track events, actions, etc.
But: I am really surprised that I could not find any ready-to-use solution for this. Did I miss anything or is this the indented way to use Piwik with Symfony?

Subdomain routing in ASP.NET 5

I am trying to get sub-domain routing working in my ASP.NET 5 application.
I basically want to map http://api.example.com to a particular controller within my application, http://map.example.com to a different controller etc.
I have looked at various articles about this but they are all out of date and do not work with the latest version of the ASP.NET framework.
The official documentation is missing information on routing. Maybe it's my own fault for trying to use a beta product!
Looking forward to hearing some ideas of how to get this working.
If I understand your intent correctly, ASP.NET routing is not the proper way for this.
If this was for ASP.NET versions before 5.0, I'd have suggested that you intercept the request before it's routed within Application_BeginRequest() and check for HTTP_HOST Request Header value to determine which site the user wanted to visit.
I see that the application flow has changed in a major way with vNext. However, I came across this sample from the ASP.NET MVC 6 source on github that creates a custom route based on a "User" header in the request:
https://github.com/aspnet/Mvc/tree/dev/samples/CustomRouteSample.Web
I believe this may be the starting template for a similar solution to your issue if you use "HTTP_HOST" header instead.
Good luck, let us know if you're able to implement a working solution.

Detect browser when site is accessed

Is there anyway to detect browser version in symfony prior to loading any pages and then run a corresponding action? I was thinking of using modernizr, but I was hoping to not have to rewrite all my views.
Basically what I was hoping I could accomplish is that before the framework attempts to match the url to a route it would first check to see if the user has a particular browser version and if not run another controller instead of the the controller defined in the route.
I think what your suggesting is not a "best practice". I'm assuming you want to route a mobile request to a unique Action method in a Controller. You really shouldn't have a separate controller based client device. This is the job of the (V)view in MVC.
Modernizr is a client side solution with css,js but if youre using symfony, i would prefer server side and that requires the title of this question.. "Detecting browser on request".
While you can custom configure your app to detect the device(and its not to hard), there's also an easier option. Try this bundle. https://github.com/suncat2000/MobileDetectBundle . It does everything and allows for you to make both controller modifications or make twig aware of the browser so you can make smaller changes.

Resources