django-angular Documentation

45 Pages·2017·0.24 MB·English

django-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