CODEWITHSUNDEEP
javascriptangularjsangular-routing
Schovi
Schovi

Reputation: 1990

Angular simple routing without templates

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

Upvotes: 4

Views: 2525

Answers (2)

musically_ut
musically_ut

Reputation: 34288

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.

Upvotes: 4

artur grzesiak
artur grzesiak

Reputation: 20348

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.

Upvotes: 2

Related Questions