jquery - Single page app url management -
usually in single page app(spa), have single page have have sidenav menu. in menu, there multiple anchor tags.
those anchor tag's url handled angular/react/sammy js router, , main div refreshed based on returned html controller.
pretty simple, right?
but imagine scenario, user directly access anchor tag url via browser address bar. returned html segment loaded whole page.
is there way handle kind of situation; mean whenever user directly access url, he/she addressed?
edit: may i'm not clear problem statement. let me elaborate bit:
- suppose page url is: abc.com/dashboard
- this page got navigation menu , div section class name "main-container"
- user click link in nav menu , router moved url abc.com/view/listofxyz. so, our "main-container" div loaded response of url abc.com/view/listofxyz
- now user, directly go abc.com/view/listofxyz url , hit eneter. then, page contain response html of url i.e. nav menu , div gone.
question is, can implement design approach, these 2 works well?
better go angular ui-router
instead of sammy js router
, of course don't know it. in angular-ui-router
, define states , urls using $stateprovider
of ui-router
. user entered url directly in browser, wil addressed correctly if url defined in state matched.
https://github.com/angular-ui/ui-router/tree/legacy see here more info.
here example,
$stateprovider.state('',{ url: '/', tempate: 'path/to/.html', controller: 'controllertohandle' }) .state('home', { url: '/home', template: 'path/to/home.html', controller: 'hmectrl' }) .state('home.list',{ //defines child states dot url: '/list', //shows url home/list because child state template: 'path/to/list.html' })
use $urlrouterprovider.otherwise('/')
if no path matched likewise, user can traverse home
list
example, www.my-app.com
host name. if entered www.my-app.com/home/list
url /home/list
matched, taken home/list
page , if entered wrong url, taken home
page because of otherwise
method.
if there in react/sammy router, better solution
Comments
Post a Comment