AngularJS + Django: A match made in heaven

Video in TIB AV-Portal: AngularJS + Django: A match made in heaven

Formal Metadata

AngularJS + Django: A match made in heaven
Alternative Title
AngularJS + Django = A Perfect Match
Title of Series
Part Number
Number of Parts
CC Attribution - ShareAlike 4.0 International:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
AngularJS is a powerful MVC framework that can easily integrate with Django templates. Let's walk through integrating the two for fantastic results. The result is a fast, dynamic single page application.
Scripting language Arithmetic mean Touchscreen Code Multiplication sign Right angle Flow separation Family
Point (geometry) Web page Arithmetic mean Texture mapping Computer animation View (database) Execution unit Template (C++) Form (programming)
Point (geometry) Web page Computer animation Validity (statistics) Logic Single-precision floating-point format Temporal logic Software framework
Computer animation Core dump Software framework Data structure
Web page Scripting language Game controller Dependent and independent variables Randomization Matching (graph theory) Java applet Keyboard shortcut Unit testing Variable (mathematics) Flow separation Number 2 (number) Formal language Computer animation Single-precision floating-point format Mathematical singularity Software framework Vulnerability (computing)
Axiom of choice Frequency Presentation of a group Arrow of time Software framework Vulnerability (computing)
Point (geometry) Dependent and independent variables Serial port Computer file Key (cryptography) Divisor Code Gender Electronic mailing list Staff (military) Regular graph Event horizon Timestamp Field (computer science) Twitter Profil (magazine) Electronic visual display Software framework Software testing Endliche Modelltheorie
Web page Greatest element Computer file Token ring View (database) Multiplication sign 1 (number) Set (mathematics) Mereology Disk read-and-write head Food energy 2 (number) Template (C++) Web 2.0 Roundness (object) Different (Kate Ryan album) Computer configuration Square number Cuboid Touchscreen Poisson-Klammer Cellular automaton Projective plane Shared memory Bit Computer animation Doubling the cube Drill commands Configuration space Figurate number Middleware Local ring Library (computing)
Server (computing) Game controller Group action Functional (mathematics) Service (economics) Code Mereology Bookmark (World Wide Web) Twitter Template (C++) Kinematics Core dump Error message Dot product File format Debugger Fehlererkennung System call Symbol table Proof theory Message passing Computer animation Query language Factory (trading post) Mathematical singularity Right angle Object (grammar)
Area Dependent and independent variables Game controller Group action Functional (mathematics) Computer file Information Parameter (computer programming) Twitter Message passing Computer animation Query language Network topology output Cuboid Right angle
Web page Default (computer science) Game controller Touchscreen Code Gender Set (mathematics) Variable (mathematics) Food energy Graph coloring Template (C++) Personal digital assistant Robotics Authorization Quicksort Partial derivative Resultant Condition number
Scripting language Functional (mathematics) Group action Process (computing) Information Code Multiplication sign Software testing Open set P-value Approximation
Computer animation Webdesign Twitter
Computer animation Software framework Office suite Drop (liquid)
Computer animation Computer configuration Term (mathematics) Routing Twitter
Performance appraisal Message passing Computer animation Software framework Endliche Modelltheorie Error message Field (computer science) Form (programming)
Frequency Touchscreen Computer animation Social class Identity management
Point (geometry) Category of being Service (economics) Computer animation Graph (mathematics) Theory Twitter
Mathematics Computer animation Internetworking Representation (politics)
Computer animation
and this and I think this is the 1 that always in 1 way or separate right or of the meaning that stack the extensively on our internal tools and it's worked out really well for us have he still can't how many of you right of a script screen family and so kind of cannibal simple out that because they're all the concepts that we just that we're gonna be discussing sitting there going a that I'll the going through a lot of code that says is that in the desert and follow along tail you may have already differently I think solely all that 1 time the so I think that
templates are not my favorite the there
the already have the the mean of then anyone here but it's my point of view so the
other that can she flow if you want of form you have to wait for the whole page for refresh template tags the kind of hard to understand you forget to n 1 year you stuff is branching it can be hard to divide into difficulty unit have and if you're actually working with a friend and data of sometimes it's kind of difficult for them to pick up the template had without knowing Python think yeah and texture pretty so form get
complex really fast you cannot from going all validation logic over here in Europe and use them in temporal logic over there all is that it where would you like to evolve with his had I
so in my humble opinion why and went to better the faster are you can have a single page act you have to wait for the whole thing to reload you can swap JavaScript frameworks pretty usually there is no novel full of them out there and once you have the M points that up there reusable so let's say you wanna write and native overlap wall the you back and already there so it's pretty awesome and you can
dump so if you're in winter public you can use them internally kind of work out all the kinks the woods workings you in the eye of the 1st one find out there and problems that's really i huge benefit prune skinny thing about rest frameworks are a standard so you never knew from and then chances are that they were it seemed as they've worked with this kind of structure of the front and to understand something new and they can get started right away that we found
framework why not and there's tons of
benefits singularity and EC framework their responsibilities are separated single page ad the refreshes are much better user experience and the scope is this magical thing I it's a waiter to bind variables between your friend and in your controller so you should take creating no crazy JavaScript magic the set of variable on the scope and it's accessible in the temple I feel a is also very easily and tested on much better I think buying can of comparing no a unit test does made HMO match what I expected to connected to be dynamically we're doing now so you the
bad you have to use Java scripts as it kind of seems like a bunch of you already do so it's good but I ever heard in the elevator the other day some of like I don't like JavaScript it's too many curly braces info yeah that's not really reason not for like the idea obviously other languages are not as elegant as pi bonds on but it's fully who did the let it not going anywhere you'd be doing yourself a really great disservice AV winning learning it because you don't like the way books fair to call you at random elevator person but did should the truth that you don't like angular in particular pretty easy to just swap out to another JavaScript framework the that react in you got number and you got that about and who knows what's coming next so there they all have their strengths and weaknesses that a great talk about that is that my
coworker brain hole he did a presentation about choosing a JavaScript framework out with the strength and weakness of our so that this period that GPU of Brian hold . and I definitely recommend that you read it so those funky revealed presentations of just make sure you have the down arrow if the presentations and all that choice so
on I put it back it have complained earlier here it is again for anyone who missed that Red going go ahead and use all the concepts that were wearing today to build the tweeter out have a requirements pretty
short containers you the world pretty of often but that we wanna display list of tweets for all users are we wanna narrowed down that list and only get the tweets for at the logged in and then we also want show the profile for that long the user and it doesn't take a kind of code to get the files together it's actually a pretty impressive so I can with them using our creative with gender rest framework pretty easy to create arrest and point for your application and if any of you were at my talk yesterday about kind of explore that in more detail but for those of you looking at the code that the eve of the idea of staff is serializes not pi in permission stockpile and then the routing is done in your pi the so you're in
the model so pretty simple we have our foreign keys user Fernando between we have our regular factor field for the tax text and timestamp stamp of when the tweet was created this could be you know it right right I don't know should yeah I'm sorry how about do the best that out it is and I mean it can't be all now we and some of the things that we have to deal with that and why do good I would like to know about but the about that segment i'm just gonna have to shout and so found just that but now we have that useful testing testing then event for this contraption up all in guarantee amino yeah but also in the area of yeah just because people can hear me to during hands and ask if there are any concepts you like me there we explain then are a so there are M points and look like this there really simple we have I and pointed that's all the users and went to fetch at just 1 user and I'm pointed that all the weeds and then an endpoint to such a tweet by ID so when we call our tweets M points this is the kind of response were going to get it's just a list of genes tweets that contain and the feel that we defined in our dangerous framework serializer and the next thing we're going to talk about is configuring endure for GenGO there deftly at you catches which need to be aware of the world using it here right off the bat so the
1st thing to do is such singular file and included in your template and for my many project they just that share at you put in a local Web folder but that best UCD and there in updates attentive to the mother medically you don't have to you know worry about maintaining yet another library and that the way we enable our friend to the singular is by using an energy have and guarantee the bottom of the screen and so that the most common place you would put it is in the HTML have where the body but the only 1 year some little part of your back to the injury you can even throw in India so really flexible and I called my singular out we derive a set very creative and original the
so that the inuit head ending the template tax can they're both double curly braces and that's kind of a problem if you just try it there is an angular on jingle page some things in a box and library pretty so the way to get around OK the either to tell angular to use a different kind of time so that for example I like using a double square brackets or I you can use the Django template beaten tax so I very much prefer the 1st way because if you go to the 2nd round you just can't have tons of chunks of verbatim tags all over your template and it gets messy and not really great at it's an option briefly on a it so this is how we tell angular to use a different kind of bracket sexual you really great teacher that they've provided this and we have options the 2nd thing we won figure it is our sincere tokens so that if you read the Django docs on Jack's fault people tell you to do that see tell angular that him this is what this year at tokens are this is called and then on you're in your jingle views you wanna use and inches CSR token to make sure that our to make sure that that token is generated even if this yes sir at 2 tag is not present in the template so kind of Hindi and cleaner and I think it's lot more explicit to you know what you're looking at the view if not all your user CSF protected by middleware you know which ones are and you know which ones are going be them to them at back the next important thing in our configuration file is monotone angular to stop stripping trailing edge that's flash cell you know I does that but that's earlier that in the early work of Jane consisting of lovers drillings letters they're everywhere so that this is actually an Uzi during singular 3 so be mindful of that if you're using all the original there's some can have the ways to get around it and you have to add on the trailing slash that escaped industry and then you can use some of that in angular magic Brett kind of can guess where M points a structured light based on last I think you have to do a little bit more configuration on the English side as well the to do so
the this is where angular resourceful like it's a it's a factory that lets you create a resource and the south arrested and white and interact with a really simple so we can allow through the code to europe . services is what my services module is called and then an hour in the resource is actually a separate JavaScript include the have to be mindful of because it's not part of our the core in your code and here we define a factory and that's based on their tweets at so when we create an object called tweet in JavaScript plant it it's aware of this you were all Anderson kinematical binding going on so here is the the fall actions you get with the angular resource on you can get all those each achievers it's aware of the dead so if you have an idea defined in your resource have like I did here FIL there is that that that really women that symbol called the 2 2 dots calling called yes so that calling is kind of our an important thing to note the because when you use this kind of Dalton method you call get it knows that an idea is expected so when you pass morning in your that you're getting a single resource that an object as kind of does magic and transforms it to be that way where is when you call query it knows to expect a collection and it's gonna call the proof of that . without the idea that makes sense server on the semantic no announced yeah very the so here is how we would create a new object it's really simple not quite as messy as something like the J. Crew Ajax harm so we called the resources we can we can just call new tweets set some properties on and then call save and that's singular magic for it's pretty Austin so there are 2 ways to interact with these resources the 1st way is called share many of you have heard of over experience called article 2 of the of at so when you called that we don't get passenger ID if there is if that's kind of data we're gonna get back is it's it's a promise so you know you don't get anything back right away you have to know when the server has responded and then do something with that data so here's the call that format were passing in a function our taking into be and then we can do stuff with that object once had that server has returned then you a way of doing this is our it's called promises the much cleaner coded in my opinion you can change in as so instead of passing it passing a callback function instead called . promise then the and then your function that gets called when I as data is returned is there and even Chinese promises so this promise only takes care of successful request as if there's an error you should teen another promise long and then you'll get that error code back and the status and you can do something with that so for example if it's an authorized year display the correct message to the user so the scope is like I mentioned earlier really my favorite thing about angular and it's right to collect all the magical you change something in your controller that displayed on the front end right away you change something you in a new template and it's there in the controller magic and in the tariff
on 1st learned about so let's move on
to controllers the syntax for creating 1 and similar to how you had a crater resource so here 2 each year all is the name of a controller and then we call a function but an important thing to note here is that users dependencies so by passing and these arguments for telling the controller that we need a handle on so and we also need a hand on tweet and that's are that resource that we created so now we can really use it the control it's 1 of the old so here is the need of a controller we have a query function and that satisfies our 1st requirement of wanting to get all the tweets that exist and here you see in calling them up using a call-back and when that query returns we want that still doubt leads to the response so as soon as this function is done in the other thing that I the other function in our controller is he's just a minute we so we use that same syntax that we saw we create a new tweet and the pass in the data that was uh in the input box and then we call save on it In the last thing I would do is stop the tree right onto the top of our 2nd group tweets in its displayed right away so fortunately you
area of all the jacket and it allows you to pass information back and forth from jingling in and and it lets us know what the best static this the do is that we can include those files it's it's kind of useful so standard it and here's an
example of how you have passed add some template data back into angular Tolman but it works we actually over this honor based on the page and it instantiates a quick and dirty will serve as an eye color often and the kind of runs a piece of code on the page and dispose of it returns the result so the genes that are actually going to the Django user and get some are useful information out from in this case the ID the have insurance companies have actually been released also however the authors think you so this is how we do you i riding an angel instead of using gender templates were into using partials and there's a lot going on on this page so it's kinda sort 1 by 1 and the 1st thing that we know is that Europe provided the default that said Steve or out of some interesting given a bunch of stuff in your robot did just gonna get kicked back to here the euro was what that you're look like to the user and the template euro is where that personal storage and and then controllers can the important that that lets you know that was angular no which controller to associate to which temple there is a different way of doing it that's similar to energy up and you can throw controller into our any each channel 10 back and find its way to the much cleaner on controllers are defined in 1 place and you installing getting called so Running name there is pretty simple you drop you you into a and you're on your page and that's where the partials are going to be dropped and so in it's following different and something then clearly because it's also where the guy you can pass variables back and forth you can use them as conditionals so very powerful and I a partials are just
now HTML angular no necessary I I like to keep them in accessible set folder yes and I can shade as long the sort of thing no but if we get reserve or questions or end with all the shaken chaotic secure afterwards crammed full screen is not wanna give out she's so
but I didn't include any information about testing in this talk I wasn't sure of our have time but test all they do it it's just so much easier and Acer they in your documentation as pretty good my my experience with that you know there are some cons the biggest 1 to me was when you get an error in during your code it's pretty indecisive or in deciding inferable he's going and it's this year all anonymous functions and callbacks we something happens you just like wacked should 8 kind of figuring out what's going wrong that comes with experience so it's keypad it and get too frustrated and use that to buy the community cited above a statement in in your job scripts and if you have heard of tools open it'll just stop there use p-values press there OK we all you've In fact admitted have their own diameter and approximate
fingers consistent goes a lot of a tie on this sheet is right here and in action and so here
it is in all of its glory and here we have all the tweets from all of our users there really calling creative we on a reader and here is our my tweets Steel but it's so it's not such a user experience and no behavioral pretty instantaneous and it doesn't you know when you have a ton of data and it's not super bought in here we have our are profile thing so I know great web designer in today's very much but the cool thing about tonal get the take the
here there urging the US framework resonably Mrs. office and deftly 1 of the have features that our most about it super easy to use and for example is a drop down the but
when the I we can call options and you can see what's available on our PPI
here this is the route so from here we can kind of navigate down we get our tweets we get the so here we can see all the detail that's connecting to the and we can also submit data back so we can introduce a term data were HTML the I have or an HMO
form actually which is really so I have evaluators and place that's gonna return an error mentally is lost and 5 characters
have you get about requested their message that specify general framework is also really smart so I have a model field that is only 140 characters so the the fact that it had active and yelling at you know being not long after
the you have a better idea of it will get another better class can see the summit screens everything is going great and what's going on with the battery period
this identity cookbook at our
users of point fair here is where we can vary the graphs and we theories that we get back all of our users properties about them 1st name last same username and then our a collection of all the tweets services superheated created the and Google drive
Internet was an earlier change them as of playing very very nerve-racking that that
that that that from representation that they find me afterward the questions about to talk about this in the is in my talk thank
you would need to be in the