In Angular 2 app that's served by Django, how to make the Angular 2 URL work with Django when reloading the page?
Specifically, say a page served by Django has the url http://localhost:8000/home. The page contains 3 tabs and under one of which is an Angular app. Clicking on that tab shows the Angular app, and the url changes to http://localhost:8000/home/ng_app. Now if the browser is refreshed with this url， Django will show a 404, which makes sense because http://localhost:8000/home/ng_app is not present in the Django app.
So how to make the Angular URL work? (entering http://localhost:8000/home/ng_app leads to the Angular app instead of 404). Thanks!
Assuming that your entire app is served from /home, you can just use the following url pattern:
urlpattern('/home/.*$', views.my_angular_homepage)
If you want to also redirect to the route of everything after you can use any of the standard tricks to capture the trailing part of the URL, and then do a $location.path in you angularJS app.
You should consider using hash bangs in your angular app as URLs. Checkout this tutorial I found by googling which also uses has bangs for URLs.
In this way the angular app URLs wont conflict with your Django app and Angular would pick it up for routing purposes
Use url(r'^/home/(?!ng_root/).*$' where ng_root is the root url of the angular static files.
Checkout my blog post for more details https://4sw.in/blog/2016/django-angular2-tutorial/ .
Related
I'm building an application that uses React as front-end and Django Rest as back-end.
From front-end, I'm using react-router-dom for declarative routing and Django only serves API
So when user enters an URL like this https://myapp.com/something/something-else, it's actually handle by Django and it will return an error since Django doesn't know which page to lead to with this URL. It should be handled by React instead.
One of the workaround I have is to use a Hash Router, so the URL will look like this (with the hash symbol): https://myapp.com/#/something/something-else
But there have been cases where user will just key the URL without the hash sign (as they didn't know).
Is there away to handle this without using Hash Router?
I can't say exactly because you haven't provided code, or an explanation of your project structure.
How are you doing a hash-router? If you have Django serving a single HTML file, then you should be able to edit your urls.py to pass any URLs that don't match the api to the same page.
As an example, I have a Django website with a Preact frontend, and I have Preact files that are built into static .js files, which are then served by Apache. Django does all URL routing and serves HTML files, which then request the Preact JS files from Apache.
I'm currently creating a website in Django and Angular. Django is serving the Angular build files. Excluding /api calls, all URLs are returned a template that loads the Angular index. This part works.
The part I'm having trouble with is when I try to lazy-load modules. Angular will try to find a module foo at localhost:8000/foo-module.js, but it's really at localhost:8000/static/mydjangoapp/angular/foo-module.js.
I know I could solve this problem by setting <base href="/" /> in index.html to <base href="/static/mydjangoapp/angular" />, but I want the frontend to be served from /. I could also avoid lazy-loading modules, but I feel like there's a better way to serve Angular from Django using which I can lazy-load.
How can I get Angular to properly fetch the URLs? I'm also having a similar issue with serving Angular assets.
I have created a REST API in Django to pull data from my database. I have a front end application built with Angular that makes calls to that same API. The API has a few URL's, and I have one other URL to serve up index.html and handle the routing. Angular injects the "#/" into the URL. Ideally I would not have that, but when I use the HTML5 mode and location provider, Django picks up the URL and does not see the specified URL in its list and therefore throws an error.
I have seen some resources online, but they are not very clear to me.
Basically, what are accepted best practices with regard to creating angular applications with a Django backend.
I appreciate your help! Thank you in advance.
If you want to serve the index.html for every url and then do the routing in angular you can do somethings like this in your <project_folder>.urls.py
from <your_app> import views
urlpatterns = patterns('',
url(r'^.*$', views.index),
)
I have a backbone.js single-page app that is all set up with the router (well, actually a Backbone.Marionette app with a Backbone.Marionette AppRouter, but nevertheless). However, the backend is based in Django, where I do not have the URL conf directing to views for all URLs that are already in the backbone.js routes.
Based on the existing URLs in the Django URL conf, Backbone.js will serve the backbone routes regardless of what is listed in the Django conf - it seems something, anything just needs to be there.
Do I need to have proper Django views in order to offer a fallback for older browsers/SEO?
What are the best practices to coordinate the Django URL conf and the Backbone.js Router?
I've found a post that addresses this issue quite well:
http://duganchen.ca/single-page-web-app-architecture-done-right/
Briefly, my reasoning for including a fallback is for non-javascript browsers and SEO reasons. At the time of this post, non-javascript browsers account for ~1.4% (less than 2% from everything I've read) of users, making SEO The major consideration. Again, SEO may not be relevant for everyone reading this post, in which case, this can be skipped.
I found Thomas Davis' tutorial using phantom.js quite helpful. http://backbonetutorials.com/seo-for-single-page-apps/
However, another issue that I needed to account for was the history API, which has been neglected by all but the latest IE browsers. Given my client's users, about 15% of which are using IE <= 9, this was also a problem.
In the end, I also needed to use history.js. All in all, this was a lot of work to update an otherwise very simple website. However, I learned a lot from this ordeal.
In my opinion if your backbone app is truly a single page then you don't need any django views whatsoever. You can serve your index.html as a static file (in production, not even by django) and then let backbone's router take care of your url configuration, as you're doing already. You can use backbone's history and navigate to fake urls, add urls parameters etc, for resources in your app.
I have a client who has an already-completed wordpress site, and they want to add osqa.net into the site. I'm the Django dev on the project, and I'm a little behind on my wordpress.
Is there a way to embed another web application's content into a wordpress page's content?
Should I just be doing this with an iframe? I would have to pass parameters from the wordpress url into the iframe url.
edit: Ideally anything in the url after /questions (like parameters and paths) would be passed onto a django application. The django application would render a response, wordpress would take that response and include it in it's page. Are there wordpress plugins that already exist like this?
You'd need to hack OSQA to hide extraneous HTML and return only the pieces you want to include. That seems like a lot of effort for minimal benefits. I'd use an iframe.