1

How does angularjs decide where to output the content?

I have 3 levels of content, but ng-view only does one major one.

Think i'm going about it the wrong way, I have 3 sections (one left nav, second middle nav), then the third is the content section.

Basically I want to click the left navigation button, then it loads something within the section nav, then you click something within that middle nav and it loads content in the content section on the right.

Could somebody please point me in the right direction :).

Cheers, Hayden

Haydzyo
  • 13
  • 4
  • It is based on the tag you are using with the routing and states. You have to share your code to figure out where is the issue. – Ahmer Khan Jun 16 '17 at 06:27

1 Answers1

0

You can achieve that either using routing or by using states. In the following example, I am using `states'

Example

So here when you click on 'Route1' that page will load and when you click on 'Show List' related list will show.

The main logic is in this code:

$stateProvider
.state('route1', {
  url: "/route1",
  templateUrl: "route1.html"
})
.state('route1.list', {
  url: "/list",
  templateUrl: "route1.list.html",
  controller: function($scope) {
    $scope.items = ["A", "List", "Of", "Items"];
  }
})
.state('route2', {
  url: "/route2",
  templateUrl: "route2.html"
})
.state('route2.list', {
  url: "/list",
  templateUrl: "route2.list.html",
  controller: function($scope) {
    $scope.things = ["A", "Set", "Of", "Things"];
  }
})

So I have two states in my home page, one is 'route1' and other is 'route2' and these two states have specific content along with another nested state and it's specific view called as 'list', so I am using two ui-view to load the specific content in a container, one in 'index.html' and the other one is in 'route1.html' or 'route2.html'

This concept is called as Nested States & Nested Views and you can read more about it here.

Aayushi Jain
  • 2,609
  • 2
  • 25
  • 32
  • Hey, this is pretty much what I'm after. Do you happen to have an example for using ngRoute instead of ui-router? From what I understand ngRoute is the newer version :)? This is what my code is based off -> http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview – Haydzyo Jun 17 '17 at 01:03
  • Unfortunately `ngRoute` doesn't have the concept of nested views but there is one another module that can help you in that, read about it here: http://angular-route-segment.com/ – Aayushi Jain Jun 17 '17 at 14:45
  • Also one more thing, `ui-router` is latest not `ngRoute` and it's better, basically its ngRouter with more features, read the differences here: https://stackoverflow.com/questions/21023763/what-is-the-difference-between-angular-route-and-angular-ui-router – Aayushi Jain Jun 17 '17 at 14:47