Angular-ui.router: Update URL without view refresh

This is an example of the way to go if I understand correctly:

$state.go('my.state', {id:data.id}, {notify:false, reload:false});//And to remove the id from the url:$state.go('my.state', {id:undefined}, {notify:false, reload:false});

From user l-liava-l in the issue https://github.com/angular-ui/ui-router/issues/64

You can check the $state API here: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

Based on our previous discussions, I want to give you some idea, how to use UI-Router here. I believe, I understand your challenge properly... There is a working example. If this not fully suites, please take it as some inspiration

DISCLAIMER: With a plunker, I was not able to achieve this: http://m.amsterdamfoodie.nl/, but the principle should be in that example similar

So, there is a state definition (we have only two states)

  $stateProvider    .state('main', {        url: '/',        views: {          '@' : {            templateUrl: 'tpl.layout.html',            controller: 'MainCtrl',          },          'right@main' : { templateUrl: 'tpl.right.html',},           'map@main' : {            templateUrl: 'tpl.map.html',            controller: 'MapCtrl',          },          'list@main' : {            templateUrl: 'tpl.list.html',            controller: 'ListCtrl',          },        },      })    .state('main.criteria', {        url: '^/criteria/:criteria/:value',        views: {          'map' : {            templateUrl: 'tpl.map.html',            controller: 'MapCtrl',          },          'list' : {            templateUrl: 'tpl.list.html',            controller: 'ListCtrl',          },        },      })}];

This would be our main tpl.layout.html

<div>  <section class="main">    <section class="map">      <div ui-view="map"></div>    </section>    <section class="list">      <div ui-view="list"></div>    </section>  </section>  <section class="right">    <div ui-view="right"></div>  </section></div>

As we can see, the main state does target these nested views of the main state: 'viewName@main', e.g. 'right@main'

Also the subview, main.criteria does inject into layout views.

Its url starts with a sign ^ (url : '^/criteria/:criteria/:value'), which allows to have / slash for main and not doubled slash for child

And also there are controllers, they are here a bit naive, but they should show, that on the background could be real data load (based on criteria).

The most important stuff here is, that the PARENT MainCtrl creates the $scope.Model = {}. This property will be (thanks to inheritance) shared among parent and children. That's why this all will work:

app.controller('MainCtrl', function($scope){  $scope.Model = {};  $scope.Model.data = ['Rest1', 'Rest2', 'Rest3', 'Rest4', 'Rest5'];    $scope.Model.randOrd = function (){ return (Math.round(Math.random())-0.5); };}).controller('ListCtrl', function($scope, $stateParams){  $scope.Model.list = []  $scope.Model.data    .sort( $scope.Model.randOrd )    .forEach(function(i) {$scope.Model.list.push(i + " - " + $stateParams.value || "root")})  $scope.Model.selected = $scope.Model.list[0];  $scope.Model.select = function(index){    $scope.Model.selected = $scope.Model.list[index];    }})

This should get some idea how we can use the features provided for us by UI-Router:

• Absolute Routes (^)
• Scope Inheritance by View Hierarchy Only
• View Names - Relative vs. Absolute Names

Check the above extract here, in the working example

Extend: new plunker here

If we do not want to have map view to be recreated, we can just omit that form the child state def:

.state('main.criteria', {    url: '^/criteria/:criteria/:value',    views: {      // 'map' : {      //  templateUrl: 'tpl.map.html',      //  controller: 'MapCtrl',      //},      'list' : {        templateUrl: 'tpl.list.html',        controller: 'ListCtrl',      },    },  })

Now our map VIEW will be just recieving changes in the model (could be watched) but view and controller won't be rerendered

ALSO, there is another plunker http://plnkr.co/edit/y0GzHv?p=preview which uses the controllerAs

.state('main', {    url: '/',    views: {      '@' : {        templateUrl: 'tpl.layout.html',        controller: 'MainCtrl',        controllerAs: 'main',        // here      },      ...    },  }).state('main.criteria', {    url: '^/criteria/:criteria/:value',    views: {      'list' : {        templateUrl: 'tpl.list.html',        controller: 'ListCtrl',        controllerAs: 'list',      // here      },    },  })

and that could be used like this:

<h4>{{main.hello()}}</h4><h4>{{list.hello()}}</h4>

The last plunker is here

you can use scope inheritance to update url without refreshing view

$stateProvider            .state('itemList', {                url: '/itemlist',                templateUrl: 'Scripts/app/item/ItemListTemplate.html',                controller: 'ItemListController as itemList'                //abstract: true //abstract maybe?            }).state('itemList.itemDetail', {                url: '/:itemName/:itemID',                templateUrl: 'Scripts/app/item/ItemDetailTemplate.html',                controller: 'ItemDetailController as itemDetail',                resolve: {                    'CurrentItemID': ['$stateParams',function ($stateParams) {                        return $stateParams['itemID'];                    }]                }            })

if child view is inside parent view both controllers share same scope.so you can place a dummy (or neccessary) ui-view inside parent view which will be populated by child view.

and insert a

$scope.loadChildData = function(itemID){..blabla..};

function in parent controller which will be called by child controller on controller load. so when a user clicks

<a ui-sref="childState({itemID: 12})">bla</a> 

only child controller and child view will be refreshed. then you can call parent scope function with necessary parameters.