What are your thoughts about the new ng-animate and integrating it with this library?
Thanks!

using angular-mobile-nav under android, at the line https://github.com/ajoslin/angular-mobile-nav/blob/master/mobile-nav.js#L12 nav is not defined, so the backbutton does nothing.

I've tried to do:

angular.module('ajoslin.mobile-navigate')
.run(function($navigate) {
  //Android back button functionality for phonegap
  document.addEventListener("deviceready", function() {
    document.addEventListener("backbutton", function() {
      var backSuccess = $navigate.back();
      if (!backSuccess) {
        navigator.app.exitApp();
      }
    });
  });
});

but it does nothing.

At the end of a reverse transition .mb-page is disappearing and reappearing in less than a second which causes a inelegant "flash". It happens randomly which was difficult for me to debug but I finally found that -webkit-transform: translate3d(-100%, 0, 0); in mb-slide.mb-out was causing it. Commenting the line fixes the issue.

Please be so kind and register mobile nav on bower.

Thanks

I poked around attempting to find a license but it wasn't obvious to me. What's the license on this project?

For some reason the modal + $navifate.back() behaves strangely on my demo page

http://revolunet.github.com/angular-mobile-demo

1- click "modal" in the top toolbar -> $navidate.go('/modal');
2- click "close modal" in the modal -> $navigate.back()
this behaves perfectly.

then :
1- click "modal" in the top toolbar -> $navidate.go('/modal');
2- click "home" in the top toolbar -> $navidate.go('/', 'slide', true); // reverse
3- click "modal" in the top toolbar -> $navidate.go('/modal');
4- click "close modal" in the modal -> $navigate.back()

the modal transition is now broken for some reason.

is it my bad implementation ?

The demo code suggests that a single controller is used to drive the navigation.

Is it possible to use separate controllers? e.g. one per view?

Perhaps it works out of the box, I just couldn't find doco or a sample on what I would call 'regular' view usage.

$routeProvider.when("/", {
        controller: "MainController",
        templateUrl: "views/main/index.html"
      }).when("/resources", {
        controller: "ResourcesController",
        templateUrl: "views/resources/index.html"
      }).when("/resources/:id", {
        controller: "ResourceController",
        templateUrl: "views/resources/show.html"
      }).otherwise({
        redirectTo: "/"
      });
    }

<div class="nav-collapse collapse navbar-responsive-collapse">
  <ul class="nav">
    <li ng-class="navClass('home')">
      <a ng-tap="$navigate.go('/')">Dashboard</a>
    </li>
    <li ng-class="navClass('resources')">
      <a ng-tap="$navigate.go('/resources')">Resources</a>
    </li>
  </ul>
</div>

Hi @ajoslin,
When I do a slide transition on a page containing a lot of pictures, the transition does not look good. I would like to trigger the transition only when all pictures have finished loading.
Is there a way of doing it ? If not can you guide me into solving this problem.
Thanks

That allows other tools like grunt-bower-task to automatically copy the css file to a target directory.

do not call onRouteSuccess() if next is undefined or rediretTo is element of next.$route. The $routeChangeSuccess event is triggered twice if a redirection is active, like shown in this example: http://plnkr.co/edit/pZfw9tMhFqtaVPV9WJaz

/* 
 * Will listen for a route change success and call the selected callback
 * Only one listen is ever active, so if you press for example 
 * /link1 then press back before /link1 is done, it will go listen for the back
 */
self.onRouteSuccess = angular.noop; //default value
$rootScope.$on('$routeChangeSuccess', function($event, next, last) {
  if (next && next.$route && ! ('redirectTo' in next.$route)) {
    self.onRouteSuccess($event, next, last);
  }
});

Line 235 of mobile-nav.js seems to generate an error because the reverse property does not exist in the conditional below.

This is without using the new reverse option at all.

Is there a config change we need to avoid the error?

