Если хотите делать связку PhoneGap + AngularJS, то посмотрите лучше в сторону ionic

Так же если это проект в учебных целях, то может вам лучше глянуть в сторону Angular2 ?

Как вариант отлавливать клик на body, и при клике убирать класс. т.е.

$('body').on('click', function(){
  // убираем класс
})

а при клике на самом элементе отменить всплывание событие. то есть событие не дойдет до body

$('.nav-submenu').on('click', function(e){
  e.stopPropagation();
  // остальной код
})

P.S. Ваш кода можно сделать куда приятнее, если заменить

$('.nav-submenu').on('click', function(a) {submenu(this)});

на
$('.nav-submenu').on('click', submenu);
А внутри submenu this и так будет ссылаться на объект, который вы в вашем случае передаете через параметр a

Сейчас активно продвигается идея изоморфных приложений, когда первая страница рендериться на сервере, а последующие на клиенте.
Тут есть два подхода, либо использовать так называемые full-stack фреймворки(на nodejs), на подобии derbyjs или meteor. Очень интересные инструменты, но привязаны к mongo. При этом подходе и сервер и клиент пишутся на JS.

Второй подход заключается в том, что у нас есть сервер с которым мы работаем по API(пишите на чем хотите), а фронтэенд имеет скажем так прослойку на nodejs.
С появлением ReactJS рендерит одну и туже страницу на сервере и на клиенте стало очень просто.

Уже сейчас есть эксперементальные инструменты например от Ebay https://github.com/appsforartists/ambidex
Думаю скоро нас накроет волной подобных решений. И тогда подобные вопросы сами собой отпадут =)