$locationProvider.html5mode, ui-sref with params and $stateParams bug

[c0debreaker]

I just started using $locationProvider.html5Mode(true)

It's nice but I encountered one issue that I couldn't figure out how to make it work.

I wasn't using $locationProvider.html5Mode(true) before so line 4 on my gist below was not commented out. It was working great.
https://gist.github.com/c0debreaker/66273c92ed11623ad174

Now with $locationProvider.html5Mode(true), and line 4 commented out and my existing ui-sref code below,

<a ui-sref="main.monthlycassandra.daily({udi : monthlyData.udi})">{{monthlyData.udi}}</a>

it will not work anymore. The $stateParams object becomes empty. The link that is logged in my Chrome's Network tab is

http://localhost:4444/api/reports/daily?token=535c0d2a22135b2787876988

However, when line 4 on my gist is not commented, the link below is logged and it works

http://localhost:4444/api/reports/daily?token=535c0d2a22135b2787876988&udi=Targetdev5

However, the path is also displayed on the location bar on top of the browser which I don't want.

The difference is that &udi=Targetdev5 was missing.

I've tried different suggestions on few stackoverflow links I've found like the
<base href="/"> and also $locationProvider.html5Mode(true).hashPrefix('!') but it didn't fix the issue.

Any help would be greatly appreciated!

Thanks!

[c0debreaker]

I got it working but it's hackish!!!

https://gist.github.com/c0debreaker/765c0b96934bf0bcc7c6

[c0debreaker]

Saw a new problem. On the first click, it works. However, on the second click, UI-router thinks it's the same link I clicked. It won't call it. :(

[c0debreaker]

I got it working this time and it really works but the flickering/refreshing on the browser is annoying!!!

Here is what I did. I added { reload : true }

$state.go('main.monthlycassandra.daily', {udi : param}, { reload: true });

[c0debreaker]

I've scrapped $state.go(). I am now just updating the factory value and using $watch to watch for the changes in the device I picked or clicked. When it sees a change, it contacts Cassandra via my NodeJS's Express endpoint to pull data for that specific device and finally displays the graph. No flickering! Love the new code and it's even shorter. No more flickering/refreshing. The graph does not even reload the whole div graph area like it was previously!

Please close this ticket.

[malixsys]

Can you show a working example of the problem on Plunkr/JSBin/etc?

[c0debreaker]

Sure. I will do it sometime this afternoon. I'm not sure if you've read my last comment. I'm not using ui-sref from the html page anymore. What I did is assigned the param coming from the html page into a factory variable via ng-click.

    $scope.displayDeviceUDI = function(param) {
        $scope.device = DeviceUDIFactory;
        $scope.device.udi = param;
    }

displayDeviceUDI is called by ng-click

<a ng-click="displayDeviceUDI(monthlyData.udi)">{{monthlyData.udi}}</a>

Here is the code that watches the changes in the device model. Everytime I click any new device on the table generated by ngTable, it will contact Cassandra via a REST call.

    $scope.$watch('device.udi', function (newValue, oldValue) {
            if (newValue === oldValue) {
                return;
            }

            CassandraRestangular.all("daily").getList({udi : $scope.device.udi})
                .then(function(response) {
                    $scope.jsonData = response;
                    $scope.dailyudichart = plotDailyCassandraChart($scope.jsonData, 'Daily Usage of UDI', 'user', 'udi', 'report_date', 'bytes_in', 'bytes_out');
                })
        }, true);

It is working great! I honestly like this approach since there is no more calling of states.

When I get a chance this afternoon, I will make a working example of the problem.

Thanks.

[malixsys]

Sounds like you found a workaround but it would be nice to make sure ui-router also works as advertised, hence the Plunkr :)

[c0debreaker]

Yup! Promise, I'll make a plunkr later. Working on an http interceptor code right now. :)

Thanks!

[c0debreaker]

Apology malixsys, I've been so busy at work. I found a freetime few minutes ago. Here is the plunker I promised.

http://plnkr.co/edit/QAi2J4l29nbk7F3FbuHM?p=preview

It's been a while so I'd like to remind what was happening again. This is about $locationProvider.html5Mode set to true and $stateParams becomes empty when url is commented out.

[malixsys]

How DID you expect it to behave again?
$stateParams are derived from URL, if the property someText is not declared there in some manner, ui-router will not parse it in $stateParams...

[c0debreaker]

I started using $locationProvider.html5Mode so that I can have a uniform url address on the location bar. I mean, if let's say my website is http://www.example.com, that url will always be like that. If $locationProvider.html5Mode is not enabled, the link becomes http://www.example.com/main or http://www.example.com/home, etc.

I was hoping I'll be able to capture $stateParams even if $locationProvider.html5Mode was enabled.

[malixsys]

$stateParams have to come from the URL, be it /someValue or ?foo=bar or /#!/bazz or whatever...
html5Mode has to do with /#/blabla vs. /blabla
see http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting

[eddiemonge]

https://gist.github.com/eddiemonge/f6a58169c2846731a1eb