Slide 1

Slide 1 text

Angular and Django Thierry Sans

Slide 2

Slide 2 text

Create a project $ django-admin.py startproject webgallery

Slide 3

Slide 3 text

Summary URLs Served by Django / statically /static/* statically /api/* dynamically

Slide 4

Slide 4 text

1. serving / statically

Slide 5

Slide 5 text

1.1 import index.html webgallery/ manage.py index.html webgallery/ __init__.py settings.py urls.py wsgi.py

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

1.3 Test localhost:8000/ You should see your index page But lot of errors : resources (css, js, …) cannot be found

Slide 8

Slide 8 text

2. serving /static/* statically

Slide 9

Slide 9 text

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/ ...

Slide 10

Slide 10 text

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")]

Slide 11

Slide 11 text

2.3 Test resources You should see resources such as • localhost:8000/static/style/style.css • localhost:8000/static/app/webgallery.js • ...

Slide 12

Slide 12 text

2.4 Update your fronted ➡ You should remove all errors by modifying the path of resources

Slide 13

Slide 13 text

3. serving /api/* dynamically

Slide 14

Slide 14 text

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' )

Slide 15

Slide 15 text

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\w+)/$', views.getImgInfo,name='getImgInfo')] api/urls.py webgallery/urls.py from django.conf.urls import include, url
 urlpatterns += [url(r'^api/', include(‘api’))]

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

3.5 Test services You should see the services such as • localhost:8000/api/helloworld/ • localhost:8000/api/img/23/ • ...

Slide 18

Slide 18 text

4. Complete the API

Slide 19

Slide 19 text

5. Interface the frontend with the API