Angular gotcha: ng-app=”myApp” (named applications)

Angular is magical. The magic starts happening simply like so:

<html ng-app>
  <script src="angular.min.js"></script>
  There are {{ 1 + 2 }} apples in the basket.
</html>

Which outputs:

There are 3 apples in the basket.

However, when the magic stops you could be left tearing your hair out finding the correct potion!

For example, if you change ng-app to ng-app="myApp" you will see {{ 1 + 2 }} outputted instead of 3 with the following error:

ng-app-gotcha

OK, that kinda makes sense as we’ve not created a module named myApp.

Right, let’s do that:

<html ng-app="myApp">
  <script src="angular.min.js"></script>
  <script>
    var myApp = angular.module('myApp');
  </script>

  There are {{ 1 + 2 }} apples in the basket.
</html>

Hrm, well the magic still isn’t working! And we’re hit with a double whammy!

ng-app-gotcha-2

Digging a bit into what’s happening with angular.module. Apparently, its method signature is:

angular.module(name[, requires], configFn);

Where requires is optional, however, If specified then new module is being created. If unspecified then the the module is being retrieved for further configuration. Aha! So the second parameter is required if creating a module!

<html ng-app="myApp">
  <script src="angular.min.js"></script>
  <script>
    var myApp = angular.module('myApp', []);
  </script>

  There are {{ 1 + 2 }} apples in the basket.
</html>

Facepalm!

Note: All tests done with the current stable release of Angular version 1.0.6.

OT: Technology – Blessing or Woe?

Burj Khalifa

Technological advances in human history is something to marvel and be proud of. From the first wheel to the first car; from winged bicycles to grand passenger aircrafts; from the Tower of Babel to the Burj Khalifa, man has reached high and low, far and wide – aiming for perfection. These advances obviously bring with it much prosperity and wealth. The flow of information and speed of travel were unheard of just half a century ago. Humans, as technology advances, are becoming more and more a dominant race reliant on their own creations.

Just 80 years ago if all planes were grounded it would not have caused the havoc we saw during the Icelandic volcanic eruptions resulting in major delays to travellers across the globe as people where left stranded abroad. People rarely took long journeys in mass herds as we do today, some even as a weekly or even daily routine. We are totally at the helm of our creations.

The amount of walking we do has reduced significantly with the mass production of cars and improvements in public transport. It is comparatively harder now to ask someone to walk more than 2 miles for anything unless there is absolutely no alternative to walking. You could argue the amount of daily walk is about the same because the places people lived, worked and played a hundred years ago were in close proximity so the difference now is transport enables us to cover excess milage.

Our increasing reliance on technology is bad for survival instincts as we’re losing vital knowledge on basic skills such as how to start a fire without a matchstick or hunting for food in the wild – basically surviving in general without any form of man made technology.

However, technology is simplifying almost every aspect of daily life, it has become more integral to our daily habits and increasingly immersive. The productivity gains have increased 10 folds and due to this humanity as a whole is evolving at a faster and faster rate.

Technology is God to the masses and we are willingly subjecting ourselves to this deity. I must admit, I have fallen foul to this aswell as I can’t get away from technology!

Just simply imagine life without the Internet? That’s food for thought!

Reverse Inline Editing

I want to throw this out there as I’m wondering if anyone is interested in a different approach to making HTML elements editable… I recently wrote some code that does the reverse of what my existing inlineEdit plugin does. i.e. it starts of as a form input element and turns into a placeholder on load. Once loaded up you can do all the same saving/canceling as the usual editable elements but the beauty now is that underneath it’s a plain old form element so degrades nicely if you also wish to cater for non-javascript users. So I wonder which approach is best? What are the pros and cons? Or should a plugin cater for both scenarios?

jQHK: A study of the Parallax Effect

In our recent jQuery HK meetup we explored the technic behind the parallax effect using Nike Better World as a reference for our live coding session.

The core idea of the effect is:

  1. bind each section, sprite and background to the window scroll event
  2. record the original offset of the element
  3. divide the scroll position by the desired speed of the element and discount the original offset value
  4. apply varying speeds to elements as desired to create the parallax effect
  5. for the nikebetterworld specific effect where the background image overlaps that’s done with background-attachment: fixed

Here’s what we came up with.

N.B. Sorry about the Angry bird theme for those who try to run the script. That’s quite a big hit over here for Kongers of all age groups! :D