I'm trying to shape a project with AngularJs and Restangular, as a web app, and Django / Tastypie as an API called by the app.
I have :
- an angular app doing well when run with the web-server script from the seed app.
- a django / Tastypie API returning json when urls are called.
But I don't know how to connect them ! How do I start the app with my Django API ? How should I load it ? I don't find many examples on the web ...
Many many thanks for your help.
There're two main integration libraries, Djangular and Django-Angular
Djangular provides various scenarios, but the one that makes most sense to me is this:
Create your Django app, and use Tastypie/DRF as you can to produce
an API.
Use Djangular to create a new app with manage.py startangularapp
<app_name>, which gives you the base layout for including angular.
Define a 'passthrough' url for each app, in your urls.py that points
to an index.html for each app, which as minimum contains <div
ng-view></div>.
In your app.js provide routes using the $routeProvider. You'll
need to inject DjangoProperties in to the dependencies, and use
DjangoProperties.STATIC_URL to get the right path.
Write a service that consumes the your API from 1.
Write the rest of your AngularJS app around this API
Share and Enjoy!
Related
There are plenty of tutorials and helpful posts how to use Django and Vue properly (in various options) all over the Internet.
But I didn't find a single one who describes how to create a Django application which consists of more than one app, each having it's own part of the Vue frontend.
I am creating a Django application with a Vue frontend, and it will have a lot of apps that can be plugged into the main system very easily (using a custom framework). But this only is the backend. I'd like to enable each Django app for having a "plugin" part of the frontend as well: e.g. a set of Vue components that are rendered "dynamically" in the frontend when this app is added in INSTALLED_APPS.
How can I provide "plugin hooks" in Vue to load those components? All the things I have seen (dynamic/lazy component loading with webpack using webpack-loader, etc.) is not what I want. It only describes how to load a component that is predefined later in the http request timeline.
How am I supposed to "merge" all the components? Can I simply create components in static folders and let ./manage.py collectstatic do the magic?
It doesn't matter if the application is a SPA or maybe I have to use Django templates (with Vue components included) - both would be a viable method.
Maybe this even is a webpack question and should be: How do I bring Vue (or React, etc) to collect its sources from different subdirectories like foo_app/static/, blah_app/static/, bar_app/static - is there a way to tell Vue/Webpack/etc to search in myproject/*/static for Vue components to merge?
And can I include "all components" (dynamical amount) than in another component, which is needed for such a system?
Can anyone enlighten me here - is that completely impossible? Or am I thinking in the wrong direction?
Thanks.
I have a couple of VueJS apps in my django site and I'm planning to add more.
I bundle them with webpack with the help of django-webpack-loader.
https://github.com/owais/django-webpack-loader
After reading this article about separating server and client, Separate REST JSON API server and client?
I want to know if this problem also exists in Django.
In Django, are these 2 separate phenomenons?
Django is MVC. Take out the view, have django as the backend and just send JSON. Create a separate say Emberjs or Angularjs app. Make these clients access backend's REST resources. In this case, how can you put the projects together to deploy to Heroku? Can you just deploy a "JAVASCRIPT-HEAVY-CLIENT" to Heroku, and have it just talk to ur REST server?
Since Django is MVC, don't completely take out the view, but integrate Emberjs/Angularjs into the View, but still use REST resources? In this way, you can put all the angularjs components/js files into the static folder and deploy to Heroku.
Are these the same? and realistically, how do you put them together to be able to deploy to Heroku?
Heroku is a application server platform. It's not really designed to serve static code.
The approach I've previously taken is to build the Django part normally, and have a single view that serves out a bootstrap template for everything under the JS App root.
Say I have a {Angular,Ember} app living at mydomain.com/app/, then everything under that will serve the bootstrap template (which includes serialised values queried from database) and calls the JS boostrap method to startup your app, and then the app takes over routing from that point, and renders out it's views.
At this point, all the data for the views is coming from django-rest-framework/django-tasypie.
Using this method and leveraging django-pipeline & django-boto's S3 storage backend, You should be able to serve a decently sized project with Django & {Angular,Ember}
This might be a silly question that might relate to my ignorance about angular js, but is it possible to use a Django framework mostly for backend and database interactions, in conjunction with an Angular JS app/website?
I know angular js still requires Node Js for serving the data so, it seems like that would be a conflict. There was a similar but slightly more technical and specific from what I was looking for here: Django, REST and Angular Routes
What alternatives do I have if I want to experiment with Angular JS but need some database functionality?
Also how do you go about the fact that your code will be open to everyone?
Not a dumb question. But yes, it is totally doable. I put together a git seed for an angular web app with a django rest framework api. Check it out, I think it is exactly what you are looking for. Clone it down and try it out! Easy instructions to follow.
Angular-Django Seed
There is no dependency on NodeJS whatsoever. Your web framework handles server requests, and your angular app runs in the browser. You would use Django to serve the files used by the angular runtime, typically this includes a mix of HTML, JS and CSS files.
Your angular app may request data from the server, in which case it would 'call into' your Django code via an XHR request using the built in $http service (or possibly $resource service).
I have been looking online and there are some articles about people using Django web framework and Phonegap to build mobile applications.
However, it says on phonegap to upload your HTML, JS, and CSS files to the build. Does that mean you cannot use django to build mobile apps with phonegap?
Any clarifications or steps on how to build would be great.
Think of PhoneGap as preloaded static web pages in a WebKit view. You can add JavaScript (most people use JQuery/JQueryMobile) to make it dynamic and use AJAX calls to load data from a server but rendering templates is not what it does. You can do fragments but it's not the same thing as Django Templates.
I am working on a project that handles data loading via an API from a server running Django. The App is being written in PhoneGap and uses AJAX calls for getting the extra data. I'd say look at django apps like TastyPie for helping get data. The main goals in using PhoneGap are 1) better load times of HTML since it's local, 2) Reduced traffic by only sending API data and thus better for cellular networks and 3) access to native feaures in the hardware you don't otherwise get access to with JS in a webpage.
According to the documentation, an app is a module which deals a well defined operation.
Is it correct to think about an app as a REST-based service? or is it mandatory to use some framework like piston or tastypie to create a RESTful web service around an app?
Generally, no. Django app is really just a python module, with some interfaces to django internals like models, urls, admin discovery etc.
To implement REST, you still have to manage network communications via views, and this is where you either write your own code or use the help of tastypie/piston/etc.
Please do have a look at django-rest-framework, I just stepped over from tastypie to this new framework, works great!
http://django-rest-framework.org/
Especially the class based views and the browsable api! and may other advantages (e..g. to upload images)
And to answer your question:
The rest-base service is an extra entry to your webapp.
I made some api's for some projects using the django-rest-framework, most project members were surprised they got a webapp as an extra, while it was actually the other way around. You make a django app (with views models and urls) and on top off that you make the api.