Making Django sites more responsive with REST and

AngularJS

August 27th 2014

Hi Irsquom Hanneshanneshapke

hanneshapkegithubio

A regular Django site

Github httpsgithubcomhanneshapkefruitloop_django

Hi Irsquom Hanneshanneshapke

hanneshapkegithubio

A regular Django site

Github httpsgithubcomhanneshapkefruitloop_django

A regular Django site

Github httpsgithubcomhanneshapkefruitloop_django

A Django site using REST and AngularJS

Github httpsgithubcomhanneshapkefruitloop_angular

Sync vs Async

hellip is synchronous

The Python heroes are working on a fix

PEP 3156

httppython-notescuriousefficiencyorgenlatestpep_ideasasync_programminghtml

hellip is synchronous

The Python heroes are working on a fix

PEP 3156

httppython-notescuriousefficiencyorgenlatestpep_ideasasync_programminghtml

The Python heroes are working on a fix

PEP 3156

httppython-notescuriousefficiencyorgenlatestpep_ideasasync_programminghtml

But what is the solution in the mean time

+ +

hellip

httpwwwairpaircomjsjavascript-framework-comparison

+ +

hellip

httpwwwairpaircomjsjavascript-framework-comparison

Donrsquot change your project hellip

bull hellip because it is hip

bull Creates new and larger code base time consuming

bull Requires a different eco system

bull Do it if your Django site should become responsive and more user-friendly

If you still think itrsquos a good idea here are the steps

Step 1 Create an API endpoint to your Django model

REST

bull Representational state transfer

bull Django REST Framework tasty-pie PyDannyrsquos Choosing an API Framework for Django

bull Django REST Framework with GIS support

bull Django REST Framework 3 Kickstarter pound32650

If you still think itrsquos a good idea here are the steps

Step 1 Create an API endpoint to your Django model

REST

bull Representational state transfer

bull Django REST Framework tasty-pie PyDannyrsquos Choosing an API Framework for Django

bull Django REST Framework with GIS support

bull Django REST Framework 3 Kickstarter pound32650

Step 1 Create an API endpoint to your Django model

REST

bull Representational state transfer

bull Django REST Framework tasty-pie PyDannyrsquos Choosing an API Framework for Django

bull Django REST Framework with GIS support

bull Django REST Framework 3 Kickstarter pound32650

REST

bull Representational state transfer

bull Django REST Framework tasty-pie PyDannyrsquos Choosing an API Framework for Django

bull Django REST Framework with GIS support

bull Django REST Framework 3 Kickstarter pound32650

What to dobull `pip install djangorestframework`

bull Add to your settingspy

bull Create a REST serializers for your models

bull Create API views for your serializers

bull Update your urlspy

Image http4gbloggingcrewglobal2viceduaufiles201407boom-2gjd45ejpg

Image http4gbloggingcrewglobal2viceduaufiles201407boom-2gjd45ejpg

Thatrsquos it with Django

Hey Djangomeet AngularJS

Step 2 Set up your js environment

and install AngularJS

What A new eco system Based on nodejs

Boweriobull Package manager for front-end js

bull Works like pip but itrsquos pip can be configured

bull Install it with `npm install -g bower`

bull Run `bower init`

bull Install packages `bower install [package] --save`

What to dobull Created a bowerrc file to point at the js assets

folder of the django project

bull Installed the angular core package with `bower install angular --save`

bull Bower creates a bowerjson file similar to your requirementstxt from pip

1 2 directory fruitloop_angularassetsjs 3 json bowerjson 4

Step 3 Create a

static AngularJS site

30 second Intro to AngularJSbull Angular offers

Controllers - Changes site behaviourServices - Provides data access (eg REST)Directives - Create your own DOM elements

bull Angular offers DOM attributes ng-show ng-repeat ng-click etc

1 lttr ng-repeat=item in itemsgt 2 lttdgt itemname - itemprice | currency lttdgt 3 lttrgt

What to do

bull Set up the settings path for your js assets

bull Created a static html site and serve with DjangorsquosTemplateView

bull Create a sample js array to test your Angular setup

bull Created a controller to serve static data

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Hey Djangomeet AngularJS

Step 2 Set up your js environment

and install AngularJS

What A new eco system Based on nodejs

Boweriobull Package manager for front-end js

bull Works like pip but itrsquos pip can be configured

bull Install it with `npm install -g bower`

bull Run `bower init`

bull Install packages `bower install [package] --save`

What to dobull Created a bowerrc file to point at the js assets

folder of the django project

bull Installed the angular core package with `bower install angular --save`

bull Bower creates a bowerjson file similar to your requirementstxt from pip

1 2 directory fruitloop_angularassetsjs 3 json bowerjson 4

Step 3 Create a

static AngularJS site

30 second Intro to AngularJSbull Angular offers

