Update single view where there are many in AngularJs and UI-Router

Question

I am a n00b to Angular, and trying to get my head around how ui-routing works. I see the how the concept of multiple routes works, and how nested routes work. How would i do both? Or is this not good practice?

In the example bellow I have app/wh working fine, however when some goes to app/wh/toc/123 I want only the middle view to swap.

.state('app.wh', {
                url: "/wh",
                views: {
                    'left' : {
                        templateUrl: "static/partials/leftPane.html"
                    },
                    'middle': {
                        templateUrl: "static/partials/start.html"
                    },
                    'right' : {
                        templateUrl: "static/partials/rightPane.html",
                        controller: 'AsideCtrl'
                    }
                }

            })

            .state('app.wh.toc', {
                url: "/toc/:id",

                views: {
                    'middle' : {
                        templateUrl: "static/partials/toc.html",
                        controller: function($scope, $stateParams, $state){
                            $scope.title = $stateParams.id;
                        }
                    }
                }



            })

Matt Way · Accepted Answer · 2014-01-25 00:50:26Z

1

I am guessing that you want your left and right panels to stay static while the middle content changes through the users actions. Personally I am not a big fan of using multiple routes, and instead simply use ng-include if I want to separate portions of a single view into their own files.

If you do this, then you only need to define your parent, and child state:

.state('app.wh', url: '/wh', abstract: true, controller: ...

Note that if you want separate controllers for left and right, you can use ng-controller in your views. Also If this state is common to multiple middle contents, then you might want to make it an abstract state, so that the user cannot actually load it (it only acts as a parent placeholder).

.state('app.wh.toc', url: /toc/:id ...

Then in your view:

<div ng-include="someUrlRefLeft"></div>
<div ui-view=""></div>
<div ng-include="someUrlRefRight"></div>

answered Jan 25, 2014 at 0:50

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

abritez Over a year ago

I think this is exactly what I was missing. I didn't feel like what i was doing was the right approach. Going to give it a shot now, thanks

abritez Over a year ago

Thanks ng-include actually answered a few of my other issues as well. Was relying a bit too much on ui-router

Collectives™ on Stack Overflow

Update single view where there are many in AngularJs and UI-Router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related