CODEWITHSUNDEEP
angularjsangular-ui-routerangular-ui-router-extras
xyNNN
xyNNN

Reputation: 492

Multiple states on one page with ui-router

currently i am investigating the possibility to configure ui-router for the following scenario. It would be great, if someone have an idea how to achieve this.

I have a simple one pager layout with a navigation. Each navigation item have a div box with content. How i can now define several states on one page (For each navigation item one state with a separate controller and template)?

Afterwards i would like implement a solution, when i click on a navigation item to scroll to the corresponding div container. Basically this is made with HTML anchors, but how i can solve this with ui-router? Or isn't this possible and i have to create one state with separate views?

Below a example image to show you the wanted layout:

Example layout

Hopefully someone have a solution for that.

Thanks in advance,
xyNNN

Upvotes: 4

Views: 1645

Answers (1)

Rise Ledger
Rise Ledger

Reputation: 969

With ui-router you can have multiple views on one page. So you will be able to do something like this:

$stateProvider
.state('main',{
  views: {
    'contentSite1': {
      templateUrl: 'site1.html',
      controller: function($scope){}
    },
    'contentSite2': {
      templateUrl: 'site2.html',
      controller: function($scope){}
    },
    'contentSite3': {
      templateUrl: 'site3.html',
      controller: function($scope){}
    },
  }
});

Here is the link with more explanation https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Upvotes: 1

Related Questions