Controllers - Changes site behaviourServices - Provides data access (eg REST)Directives - Create your own DOM elements

bull Angular offers DOM attributes ng-show ng-repeat ng-click etc

1 lttr ng-repeat=item in itemsgt 2 lttdgt itemname - itemprice | currency lttdgt 3 lttrgt

What to do

bull Set up the settings path for your js assets

bull Created a static html site and serve with DjangorsquosTemplateView

bull Create a sample js array to test your Angular setup

bull Created a controller to serve static data

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Step 2 Set up your js environment

and install AngularJS

What A new eco system Based on nodejs

Boweriobull Package manager for front-end js

bull Works like pip but itrsquos pip can be configured

bull Install it with `npm install -g bower`

bull Run `bower init`

bull Install packages `bower install [package] --save`

What to dobull Created a bowerrc file to point at the js assets

folder of the django project

bull Installed the angular core package with `bower install angular --save`

bull Bower creates a bowerjson file similar to your requirementstxt from pip

1 2 directory fruitloop_angularassetsjs 3 json bowerjson 4

Step 3 Create a

static AngularJS site

30 second Intro to AngularJSbull Angular offers

Controllers - Changes site behaviourServices - Provides data access (eg REST)Directives - Create your own DOM elements

bull Angular offers DOM attributes ng-show ng-repeat ng-click etc

1 lttr ng-repeat=item in itemsgt 2 lttdgt itemname - itemprice | currency lttdgt 3 lttrgt

What to do

bull Set up the settings path for your js assets

bull Created a static html site and serve with DjangorsquosTemplateView

bull Create a sample js array to test your Angular setup

bull Created a controller to serve static data

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

What A new eco system Based on nodejs

Boweriobull Package manager for front-end js

bull Works like pip but itrsquos pip can be configured

bull Install it with `npm install -g bower`

bull Run `bower init`

bull Install packages `bower install [package] --save`

What to dobull Created a bowerrc file to point at the js assets

folder of the django project

bull Installed the angular core package with `bower install angular --save`

bull Bower creates a bowerjson file similar to your requirementstxt from pip

1 2 directory fruitloop_angularassetsjs 3 json bowerjson 4

Step 3 Create a

static AngularJS site

30 second Intro to AngularJSbull Angular offers

Controllers - Changes site behaviourServices - Provides data access (eg REST)Directives - Create your own DOM elements

bull Angular offers DOM attributes ng-show ng-repeat ng-click etc

1 lttr ng-repeat=item in itemsgt 2 lttdgt itemname - itemprice | currency lttdgt 3 lttrgt

What to do

bull Set up the settings path for your js assets

bull Created a static html site and serve with DjangorsquosTemplateView

bull Create a sample js array to test your Angular setup

bull Created a controller to serve static data

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Boweriobull Package manager for front-end js

bull Works like pip but itrsquos pip can be configured

bull Install it with `npm install -g bower`

bull Run `bower init`

bull Install packages `bower install [package] --save`

What to dobull Created a bowerrc file to point at the js assets

folder of the django project

bull Installed the angular core package with `bower install angular --save`

bull Bower creates a bowerjson file similar to your requirementstxt from pip

1 2 directory fruitloop_angularassetsjs 3 json bowerjson 4

Step 3 Create a

static AngularJS site

30 second Intro to AngularJSbull Angular offers

Controllers - Changes site behaviourServices - Provides data access (eg REST)Directives - Create your own DOM elements

bull Angular offers DOM attributes ng-show ng-repeat ng-click etc

1 lttr ng-repeat=item in itemsgt 2 lttdgt itemname - itemprice | currency lttdgt 3 lttrgt

What to do

bull Set up the settings path for your js assets

bull Created a static html site and serve with DjangorsquosTemplateView

bull Create a sample js array to test your Angular setup

bull Created a controller to serve static data

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

What to dobull Created a bowerrc file to point at the js assets

folder of the django project

bull Installed the angular core package with `bower install angular --save`

bull Bower creates a bowerjson file similar to your requirementstxt from pip

1 2 directory fruitloop_angularassetsjs 3 json bowerjson 4

Step 3 Create a

static AngularJS site

30 second Intro to AngularJSbull Angular offers

Controllers - Changes site behaviourServices - Provides data access (eg REST)Directives - Create your own DOM elements

bull Angular offers DOM attributes ng-show ng-repeat ng-click etc

1 lttr ng-repeat=item in itemsgt 2 lttdgt itemname - itemprice | currency lttdgt 3 lttrgt

What to do

bull Set up the settings path for your js assets

bull Created a static html site and serve with DjangorsquosTemplateView

bull Create a sample js array to test your Angular setup

bull Created a controller to serve static data

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Step 3 Create a

static AngularJS site

30 second Intro to AngularJSbull Angular offers

