Table Of Contentdjango-angular Documentation
Release 1.0.0
Jacob Rief
Aug 01, 2017
Contents
1 Project’shome 3
2 Contents 5
2.1 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 IntegrateAngularJSwithDjango . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Runningthedemos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4 IntegrateaDjangoformwithanAngularJSmodel . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.5 ValidateDjangoformsusingAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.6 Tutorial: DjangoFormswithAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.7 PerformbasicCRUDoperations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.8 RemoteMethodInvocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.9 CrossSiteRequestForgeryprotection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.10 ShareatemplatebetweenDjangoandAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.11 ManageDjangoURLsforAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.12 ResolveAngularDependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.13 Three-waydata-binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.14 ReleaseHistory. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3 Indicesandtables 41
i
ii
django-angularDocumentation,Release1.0.0
Django-Angularisacollectionofutilities,whichaimtoeasetheintegrationofDjangowithAngularJSbyproviding
reusablecomponents.
Contents 1
django-angularDocumentation,Release1.0.0
2 Contents
1
CHAPTER
Project’s home
CheckforthelatestreleaseofthisprojectonGithub.
PleasereportbugsoraskquestionsusingtheIssueTracker.
3
django-angularDocumentation,Release1.0.0
4 Chapter1. Project’shome
2
CHAPTER
Contents
Installation
InstallDjango-Angular. ThelateststablereleasecanbefoundonPyPI
pip install django-angular
orthenewestdevelopmentversionfromGitHub
pip install -e git+https://github.com/jrief/django-angular#egg=django-angular
Dependencies
django-angularhasnodependenciestoanyotherDjangoapp.IthoweverrequiresthatAngularJSisinstalledthrough
othermeansthanpip. Thebestsolutionistorun:
npm install [email protected] --save
inyourproject’srootfolderandaddittotheDjango’sstaticfilessearchpath:
npm install [email protected] --save
STATICFILES_DIRS = [
...
('node_modules', /path/to/my-project-root/node_modules'),
]
Fromtheproject’stemplates,youmayrefertheAngularJSfilesas:
<script src="{% static 'node_modules/angular/angular.js' %}" type="text/javascript">
5
django-angularDocumentation,Release1.0.0
Configuration
Add'djng'tothelistofINSTALLED_APPSinyourproject’ssettings.pyfile
INSTALLED_APPS = (
...
'djng',
...
)
Pleasedon’tforgettodefineyourSTATIC_ROOTandSTATIC_URLproperly,thenlaunchthepython manage.
py collectstaticcommandtoupdateyourstaticcontentwiththeJavaScriptfilesprovidedbydjango-angular.
Django-1.11
Django,sinceversion1.11,isshippedwithanexchangeablewidgetrenderingengine.Thisisagreatimprovementfor
django-angular,sinceitdoensn’thavetooverridethewidgetsanditsrenderers. Instead,yourprojectssettings.
py,pleaseusethisconfigurationdirective:
FORM_RENDERER = 'djng.forms.renderers.DjangoAngularBootstrap3Templates'
iftemplatesshallberenderedwithaBootstrap3grid,otherwiseuse:
FORM_RENDERER = 'djng.forms.renderers.DjangoAngularTemplates'
Note: django-angulardoesnotdefineanydatabasemodels. Itcanthereforeeasilybeinstalledwithoutanydatabase
synchronization.
Integrate AngularJS with Django
XMLHttpRequest
Asaconventioninwebapplications,AjaxrequestsshallsendtheHTTP-Header:
X-Requested-With: XMLHttpRequest
while invoking POST-requests. In AngularJS versions 1.0.x this was the default behavior, but in versions 1.1.x this
support has been dropped. Strictly speaking, Django applications do not require this header, but if it is missing, all
invocationsto:
request.is_ajax()
wouldreturnFalse,evenforperfectlyvalidAjaxrequests. Thus,ifyouuseAngularJSversion1.1.xorlater,addthe
followingstatementduringmoduleinstantiation:
var my_app = angular.module('MyApp').config(function($httpProvider) {
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});
6 Chapter2. Contents
Description:Now, you can easily distinguish a server side variable substitution {{ varname }} In AngularJS, when used together with external templates, static HTML code often is If, for some reason you need mixed template code, ie. one which first is All other Javascript code must go into separate static fi
