Some Lessons Learnt from Messing with Django and AngularJS

django-logo-negative

square

  1. Key take-away: If you’re thinking of sneaking angular.js as you would any other js file into your ‘static’ folder, you gonna have a bad time. It starts to get really messy when you try to mix and match angular’s url routing mechanism vs. django’s url. The same applies to the templates. I imagine this messiness will always be present if you try to mix a client-side MVC framework with a server-side one.  The best way is to separate angular out from your django project entirely and use the services to communicate with your django application. This means you will need something like django-tastypie or django-rest-framework setup on a separate app. The rest of the points are really more learnings about angular so read on if you’re interested.
  2. You will be confused between the differences of a service and a factory. I’m still confused.
  3. Angular kinda requires you to have a solid understanding of Javascript to be fully effective. You could get away with knowing less Python and still be effective in Django in my opinion.
  4. You can only use one ng-view per view
  5. If your controllers seem to be firing twice, it’s probably because you defined an ng-controller in your html as well as in your route.
  6. If you skipped reading the conceptual overview, it’s a critical document that will help you wrap your head around the angular concepts so don’t.
  7. Angular disables form submissions without an action attribute. If you’re using django-crispy-forms (there’s not reason not to. it’s an excellent form library) to render your form, simply add self.helper.form_action = ‘#’ to fix this.
  8. If you’re wondering why your url end point is getting called twice, its probably because Django is redirecting the url with a trailing slash to a url that does. To fix this, simply escape the backslash like: /custom_api/get_nearest_hotels/:eventId\\/. There is a gotcha to this. It only works in Chrome and Safari. If you’re calling the endpoints via a service factory, Firefox will decide that it’s a good idea to remove the trailing slash from the URL and encode the backslash that was escaping the forward slash to %5C. The result is to use $http. See related angular issue.
  9. Loading templates are a bit of a hassle. There are a few ways to solve this. This guy’s method.
  10. Tricks and tips
    1. http://gpiot.com/angularjs-useful-tips-to-get-started/
    2. http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED
  11. Angular and SEO
  12. Get the correct angular folder structure from angular seed
  13. Check out angular-ui
  14. AngularJS in 60 mins
  15. If you see your page flash with angular template tags and then reload again to show the actual content, you need to apply ng-cloak.
  16. $scope.$watch will fire on page load to initialize the watcher.
  17. Always have a ‘.’ in your models. e.g ng-model=user.name and not ng-model=username
  18. $scope.$apply is essentially the way you get the rest of your javascript to sync with angular’s javascript.
  19. Controllers should not contain presentation logic — that belongs in Directives. Controllers strictly should be used for business logic.
  20. If you’re using a moment.js (awesome library) for datetime manipulation, don’t forget that the angular format filters only operate on javascript date objects. So you’ll have to append a .toDate() to cast your moment object into a javascript date.
Advertisements

13 thoughts on “Some Lessons Learnt from Messing with Django and AngularJS

  1. Hi Nai!

    I’m working on a django-rest-framework backend + angularjs frontend web application, and I’d like to clarify about separating django and angular. Are you talking about moving angular in another django application (in the same django project), or about moving it out of a django project completely?

    Thank you very much!

      • I didn’t watch the entire video but essentially it doesn’t matter what backend you’re using be it tastypie or rest-framework or restless. My personal choice would be to use Flask.

        The two layers ought to be separate completely. e.g. You should be able to take the exact same endpoints and use it for your mobile app.

        Sent from my iPhone.

        >

  2. hey, i am using django aswell.

    the $resource when i call the $save method. i did as you said, to remove the trailing slash.

    app.factory(‘Thread’, function ($resource) {
    return $resource(
    ‘/api/thread/:id\\/’, {
    id: ‘@id’
    }, {
    update: {
    method: ‘PUT’
    }
    }
    );
    });

    now angular adds double slash at the end.
    [24/Jul/2013 15:33:39] “POST /api/thread// HTTP/1.1” 404 7341

    is there any other workaround?

  3. Pingback: AngularJS Highlights: Week Ending 27 October 2013 | SyntaxSpectrum

  4. Submitting on behalf of a shy colleague who saw this…
    1. wtf?
    2. service is singleton. Factory is generator that could return anything
    NEW MESSAGES
    3. Captain obvious
    4. lolwut? https://github.com/angular-ui/ui-router
    5. Happens
    6. Yep. Also remember http://www.bennadel.com/resources/uploads/2013/feelings_about_angularjs_over_time.png
    7. yep. I’m using action=”.”
    8. Using $http is a solution
    9. Don’t understand
    10. +
    11. Never used angular for indexable content
    12. bullshit. http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript see Modules
    13. + Especially https://github.com/angular-ui/ui-router
    14. dunno
    15. n00bz
    16. true
    17. Yep, because scope based on prototype inheritance
    18. Learn more about $digest
    19. True
    20. yep

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s