Controllers - Changes site behaviourServices - Provides data access (eg REST)Directives - Create your own DOM elements

bull Angular offers DOM attributes ng-show ng-repeat ng-click etc

1 lttr ng-repeat=item in itemsgt 2 lttdgt itemname - itemprice | currency lttdgt 3 lttrgt

What to do

bull Set up the settings path for your js assets

bull Created a static html site and serve with DjangorsquosTemplateView

bull Create a sample js array to test your Angular setup

bull Created a controller to serve static data

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

30 second Intro to AngularJSbull Angular offers

Controllers - Changes site behaviourServices - Provides data access (eg REST)Directives - Create your own DOM elements

bull Angular offers DOM attributes ng-show ng-repeat ng-click etc

1 lttr ng-repeat=item in itemsgt 2 lttdgt itemname - itemprice | currency lttdgt 3 lttrgt

What to do

bull Set up the settings path for your js assets

bull Created a static html site and serve with DjangorsquosTemplateView

bull Create a sample js array to test your Angular setup

bull Created a controller to serve static data

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

What to do

bull Set up the settings path for your js assets

bull Created a static html site and serve with DjangorsquosTemplateView

bull Create a sample js array to test your Angular setup

bull Created a controller to serve static data

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Arhhh it doesrsquot work

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Step 4 Use verbatim

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

isnrsquot

bull Django and AngularJS use the same variable tag

bull Django gt 14 Use verbatim environment

bull Django lt 15 Use code here 1 use $ variable $ in your template 2 from httpdjango-angularreadthedocsorgenlatestintegration 3 html 4 5 var my_app = angularmodule(MyApp)config(function( 6 $interpolateProvider) 7 $interpolateProviderstartSymbol($) 8 $interpolateProviderendSymbol($) 9 )

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Step 5 Make AngularJS talk

to your API

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

What to dobull Install angular-resource with

`bower install angular-resource --save`

bull Create the AngularJS in servicesjs and configure your API endpoints (if needed)

bull Make the Angular controller load the data use query() for lists use get() for single objects

bull Display the list in the html page

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Sample code 1 var fruitServices = angularmodule(fruitServices [ngResource]) 2 fruitServicesfactory(FruitLocationService [$resource 3 function($resource) 4 return $resource(api 5 query methodGET params isArray true 6 ) 7 8 ])

bull ngResource loaded $resource becomes available

bull Notice `$resource (lsquoapirsquo hellip)`

bull Configure more API methods here eg PUT DELETE etc if needed

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Step 6 Take full advantage of the Django REST Framework

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Thoughts

bull Use DRF Authentication methods

bull Use Object Persmissions

bull Use the serializer to the full extendeg serializersRelatedField(source=lsquofruit_typersquo)

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Step 7 Use $promise

but donrsquot promise too much

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Example

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Thoughtsbull Encapsulate data-related code with $promise

bull Code will be executed when data is returned from the API

1 FruitLocationServicequery()$promisethen( 2 function (response) 3 responseforEach(function(location) 4 $scopemarkerspush( 5 lat locationlatitude 6 lng locationlongitude 7 ) 8 ) 9 consolelog($scopemarkers) 10 11 )

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Step 8 Make your form talk to your API

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

What to dobull Bind your form data with Angularrsquos ng-model

bull Check your API service config and see if the trailing slash doesnrsquot get eliminated

bull Set up your authentication classes for the Django REST framework

1 Required for POSTPUT requests by the Django REST Framework 2 REST_FRAMEWORK = 3 DEFAULT_AUTHENTICATION_CLASSES [] 4

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Step 9 Clean up your settingspy

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

What to do

bull Make Django lightweight

bull Remove unnecessary middleware and packages

bull Check if you still need i18n and l18n supportTurn it off if you can

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Step 10 Document your API

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

What to dobull Once you project is running try to document the API

bull Django REST Swagger is an option

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Small Hints

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Use AngularJS Constants hellip

1 angularmodule(myApp) 2 constant(settings 3 mimic the Django STATIC_URL variable 4 STATIC_URL static 5 )

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Decide urlspy vs ng-route

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

What about site performance

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Then why using Django

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Is that the end of Django

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Vielen Dank

hanneshapkegmailcom hanneshapke

hanneshapkegithubio

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life

Resourcesbull PyDanny comments on JS and Django httpspydanny-event-notesreadthedocsorgen

latestDjangoConEurope2013javascript_djangohtml

bull Lightweight Django httpshoporeillycomproduct0636920032502do

bull Using Tasty-pie httpglynjacksonorgweblogentrydjango-angularhtml

bull Django Angular and Authentication httprichardtiercom20140315authenticate-using-django-rest-framework-endpoint-and-angularjs

bull How the Django REST framework changed my life httpwwwngenworkscombloghow-django-rest-framework-changed-my-life