Upload
hanneshapke
View
2.817
Download
1
Tags:
Embed Size (px)
DESCRIPTION
This presentation gives insights on the steps to change an existing Django project into a more responsive website based on Django, REST and AngularJS.
Citation preview
Making Django sites more responsive with REST and
AngularJS
August 27th 2014
Hi Irsquom Hanneshanneshapke
hanneshapkegithubio
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
But what is the solution in the mean time
+ +
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
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
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
Hi Irsquom Hanneshanneshapke
hanneshapkegithubio
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
But what is the solution in the mean time
+ +
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
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
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
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
But what is the solution in the mean time
+ +
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
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
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
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
But what is the solution in the mean time
+ +
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
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
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
Sync vs Async
hellip is synchronous
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
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
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
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
hellip is synchronous
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
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
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
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
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
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
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
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
But what is the solution in the mean time
+ +
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
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
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
+ +
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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