Angular simple routing without templates

Question

I am looking for simple solution with Angular how to handle routes.

I have page generated by server with simple google map and little logic which is in 3 separated controllers.

Now i want to hook routing inside of this. Just simple routing. When I move with map and get new coordinas i want to push them into current url as param "?position=10.11,50.23". I want to use history push state with hashbang backup.

In other part of application i want to listen on change of this parameter (some $watch maybe?). And i want to use same code for detecting change to be used when page is loaded first.

I used CanJS in previous project, where this was absolutely simple, but in Angular i cant event make baby step to correct result :)

PS: this is just cut of minimal usecase.

Thanks

Community · Accepted Answer · 2017-05-23 11:57:02Z

4

You do not really need angular routing to do that. Routing in angular is usually used to replace ng-view with different templates though it can be used for other things as well.

Your requirements can be met by using the $location service and setting up a $watch:

$scope.$watch(function () { return $location.search().position; }, function (newVal) {
  $scope.params = newVal || 'No params';
});

$scope.setParams = function (val) {
  $location.search('position', val);
};

Working demo

Launch the live-preview in a separate window to see the parameters change in the window address bar.

Update: The Demo doesn't work on plnkr.co anymore. Possibly because they have changed how they use the embedded mode.

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Nov 27, 2013 at 22:46

musically_ut

34.3k9 gold badges98 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Schovi Over a year ago

Thanks for explanation. I totally missed $location. Everytime I ended on $route :)

suzanshakya Over a year ago

Thanks. Also, to make this work, I needed to enable html5mode.

musically_ut Over a year ago

@suzanshakya Can you post an updated example where it does work? Thanks.

artur grzesiak · Accepted Answer · 2013-11-27 22:53:20Z

2

Do not know CanJS, but in angular it is pretty easy as well.

First use: $location.search({parameter1:'someValue', parameter2: 'someOtherValue'}) to set you url -- the history will be updated automatically.

Then the most elegant way to detect any changes in url is to use (one of) two built-in events: $locationChangeStart and $locationChangeSuccess, like that:

    $scope.$on("$locationChangeStart", function (event, next, current) {
        // your staff goes here
    });
    $scope.$on("$locationChangeSuccess", function (event, next, current) {
        // or here (or both if needed)
    });

To get the search parameters just use $location.search() in one of the above methods.

answered Nov 27, 2013 at 22:53

artur grzesiak

20.9k5 gold badges49 silver badges57 bronze badges

6 Comments

musically_ut Over a year ago

Would this also work if the user lands directly on a URL? I am not sure whether $locationChangeStart/Success events are fired then.

artur grzesiak Over a year ago

@musically_ut do you mean: user changes url in the browser, manually? (if so do not think anything can help to prevent reloading the app)

musically_ut Over a year ago

I was referring to the case when the URL already has #?position=XYZ when the app is loaded. This can happen if the user reloads the current page or if he forwards a link to someone else. I don't think the $locationChange{Start/Sucess} events are fired in that case (I may be wrong), and the application would need to load its state from $location.search() anyway. But +1 for pointing out the events; they had slipped my mind.

artur grzesiak Over a year ago

@musically_ut actually dunno :-) but my rough guess is that we need to check search parameters of url by our own.

musically_ut Over a year ago

Or you can just set up a $watch on it and not worry about how the user got there. :)

|

Collectives™ on Stack Overflow

Angular simple routing without templates

2 Answers 2

3 Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Linked

Related