JavaScript MVC: Backbone, Angular

Chris joins Joe to explore the world of JavaScript MVC. Dive into Backbone and Angular, learning how they compare when it comes to models, view rendering, data binding, testing, routing, and more.
This is a companion discussion topic for the original entry at https://thoughtbot.com/upcase/videos/javascript-mvc-backbone-angular

I’ve been doing angular frontends for my last few projects and have found it very useful to drop ngRoute and ngResource in favor of uiRouter and restangular. uiRouter gives you goodies like nested routes and link-to helpers. Unit testing angular code is still a massive headache for me - manually building the element,running $compile and $digest is just really unpleasant.

I wish more angular tutorials were clear on using the router’s resolve property to get your data and then injecting it into the controller instead of getting the data in the controller:

this way gets the data before the template is shown:

  angular.module('myApp').config(function($stateProvider) {
    $stateProvider.state('whatever', {
      url: '/whatever',
      controller: 'whateverCtrl',
      controllerAs: 'vm',
      templateUrl: 'templates/whatever',
      resolve: {
        myData: function(myDataService){
          return myDataService.get('users');
        }
      }
    }).controller('whateverCtrl'), function(myData){
      var vm = this;
      vm.data = myData;
   })

the way I see it in most tutorials gets the data after the controller is loaded:

angular.module('myApp').controller('whateverCtrl', function(myDataService){
  var vm = this;
  
  myDataService.get('users').then(function(resp){
    vm.data = resp;
  });
});

They both work, but the second will give you this split second where you have a template with no data and a bunch of random {{user.username}} things. It can lead to an overuse of ng-cloak to make things look nice.

This was a great video. I have only worked with Ember.js and it was nice to get some insight into Backbone and Angular.

Are you guys going to be doing a video on Ember.js?

more dollar signs… more costly. That stuck to my head. hahaha.

Basic question: you mentioned you wouldn’t consider Backbone or Angular to be frameworks per se, but more like libraries. Could you elaborate on that distinction? Thanks!

I would love to see an in-depth video covering EmberJS.