AngularStrap and AngularMotion

Yesterday, I wrote about using AngularStrap. Today, I managed to get going with it and implement a couple of components. However, I faced a problem with the $alert service, where the alert was not animating in or out. The docs on the web site are very brief with only one example. I looked around for examples and I ran across a couple of people complaining that animation is not working for them either, but no solution worked for me (including ngAnimate) did not help. After looking through the source code it still was not clear what was going wrong. I searched some more and came across AngularMotion which is a framework for building animations in Angular. On that site (which happens to be maintained by the same developer), I found an example that uses AngularStrap. It turns out that all I needed was to include the AngularMotion CSS, which solved the problem. There is no mention whatsoever on the AngularStrap site so I reported a documentation bug.

Summary: to use AngularStrap you must include the AngularMotion CSS.

Angular JS and Bootstrap Together

I started a project using Angular JS and needed some nice widgets so I incorporated Bootstrap. I included the NavBar component from Bootstrap, only to realize that it was no good without the corresponding JavaScript bits that are needed to switch the highlight to the selected nav page. I needed to add code like this:

    $('ul.nav li a').click(function(e) {

        var $parent = $(this).parent();

        $parent.siblings().removeClass('active');

        $parent.addClass('active');

    });

I felt that this was not right. With such two popular frameworks, why did I have towrite code for such a basic task?

After a quick search, I found what seems to be the answer. There are two frameworks that combine the strength and cleanliness of Angular with the beauty of Bootstrap: Bootstrap UI and AngularStrap. The former seems to have more following but feature-wise they look similar. Both allow you to use Bootstrap components without the need to go around Angular declarative directives and write JQuery code. They provide Angular directives that wrap Bootstrap component so you can get the best of both worlds. 

For my needs, I will probably go with AngularStrap since they have a nav bar component whereas Bootstrap UI does not. 

  

My Slides on Slideshare

I have now shared slides for my previous presentations on slideshare. The first, I gave in Summer 2013 and the second I gave in Summer 2015, both at the Faculty of Engineering, Alexandria University.

With the merging of Blogger and Blogspot and the Google transition, I am not sure what happened to my old blog posts. Anyways, I am starting a new blog today. I intend to keep it a technical blog, but I cannot promise that I won’t rant about politics and other stuff too!