Menu
I am new to angular, I want to know if angularjs supports nested routes like emberjs I mean routes like this: myappurl/#/company/:company_id/department/:department_id
656
The Routes in Angular also follows the component tree structure and allows us to define the nested or child routes. In the above example, the ProductComponent displays the list of Products. The ProductDetailsComponent is defined as the child of the ProductComponent displays the details of the selected Product.
A good example is how other components in an Angular app are mostly found inside the main app component. In the same way, the Angular Router allows you to have routes nested inside already-defined routes. With child routes, you can have a component-like structure defined for the routes in your app.
This will make angular to load both ListComponent and ViewComponent when you go to the route /list/:id, since ViewComponent is a child of ListComponent. Every route with children, needs to have the <router-outlet></router-outlet> tag.
The concept of having two sets of menu items. A top level between Home, Search and Artist and a second level under Artist between Tracks and Albums is called Nested Routing and it’s the topic of this lecture. We’ve added 3 more components to our sample project and included them in our NgModule declarations:
It worth mentioning there are another Angular libraries except ui-router to accomplish this task. This one works too:
http://angular-route-segment.com
It is much simpler to use than ui-router. Sample route configuration looks like this:
$routeSegmentProvider.
when('/section1', 's1.home').
when('/section1/prefs', 's1.prefs').
when('/section1/:id', 's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2', 's2').
segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl}).
within().
segment('home', {
templateUrl: 'templates/section1/home.html'}).
segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']}).
within().
segment('overview', {
templateUrl: 'templates/section1/item/overview.html'}).
segment('edit', {
templateUrl: 'templates/section1/item/edit.html'}).
up().
segment('prefs', {
templateUrl: 'templates/section1/prefs.html'}).
up().
segment('s2', {
templateUrl: 'templates/section2.html',
controller: MainCtrl});
According to the example given in the document: https://docs.angularjs.org/api/ngRoute/directive/ngView. Yes, Angularjs supports it.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
