Introduction to Django REST Framework, an easy way to build REST framework in Django
Django Rest Angular Guide
-
Upload
gocht-guerrero -
Category
Documents
-
view
33 -
download
3
description
Transcript of Django Rest Angular Guide
![Page 1: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/1.jpg)
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
![Page 2: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/2.jpg)
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
![Page 3: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/3.jpg)
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
![Page 4: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/4.jpg)
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
![Page 5: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/5.jpg)
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
![Page 6: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/6.jpg)
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
![Page 7: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/7.jpg)
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
![Page 8: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/8.jpg)
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
![Page 9: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/9.jpg)
+ +
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
![Page 10: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/10.jpg)
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
![Page 11: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/11.jpg)
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
![Page 12: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/12.jpg)
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
![Page 13: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/13.jpg)
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
![Page 14: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/14.jpg)
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
![Page 15: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/15.jpg)
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
![Page 16: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/16.jpg)
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
![Page 17: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/17.jpg)
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
![Page 18: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/18.jpg)
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
![Page 19: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/19.jpg)
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
![Page 20: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/20.jpg)
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
![Page 21: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/21.jpg)
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
![Page 22: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/22.jpg)
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
![Page 23: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/23.jpg)
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
![Page 24: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/24.jpg)
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
![Page 25: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/25.jpg)
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
![Page 26: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/26.jpg)
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
![Page 27: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/27.jpg)
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
![Page 28: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/28.jpg)
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
![Page 29: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/29.jpg)
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
![Page 30: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/30.jpg)
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
![Page 31: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/31.jpg)
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
![Page 32: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/32.jpg)
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
![Page 33: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/33.jpg)
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
![Page 34: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/34.jpg)
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
![Page 35: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/35.jpg)
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
![Page 36: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/36.jpg)
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
![Page 37: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/37.jpg)
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
![Page 38: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/38.jpg)
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
![Page 39: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/39.jpg)
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
![Page 40: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/40.jpg)
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
![Page 41: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/41.jpg)
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
![Page 42: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/42.jpg)
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
![Page 43: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/43.jpg)
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
![Page 44: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/44.jpg)
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
![Page 45: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/45.jpg)
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
![Page 46: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/46.jpg)
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
![Page 47: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/47.jpg)
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
![Page 48: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/48.jpg)
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
![Page 49: Django Rest Angular Guide](https://reader034.fdocuments.us/reader034/viewer/2022052304/563db88f550346aa9a94d00b/html5/thumbnails/49.jpg)
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