15-437 Angular and Django

Transcript

1. Angular and Django Thierry Sans
2. Create a project $ django-admin.py startproject webgallery
3. Summary URLs Served by Django / statically /static/* statically /api/* dynamically
4. 1. serving / statically
5. 1.1 import index.html webgallery/ manage.py index.html webgallery/ __init__.py settings.py urls.py wsgi.py
6. 1.2 Configure webgallery/urls.py from django.conf import settings from django.views.static import server if settings.DEBUG: urlpatterns += [url(r'^(?:index.html)?$', serve, {'path': 'index.html','document_root': settings.BASE_DIR})] webgallery/urls.py
7. 1.3 Test localhost:8000/ You should see your index page But lot of errors : resources (css, js, …) cannot be found
8. 2. serving /static/* statically
9. 1.1 import all static files 
 in /static/ webgallery/ manage.py index.html webgallery/ __init__.py settings.py urls.py wsgi.py static/ app/ includes/ media/ style/ ...
10. 2.2 configure settings.py 
 to serve /static/ files webgallery/settings.py # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.9/howto/static-files/ STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, “static")]
11. 2.3 Test resources You should see resources such as • localhost:8000/static/style/style.css • localhost:8000/static/app/webgallery.js • ...
12. 2.4 Update your fronted ➡ You should remove all errors by modifying the path of resources
13. 3. serving /api/* dynamically
14. 3.1 Create an app called api • Create the app $ python manage.py startapp api • Configure webgallery/settings.py # Application definition INSTALLED_APPS = ( 'django.contrib.admin', ... 'django.contrib.staticfiles', 'api' )
15. 3.2 Configure the url dispatchers • webgallery project URL dispatcher • api app url dispatcher from django.conf.urls import url from . import views
 urlpatterns = [ url(r'^helloworld/$', views.helloWorld, name='helloWorld'), url(r'^img/(?P<id>\w+)/$', views.getImgInfo,name='getImgInfo')] api/urls.py webgallery/urls.py from django.conf.urls import include, url
 urlpatterns += [url(r'^api/', include(‘api’))]
16. 3.3 Write the services from django.shortcuts import render # Create your views here. from django.http import JsonResponse def helloWorld(request): response = JsonResponse("helloworld",safe=False) return response def getImageInfo(request,id): print id response = JsonResponse(id,safe=False) return response api/views.py
17. 3.5 Test services You should see the services such as • localhost:8000/api/helloworld/ • localhost:8000/api/img/23/ • ...
18. 4. Complete the API
19. 5. Interface the frontend with the API