Angular nested router-ui

Question

In angular how can I create a route for nested view as follow:

/#/app/dashboard
/#/app/product/
/#/app/product/new

my current route is:

$stateProvider
    .state('app',{
        url: '/app',
        templateUrl: 'views/app.html',
        resolve: loadSequence('modernizr','moment'),
        abstract: true
    })
    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: 'views/dashboard.html',
        title: 'Dashboard',
        ncyBreadcrumb: {
            label: 'Dashboard'
    }
    }).state('app.product', {
        url: '/product',
        templateUrl: "views/product.html",
        title: 'Buttons',
        resolve: loadSequence('ngTable', 'ngTableCtrl')

    }).state('app.product.new', {
        parent: 'app.product',
        url: '/new',
        templateUrl: "views/add_product.html",
        title: 'Buttons',
        resolve: loadSequence('ngTable', 'ngTableCtrl')
    })

This issues is, viewing /#/app/product/new render back the /#/app/product. Where the problem is? How does nested view works for angular?

Thanks!

Community · Accepted Answer · 2017-05-23 12:22:24Z

1

The concept as you presented that above, is working. I created sample working plunker to show that this kind of state flow is working:

$stateProvider
    .state('app',{
        url: '/app', 
        templateUrl: 'views/app.html',
        abstract: true
    })
    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: 'views/dashboard.html'
    }).state('app.product', {
        url: '/product',
        templateUrl: "views/product.html",
    }).state('app.product.new', {
        parent: 'app.product',
        url: '/new',
        templateUrl: "views/add_product.html",
    })

These links work and do navigate as expected:

<a href="#/app/dashboard">
<a href="#/app/product">
<a href="#/app/product/new">

The only way, how I made this link

<a href="#/app/product/new/">

to navigate to its parent (as stated in the question), is by 1) having the default rdirection like this:

$urlRouterProvider.otherwise('/app/product');

And as example above shows - by using wrong link

// check the trailing /
<a href="#/app/product/new/">
// this will work
<a href="#/app/product/new">

Summary, the concept is ok. There is no built in reason to navigate from #/app/product/new to #/app/product

Check it here

EXTEND

As provided - this is the broken plunker. Which I fixed here

The first adjustment was the index.html - cleanup

remove wrong elements
and use NOT MIN angular to see the issue

index.html:

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <!--script>document.write('<base href="' + document.location + '" />');</script-->
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js" data-semver="1.4.6"></script>
    <script data-require="ui-router@*" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
    <!--<script>-->
    <script src="app.js"></script> 
  </head>

And then, the real issue was wrong reference name 'ui-router' - it should be 'ui.router'

app.js

// wrong
var app = angular.module('plunker', ['ui-router'])
// working
var app = angular.module('plunker', ['ui.router'])

(Based on the comments) - there is another important featue - target <div ui-view>. This was added into parent state 'app.product'.

Reason is - each state (including any child or grand child) must be injected somewhere. And by default it is its parent. So parent 'app.product' should contain the ui-view target - for its child 'app.product.new'.

There are other techniques - called named views and absolute naming which could be in detail observed here:

Working version is here

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Sep 26, 2015 at 12:34

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

8 Comments

d3bug3r Over a year ago

Thanks, but it still rendering app/product page.

Radim Köhler Over a year ago

Well, could you tak my plunker, ajdust it to get that issue? If you want, I am ready to assist...

d3bug3r Over a year ago

Hi, the {{$state.current.name}} works correctly, but i had no idea why /product/new displaying /product page. Saw your plunker and I made changes exactly as yours, but the problem still persist

Radim Köhler Over a year ago

I took your version, fixed all the issue, extended answer, appended link to working plunker and described some details about that all... hope it helps

d3bug3r Over a year ago

Thanks, looking into it

|

Collectives™ on Stack Overflow

Angular nested router-ui

1 Answer 1

EXTEND

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EXTEND

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related