if (dest.reverse() || ($route.current && $route.current.$route.reverse)) {

When "otherwise" rule is used following exception occurs:

TypeError: Cannot read property 'reverse' of undefined
    at changePage (http://localhost:8080/mobile-nav.js:235:71)
    at transitionStart (http://localhost:8080/mobile-nav.js:253:22)
    at Object.$get.e.$broadcast (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:88:281)
    at navigate (http://localhost:8080/mobile-nav.js:133:16)
    at defaultRouteSuccess (http://localhost:8080/mobile-nav.js:148:5)
    at http://localhost:8080/mobile-nav.js:152:49
    at Object.$get.e.$broadcast (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:88:281)
    at $get.ya.params (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:80:114)
    at k.promise.then.i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:76:119)
    at k.promise.then.i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:76:119) angular.min.js:60

$route.current.$route is undefined in this case

Hi, I'm trying to handle a logged in redirection and still be able to call $navigate.back() to log out.

For example: The user goes to / and if he is logged in it redirects to /home. Then if he wants to log out I call $navigate.back() but here nothing happens as the navHistory is empty.

$rootScope.$on("$routeChangeStart", function(event, next, current) { if (user_logged_in) $navigate.go('/home'); });

For the moment I added those two lines in the go function.

if (!navHistory.length) navHistory.push(new Page($location.path()));

Is there a better way to do it ? Thanks

I'm trying to figure out why does this module require nodejs?

Could it be done without it?

I was looking to make a demo in Phonegap and create an Android app, but Phonegap doesn't support node js.

I've found that often when the URL is changed manually in the browser, it leaves the previous frame. I believe I was able to fix it by changing nagivate.js:49 to navigate(self.next, self.current);.

(There doesn't seem to be transitions, which may be intentional?)

I was kind of guessing and am not sure if my change would break something else; hence an Issue rather than a Pull Request :)

Make it so the browser back button goes back as intended, using window.onpopstate.

when i set up the ng-controller via the routeProvider config (in app.js for example) like this:

.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'AccountCtrl'
    })
})

the mobile-view element is empty and we get no errors to indicate what went wrong.

When, on the other hand, I set up the controller via directive directly in the html (in index.html for example) like this:

<body ng-controller="MainCtrl">

All the content comes back.

This is with angularjs 1.1.4x and very few other dependencies.

(I went to some trouble to upgrade a fairly vanilla bower/yeoman install of angular to angular.1.1.4 so I could resolve this but turns out, in this case, the invisibility problem is the same in either version).

So demo page is snappier.

Idea is straight from the newest version jquery mobile angular adapter by tigbro: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/Changelog.md

Syntax would be:

$routeProvider.when("/page1", {
  controller: 'MyCtrl',
  transition: 'modal'
});

No contents will be rendered inside the mobile-view directive.
I use Angular 1.0.6 and the current angular-mobile-nav from github.
Tested on Android default browser, Android Chrome and Desktop Chrome.

Need to add basic unit tests for everything.

Also add a "tests" page on the demo site, which runs the tests in the browser. So we can do automated testing on mobile devices, a device would navigate to http://ajoslin.github.com/angular-mobile-nav/test and it will run the tests in the browser and give a report on the page.

Allow user to save a copy of current history and use it again later.

Use case: tab bar. User starts app. User is on tab 1. User navigates through pages on tab 1 and ends up with 3 pages in history. User then clicks tab 2. Current history (tab 1's history) should be saved, and then start fresh for tab 2. User does some things for tab 2, and goes back to tab 1. The earlier history and the page tab 1 was on should be restored.

Perhaps I should even write a service for this (navHistoryManager or something) It's rather complicated. Thoughts?

read last comment by @ajoslin

Yo Andy,

what to you think?
Also, this flow could be automated then and it makes contributing much easier. :)

if you swap out the angular in your demo with 1.1.4, it doesn't work. I took me a while to confirm it.

Give a more normal-looking project page at ajoslin.github.com/angular-mobile-nav (one that looks made for desktop browsers) with the README up on there and a better getting started tutorial / api overview.

Also, use docco to make doc pages. Because docco is awesome.

Hi guys!

I cloned the repo on my local OS X web server and I can't make the demo show anything when I access the url on localhost, is like it's not loading the content/home.htmltemplate on the default path (/). I'm using the mobile-nav.js and mobile-nav.css from the demo website (at the gh-pages branch) and haven't been able to make it work.

Am I missing something? I left the demo as-is, just adding these 2 files. Any help would be appreciated.

Thanks!

I've updated my angular script to 1.0.6 and know your great navigation won't work, is there any way to fix this?

Let me clarify that. The "back" button on the demo page works as expected but if you use your browsers back function (i.e. button or Alt-Left, etc) then the transition looks like a forward transition.

i get an empty page in chrome.

Hi,

This looks very useful. It seems a like there's a delay when you click something though. For a work around check out:
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone

Should somehow remember the scroll for a page when going back to it.

If you're on a list, tap an item, go back: you should go back to the same place on the list.

I have been searching for a nice integration with angularjs that will support mobile tabgroup UI, can that be done with this framework? Is there an example somewhere?

thanks

I'm trying to stick a carouFredSel on one of my angular-mobile-nav pages. For some reason, the -webkit-backface-visibility: hidden; style of .mb-page makes the carouFredSel invisible. Is that style necessary for the angular-mobile-nav functionality?

