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