Cautionary Tale for Angular Developers

Okay, now take a moment to watch this video

I’m sure after watching it, you may have realized that I’m not here to talk about why Neo falls into coma by stopping sentinels. Instead I’m going to talk about why my application got crashed the same way in Windows 8 RT webview and what I learned.

The Reality

An Application was built on top of Angular.js and Twitter Bootstrap for Desktop, Android, iOS, and Windows8. For touch devices, we’d created a Native wrapper around which loads the application in a webview. It looked fine in Android and iOS devices but was crashing in Windows8 RT upon opening a Bootstrap Modal popup. And I had no clue why Windows8 RT alone?

This is what I was using to open a modal window. I know its very bad to do the imperative DOM manipulation inside controller but as there were no directives bound to .modal I believed its safe to use it.

<br>
$('.modal').modal({backdrop: 'static'});<br>

But I was wrong. In Windows8 RT, the above line was throwing an error “Object [object Object] has no method ‘modal'”. My guess is that I must be executing bootstrap code in middle of $digest cycle or something.

The Fix

To fix this issue I could either move that code in a custom directive and toggle modal’s state or use Angular UI Bootstrap. I decided to go with the latter. Finally I learned a very hard lesson while fixing the issue that one should spend some time to get it right than just get it done.

Follow the best practices or get ready to be bitten.

So I’ve used AngularUI Bootstrap modal directive to instead of doing DOM manipulation in the controller.

<br>
var App = angular.module('App', ['ui.bootstrap']);<br>
App.run(function($rootScope) {<br>
    $rootScope.opts = {<br>
        backdrop: true,<br>
        backdropClick: false,<br>
    };</p>
<p>    $rootScope.modalOpen = false;<br>
});<br>

Finally updated the DOM as follows:

<br>
  &lt;button class="btn btn-primary btn-large" ng-click="modalOpen = true"&gt;Open Modal&lt;/button&gt;</p>
<p>  &lt;div class="modal hide" options="opts" modal="modalOpen"&gt;<br>
    &lt;div class="modal-header"&gt;<br>
      &lt;h3&gt;Modal Header&lt;/h3&gt;<br>
    &lt;/div&gt;<br>
    &lt;div class="modal-body"&gt;<br>
      Modal Body goes here...<br>
    &lt;/div&gt;<br>
    &lt;div class="modal-footer"&gt;<br>
      &lt;div class="btn" ng-click="modalOpen = false"&gt;Close&lt;/div&gt;<br>
    &lt;/div&gt;<br>
  &lt;/div&gt;<br>

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.

Advertisement

Page navigation bar in Angular.js

In the last post, we have played with grouped checkboxes so let’s learn about angular controllers by writing a simple Page navigation bar we see on every website.

Here is our HTML code for the navigation and I’m using Twitter Bootstrap to make it a bit fancy.

	<div class="well sidebar-nav" ng-app="navList">
	<ul class="nav nav-list" ng-controller="navCtrl">
	<li ng-class="navClass('home')"><a href='#/home'>Home</a></li>
	<li ng-class="navClass('about')"><a href='#/about'>About Us</a></li>
	<li ng-class="navClass('contact')"><a href='#/contact'>Contact Us</a></li>
	</ul>
	</div>
	​

view raw

pagenav_bootstrap.html

hosted with ❤ by GitHub

We’ve started off by naming our application/module using ng-app directive. This directive designates the root of the application and is typically placed at the root of the page which creates a root scope.

Next, we’ve specified a controller using ng-controller directive which will create a new scope inside the root scope and have a control over the markup inside it. Finally we’ve attached a custom function to set CSS class to each <li> once the URL hash changes after clicking it. ng-class directive comes really handy in such scenarios which takes an expression to evaluate. In our case, we are sending a hash as a parameter to navClass.

Let’s write some Javascript (but nominal) to make it functional.

	var navList = angular.module('navList', []);
	navList.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
	$scope.navClass = function (page) {
	var currentRoute = $location.path().substring(1) || 'home';
	return page === currentRoute ? 'active' : '';
	};
	}]);

view raw

pagenav_ngclass.js

hosted with ❤ by GitHub

In above code, we’ve defined our module/application named navList and we have a controller and a method navClass inside it. We’re using a special service in angular.js, $location which parses the URL in the browser and makes the URL available in our application. Finally, just match the URL hash with the parameter passed.

Is not that easy and amazing? Check out the Live Demo. Good Night.

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.

Look in a different angle using Angular.js

Angular.js is a Superheroic JavaScript MVW Framework which really started drawing my attention recently. So I decided to give it a shot.

3 years ago, I wrote a blog post on jQuery to select grouped checkboxes and it took only a single line of code to achieve that. But we can achieve the same result without writing a single line of Javascript code. The reason for that is Angular.js allows to do two way data binding so in this case I’ve bound child checkboxes with the parent one by using a special angular directive ng-model and observing the states of checkboxes using ng-checked directive

ng-app>
  

    ng-model="parent" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"  type="checkbox"/> Select All

    ng-model="child_1" ng-checked="parent" type="checkbox"/> First

    ng-model="child_2" ng-checked="parent" type="checkbox"/> Second

    ng-model="child_3" ng-checked="parent" type="checkbox"/> Three

    ng-model="child_4" ng-checked="parent" type="checkbox"/> Four

    ng-model="child_5" ng-checked="parent" type="checkbox"/> Five

  
</div>​

ng-app directive tells angular to bootstrap the application, without such directive other directives will not work and simply be ignored.

Demo: http://jsfiddle.net/codef0rmer/4Mpq7/

Angular.js is really fascinating me and you can learn more about it on Angular.js Tutorial

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.