Hey. I'd like to send a pull request with a few changes, but I'm new to jshint and uglify-js. Can you explain the process? Also, does the last line of the readme mean you want pull requests for the gh-pages branch only?

Thanks for the lib!

https://github.com/angular-ui/bootstrap/blob/master/src/transition/transition.js

Linear animations are better instead of ease for sliding pages.

Add option to go so user can make it backwards. Perhaps $navigate.go('/page', [overrideTransition, direction]).

If second parameter is a boolean, it will take that for reverse override. Else it will take second parameter for a transition override and third parameter as reverse. Or would direction of -1 or 1 be more intuitive?

If a page is recorded as having reverse direction, it will always reverse itself (going to it in reverse will slide like it's backwards, and going back from it will slide like it's going forwards).

Usecase: Start up app, want to make it look like going 'back' without actually having something in history. Eg home page with a logout button going 'back' to login screen.

So, hello :)
Maybe someone can help me. I have a form in which are inputs and a link to another page where I can select an item. After I selected an item, I go back to the form page.
The problem is: I have no idea how I submit the selected item to the form page and also the user data in the inputs is lost. It seems that another scope is created instead of using the old one.
I could use $rootScope to submit the selcted item, but that's not what I want :)
Here's an image of how it should be:

Greetings from Germany,
archer96 (Andre)

Add instructions about including 'mobile-navigate' module, and suggestions about putting it on rootScope and navigating to your homepage by default.

On some older/slower devices or browsers (android and iOS), the transitions sometimes just don't work. It seems the transition class somehow doesn't apply itself.

src/change.js, line 37-49. Here's an explanation of how it works, for example with sliding a page in:
It first applies a class which makes the page be hidden to the left of the screen (destClass), along with the class that marks it as a slide transition.

Then, after a setTimeout so the destClass has time to "apply" itself to the element going in, the element is set to transition into the middle of the screen with showClass. The problem is sometimes destClass just doesn't move the element; it doesn't do its thing.

On line 49 there's a temporary "fix" (not really a fix): the second class isn't added until 30ms later than the first class. But this doesn't even always work; sometimes when it's really slow even with 30 milliseconds the destClass won't "apply" itself.

Current ideas:

1. Figure out what the actual problem is with current class structure (will require more tweedling)
2. Change how I'm doing transitions with a different class structure (no concrete ideas yet)
3. Move away from classes and use el.css() - I don't like this at all. Takes away the ease of a stylesheet.

If anyone has any ideas for 1) or 2), please say :-)

sometimes when going back I get a 1ms flash of the previous page. Not sure if it's because I'm using the back button instead of $navigate.back.

It would be nice to give the ability to share data between views in a straightforward way, perhaps in the form of $routeParams (tired '/home/:myId', didn't work).

Since AngularJS 1.0.6 the $route property on the route object is deprecated.

angular/angular.js@6f71e80

I got it working by replacing next.$route with $route. It works with AngularJS 1.0.4 and 1.0.6. I am not sure how to fix the transistion reversing.

Nice work!
I am wondering how this can be used with dynamic (opposed to static) pages.
In my angularjs project I use

<a href="" ng-click="open(note.id)"> with id being provided by angularjs
OR
<a href="#/notes/{{note.id}}">{{note.title}}</a>

I tried to translate this with the ng-lap directive but I can't get it to work
i.e. <a ng-tap="$navigate.go('#/notes/{{note.id}}')"> does not work.

Any clue.

Thank you

I think i may have found some buggy behaviour is a user refreshes on a page and presses the browser's back button.

steps to reproduce:

1. go to http://ajoslin.github.io/angular-mobile-nav/
2. navigate a few pages
3. refresh the browser
4. press the back button on the browser

Now if you inspect the dom, there will be multiple 'mp-page' elements that will never be removed.

Tested in 27.0.1453.56 beta

After the transition completes the page flashes. See live example here:
http://amnav.kissr.com

Not sure if this is related to #10. Posted new since the other issue seems to not be reproducible on modern devices/browsers.

Any ideas?

As $anchorScroll is working automatically with the default ng-view it would be nice if it would work with mobile-view too. As I'm pretty new to angularjs I'm not sure if I could get it somehow to work.

buttons move to middle
whitescreen only with angular 1.06

We don't want to lazy load page templates in a mobile app. Having a delay while a page is XHR loaded just looks bad on mobile.

Just need to add this code somewhere (probably a .run function on our module):

angular.forEach($route.routes, function(r) {
  if (!$templateCache.get(r.templateUrl)) {       
    $http.get(r.templateUrl).then(function(response) {
      $templateCache.put(r.templateUrl, response.data);                                                                                                                   
    });                              
  }
});