Angular/UI-Router - How Can I Update The URL Without Refreshing Everything?

Question

I'm new to both Angular and the ui-router. When someone selects a model and my controller performs a standard SHOW method, I simply want to update the URL to include the model's ID without refreshing the page, and continue on with my original view. I'm not sure how to do this...

$stateProvider
        .state('citylist', {
          url: "/",
          templateUrl: "views/index.html"
        })
        .state('cityshow', {
          url: "/city/:id",
          templateUrl: "views/index.html"
        })

angular.module('app.system').controller('IndexController', ['$scope', 'Global', 'Cities', '$stateParams', '$location', function ($scope, Cities, $stateParams, $location) {

    $scope.loadTown = function(id) {
        Cities.get({id: id }, function(city) {
             $scope.city = city
             // Change URL
             // Do things within the same view...
        });
    };
});

<button ng-click="loadTown(123456)">Chicago</button>

Radim Köhler · Accepted Answer · 2014-06-25T12:51:07.750

6

The code snippets you've used are a bit far from the correct ui-router settings. I would suggest to you, check this demo application: http://angular-ui.github.io/ui-router/sample/#/contacts/1. Here we can see how the List is "fixed" while Detail is changed without any page refresh.

The code of this example download here https://github.com/angular-ui/ui-router/tree/master/sample.

What should help a lot to understand HOW TO (except the wiki) was this code snippet: state.js. Load the demo, read through this commented explanation. And ui-router will make sense...

edited Jun 25 '14 at 12:51

answered Dec 14 '13 at 08:20

Radim Köhler

122,561
47
239
335

2

Im sure you have seen this: http://egghead.io/lessons/angularjs-introduction-ui-router Radim's advise is good. Most of the jsfiddles, plunkers and articles are already outdated and though there is nothing really hard about the ui-router, it takes a while to realize unless you find the correct source. – scalaGirl Dec 14 '13 at 19:15
@radim: does this really solve the original question - namely how to update a model and a URL, but without refreshing a view? That's the question I have reasked at http://stackoverflow.com/questions/27467170/angular-ui-router-update-url-without-view-refreshes – Simon H Dec 16 '14 at 13:25

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

In essence, what you want to do is not to put the city code in the ui-view and/or not to use a template with this view. As a result, none of the DOM will get changed but the URL will. This is discussed more fully on Angular-ui.router: Update URL without view refresh

edited May 23 '17 at 11:43

Community

1
1

answered Dec 17 '14 at 13:59

Simon H

20,332
14
71
128

Angular/UI-Router - How Can I Update The URL Without Refreshing Everything?

2 Answers2

Linked