How I inspire my colleagues to learn AngularJS

Since months I was trying to convince my colleagues to learn AngularJS but they were putting it off by saying:

• Its hard to learn
• It can not be as cool as jQuery
• We are happy with Backbone.js

But I knew that one day I’ll prove my point because an action is worth a thousand words. And I was waiting for that moment until…

The day arrived

We’d released the product we’re developing since months in Backbone.js and everything was well and good. The application was feature rich and huge in terms of code base – including lots of popups, forms, grids wrapped in Underscore.js templates. That day my boss came to me and started talking about a new feature the client has asked to implement urgently. They wanted to add more themes to our application and the worst part was that a theme color supposed to be come from an XML file so it could be any random color. This means we’d to rely on Javascript instead of CSS to apply the theme color across the application such as popups headers or buttons etc.

Everybody was worried because there was no way we could deliver it as quickly as possible and even we do it, we had to write lots of code and in lot many places.

I thought over for some time and recalled that Angular Directive could be a good fit for this kind of problem so I quickly jotted down a very simple piece of code:

  App.run(function($rootScope) {
    // Stored a theme color after reading it from an XML
    $rootScope.themeColor = '#BADA55';
  });

  App.directive('themify', function($rootScope) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var arrProp = attrs.themify.split(',');

        arrProp.forEach(function(prop) {
          element.css(prop, $rootScope.themeColor);
        });
      }
    }
  });

Then tried to test it by applying the directive on a header of one of the popups:

    <div themify="border-color,color">Add Bookmark</div>

It worked!!!. Finally we used the same directive all over the application. There was one little problem though wherein angular was ignoring all the directives placed inside Underscore templates. Later I figured I had to compile the templates using $compile. A bit hackish approach I used in order to access the $rootScope and $compile method inside Backbone.View is to make them global – $grootScope and $gcompile respectively.

  App.run(function($rootScope, $compile) {
    App.$gcompile = $compile;
    App.$grootScope = $rootScope;
  });

  AB.listView = Backbone.View.extend({
    el: 'div.list',

    template: _.template($('#listTemplate').html()),

    render: function () {
      this.$el.html(this.template({}));

      // Port it to Angular world
      App.$gcompile(this.$el)(App.$grootScope);
    }
  });

Lesson learned

Do not force people, inspire them.

Although, it just took an hour to bake this new feature but my colleagues were impressed and inspired to give AngularJS a try. And I was quite happy to help them get going with Angular. Love yo’all!

If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.