AngularJS and RouteProvider how to update a small section in the page -

i have conceptual question, have site 4 sections in 1 row

------------------------------------------------------------------------------------------- | header                                                                                  | ------------------------------------------------------------------------------------------- |            |                               |                                     |      | | 1          | 2                             | 3                                   | 4    | | side menu  | <div ui-view='ui_side_view'>  | <div ui-view='ui_container_view'>   |      | ------------------------------------------------------------------------------------------- 

section #2 has <ng-view> tag, can't use anywhere else ( right? ) i'm trying have concept this:

• url of /charter - when no params exists - load history in section #2
• url of /charter?id=1 - when "id" exists - load history in section #2 , content of template in section #3

router like:

.when('/charter', { controller: 'charterctrl', template: '<div ng-include="templateurl">loading...</div>' }) 

issue 1:

when url changes /charter?id=2 - nothing happens ( i'm using html5mode ) that's main problem, other that, have dynamic templating code solve issue #2 below ...

issue 2:

also curious this, if i'll change routeprovider like:

.when('/charter', { controller: 'charterctrl', template: '<div ng-include="templateurl">loading...</div>' }) .when('/charter/:id', { controller: 'chartercontainerctrl', template: '<div ng-include="templateurl">loading...</div>', }) 

how can combine in url more 1 parameter like:

/charter?id=4&cache=true 

if url formatting is

/charter/<id>/ ... < "cache" goes ? 

update $stateparam

my html now:

• section #2 have: <div ui-view="ui_side_view"></div>
• section #3 have: <div ui-view="ui_container_view"></div>

they seem work first time only, "templateurl" $stateprovider drop content in right place ... other url change - nothing happens

so router now:

$stateprovider     .state('index', {         url: "/index.pcgi",         views: {             "ui_side_view": { templateurl: "templates/empty.html" },             "ui_container_view": { template: "index.side.empty" }         }     })     .state('charter', {         url: "/charter.pcgi",         views: {             "ui_side_view": { template: "charter.ui_side_view <a href='/charter.pcgi/q/test'>click</a>", controller: "charterctrl" },             "ui_container_view": { template: "charter.ui_container_view", controller: "chartercontainerctrl" }         }     })         .state('charter.q', {              url: "/charter.pcgi/q/:q",                 views: {             "ui_side_view": { template: "charter.q.ui_side_view", controller: "charterctrl" },             "ui_container_view": { template: "charter.q.ui_container_view", controller: "chartercontainerctrl" }         }     }); 

in controller.js i"m trying debug:

.controller('chartercontainerctrl', ['$scope', '$state','$stateparams', function ($scope, $state, $stateparams) {      console.debug($state.params);     console.debug($stateparams);  }]); 

both empty

when changing url from:

• /charter.pci /charter.pcgi/q/test1 - templates being loaded , controller loaded , see console.debug() msgs.
• /charter.pcgi/q/test1 /charter.pcgi/q/test2/ nothing happens, , controller not loaded again don't see console.debug() msgs.
• going /charter.pcgi/q/test2/ /index.pcgi - works.

plunker: http://plnkr.co/edit/qhabhdvi29texwy8g441

• you can play going , forth between charter.pcgi , index.pcgi buttons
• but if click inside charter.pcgi buttons initiate /charter.pcgi/q/someid - doesn't anything

thanks in advance.

to invoke state change ui-router should use ui-router build-in directive ui-sref instead of href

in html here example of transition states

<button ui-sref="charter"></button> <button ui-sref="charter.q({ q: myparamvalue})"></button> 

here how in js if need

$state.go('charter'); $state.go('charter.q',{ q: myparamvalue}); 

hope solve problem, let me know if you're still running on issue.

edit :

after long conversation on ricky wanted found problem.

actualy didn't know proper use of nester states in ui-router

we finaly made : (working in plunker add space somewhere if don't work).

here states

$stateprovider     .state('index', {       url: "",       views: {             "ui_side_view": { templateurl: "empty.html" },             "ui_container_view": { template: "index.side.empty <button ui-sref='charterq({ q: 1})')>q=1</button>" }         }     })      .state('charter', {         url:"/charter.pcgi",         views: {             "ui_side_view": { templateurl: "charter.side.html", controller: "charterctrl" },             "ui_container_view": { templateurl: "charter.container.html", controller: "chartercontainerctrl" },         }       })         .state('charterq', {              url: "/charter.pcgi/q/{q}",                  views: {             "ui_side_view": { templateurl: "charter.side.html", controller: "charterctrl" },             "ui_container_view": { templateurl: "charter.container.html", controller: "chartercontainerctrl" },         }     }); 

in html there 2 nester ui-view named "ui_side_view" , "ui_container_view"

in addition answer i'd think charterq state "may" substate of charter. need modify index.html template in consequences.

also keep mind if load ressource out of "q" parameter you'd prefer use resolve on ui_container_view @mhadadi said on other answer :

"ui_container_view": { template: "charter.q.ui_container_view", controller: "chartercontainerctrl" ,                             resolve:{                                         q:function($http){                                              return //your http call                                            },                                                    }                                  }                 } 

you able in associated controller :

.controller('chartercontainerctrl', function ($scope, $state, $stateparams, q) {     console.debug(q); //this q "data" return $http call in resolve.     console.debug($state.params);     console.debug($stateparams);  }]); 

glad made :)