I am working on a Laravel project with Backbone.js and I am stuck with router issues. I want my Laravel project to be a Single Page App (SPA), so at Backbone.js side, I am using hash fragments for links, but Laravel's Route is not recognise my Backbone's hash signs.
I understand that there is also pushState alternative for this purpose.
How can I use routers for a Single Page App, for both server and client side?
When you use Backbone.js you communicate the server through its API. In your Laravel project just create a RESTful API, so you can GET and POST data from/for it. In Laravel you use only models representing the resource and controllers handling the API requests. The routes for these API controllers don't have to care about hashtags, they are just regular routes. In the Backbone client all you have to do is to set the API URLs in your models to your resources in your Laravel back end, then you can fetch and use them.
Related
I am trying to integrate Angular with Django. I have 2 approaches which one is the best way:
Build a separate angular app and serve it's static files to django to render. In this way the routing and rendering everything will be handled by Angular.
Or to build templates in django using Angular directly and use MVT architecture of Django only.
Which is the correct way from architecture point of view? If not these two please suggest any good approach.
I'm not using AngularJS (actually I'm using VueJS but it's kinda the same) but here is what is usually done :
You do your models as usual, using Django. It defines your database structure.
You build an API that exposes your datas. For that you can use DRF (Django Rest Framework) for a REST API or graphene-django to build a GraphQL API)
You code components to build pages. And you retrieve your datas to display from the API.
For my project, I personnally use :
Django
graphene-django for a GraphQL API
Apollo Client to fetch data from the GraphQL API
VueJS for the frontend components
There are lots of tutorials on how to combine all of these so I guess there are some for AngularJS too.
You should be able to do something similar with AngularJS.
Finally, it is more like the first approach that you described. You'll have some build step that will create a bundle of files with a index.html or similar. The thing to do is to tell Django : "Hey, for any URL, point to that file".
Note that the thing I'm describing is for building a SPA (Single Page Application).
Currently I have an application built with Angular 2 (all the front-end side) and Symfony 3 (web framework) . I have defined each view as an Angular application.
I think it's the time to migrate to a Single App but I have some questions before I venture into the lion's den.
If a user change manually the URL, of course, they, should enter to the requested URL, but how can angular know which url is trying to open?
I should create multiple controllers or only one that catch all the requests?
If none of above are the right way, please, can you suggest any way to do it?
Thank you so much.
If you're trying to build a Single Page application, it means that your routes will be managed by your front-end, here by Angular 2 via #angular/router.
Symfony can then be only used as a back-end web service (i.e. a Restful API) that will answer to your front-end calls via JSON responses. Depending on the size of your API, you may wish to use FOSRestBundle for that purpose.
So you don't have to worry about Symfony routing interpretation since your urls will be managed by Angular router. Symfony routes will be called directly by your Angular application to get/post/put/delete/patch your back-end data.
UPDATE
To answer you comment, a user who directly enters a URL will simply see the page you linked to this url via Angular routing, there is (almost) no difference between front-end and back-end routing.
If you want to dive deeply in how hash routing works in javascript, you can check this article.
To see a real-life example of a SPA with full Angular routing, ga.me is a good start.
I am developing an app with an AngularJS front end and a Laravel API backend. The Laravel backend just listens for requests, process them and returns an answer. Front and back end are different independent apps... so far. I did it in such a way in order to be able to develop a mobile app later on which could consume the API. Im using also JWT to authenticate users, so Im not using Laravel's sessions at all. At this point I only require a webapp. I built a webapp which uses angular ui-router.
So far so good. The front end and the back end work well. However some of the front end views will be public and require share buttons, they also require to be indexable by Google.
I've read there are some alternatives.
Make some hack using the apache mod_rewrite in order to serve the angular app for people and a static version of it served directly by the backend. I think this would not be very difficult using Laravel.
Using Prerender.js. Which as far as Im concerned does pretty much the same job than option 1 but in a more complete manner.
However I am thinking about using a third alternative. Given that I only require the webapp now and the API is working I am thinking about using Laravel's built-in webapp functionality. I can use the controllers, directives and factories from angular and let Laravel handle the webapp routing.
An advantage of this is that I can render the meta tags using Blade (this fixes completely the SEO issues) and serve the rest of the contents using angular and the API.
Do anyone of you can see drawacks of such a solution or do you know a better way to accomplish SEO purposes using angular and Laravel?
Render Site :
You will have to render the pages from server side if you want to make it SEO friendly. But yes, what if you serve the server rendered pages to bots only. And for real users client side rendering will work.
Read about the Rendertron which will detect the user agent and accordingly serve the html.
Meta Tags :
Use Sluggable and replace id with slug in urls. You can follow https://oodavid.com/article/angularjs-meta-tags-management/
Routing functionality is defined in both ExpressJS thru app.get('/*') and in AngularJS thru
$routeProvider.
when('/*
What is the case scenario for needing to define routes thru both?
Part 2.
Server and Client Communication in AngularJS takes place thru REST API ? ( can it be handled thru socket.io?)
Part 1
Angular is only on the front end, so if you need to make calls to your database (getting data or posting data), it'll likely go through a route that the backend (Express) created (app.get, app.post).
If all your data is coming from someone else's site (API) and you don't need to store anything, then in that case you might not need any routes on the back end.
It really depends on what you're building. If I build a 'to do' list, I can have a 'Tasks' and 'Completed Tasks' page using Angular routes and then post and get routes in ExpressJS. You can also have multiple SPA (single page applications) on Express in turn you may need another Angular module that will have it's own routes.
Answer to your Part 2.
AngularJS using SocketIO
AngularJS is an SPA (Single Page Application) framework. For SPAs which need pages to be loaded can be used to route thru Angular so
when('SPA1/...
to define particular SPA which may be subset of your total app can be routed thru Angular. Where as your regular routes app.get('/home ... can be done thru ExpressJS.
I've built a simple REST API using the Play Framework 2.1 (just controllers that expects different kind of calls on different routes)
The API is already working fine but now I am trying to add a front end app using mostly JavaScript and for this purpose I want to use Backbone.js. I've started with a simple router trying to render some views but when I try to open for example the following URL:
http://somehost.com:9000/projects
It seems that it is the Play Framework router the one that is trying to resolve the URL and not the Backbone.js Router.
Is it actually possible to mix this behavior...I mean have the REST API routes to be handled by the Play Framework and have other set of routes that will be handled by the Backbone.js Router?