django-angular Documentation Release 2.2 Jacob Rief Dec 16, 2018 Contents 1 Project’shome 3 2 Contents 5 2.1 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.2 IntegrateAngularJSwithDjango . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.3 Runningthedemos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.4 IntegrateaDjangoformwithanAngularJSmodel . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.5 ValidateDjangoformsusingAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.6 FormsSet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 2.7 Tutorial: DjangoFormswithAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 2.8 UploadFilesandimagesImages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2.9 PerformbasicCRUDoperations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 2.10 RemoteMethodInvocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 2.11 CrossSiteRequestForgeryprotection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 2.12 ShareatemplatebetweenDjangoandAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 2.13 ManageDjangoURLsforAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 2.14 ResolveAngularDependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 2.15 Three-waydata-binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 2.16 ReleaseHistory. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 3 Indicesandtables 47 i ii django-angularDocumentation,Release2.2 Django-Angularisacollectionofutilities,whichaimtoeasetheintegrationofDjangowithAngularJSbyproviding reusablecomponents. Contents 1 django-angularDocumentation,Release2.2 2 Contents 1 CHAPTER Project’s home CheckforthelatestreleaseofthisprojectonGithub. PleasereportbugsoraskquestionsusingtheIssueTracker. Foraquickimpression,visitthedemositeforthisproject. 3 django-angularDocumentation,Release2.2 4 Chapter1. Project’shome 2 CHAPTER Contents 2.1 Installation Installdjango-angular. ThelateststablereleasecanbefoundonPyPI pip install django-angular ChangetotherootdirectoryofyourprojectandinstallNodedependencies: npm init npm install angular --save 2.1.1 Dependencies django-angular has no dependencies to any other Django app, except easy-thumbnails and Pillow if using theimageuploadfeature. AngularJSmaybeinstalledthroughotherthennpm. Howeverpipisn’tvalidinanycase. Configuration Add'djng'tothelistofINSTALLED_APPSinyourproject’ssettings.pyfile INSTALLED_APPS = [ ... 'djng', 'easy_thumbnails', # optional, if ImageField is used ... ] Don’t forget to define your STATIC_ROOT and STATIC_URL properly. Since we load JavaScript and CSS files directlyfromourNodedependencies,addthatdirectorytothestaticfilessearchpath: 5 django-angularDocumentation,Release2.2 STATICFILES_DIRS = [ ('node_modules', os.path.join(BASE_DIR, 'node_modules')), ] Fromtheproject’stemplates,youmayrefertheAngularJSfilesas: <script src="{% static 'node_modules/angular/angular.js' %}" type="text/javascript"> 2.1.2 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. 2.2 Integrate AngularJS with Django 2.2.1 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'; }); 2.2.2 Template tags Django and AngularJS share the same token for variable substitution in templates, ie. {{ variable_name }}. Thisshouldnotbeabigproblem, sinceyouarediscouragedtomixDjangotemplatecodewithAngularJStemplate code. However, this recommendation is not viable in all situations. Sometime there might be the need to mix both 6 Chapter2. Contents