1

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!

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
d3bug3r
  • 2,492
  • 3
  • 34
  • 74

1 Answers1

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

  1. remove wrong elements
  2. 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="angular.js@1.4.x" 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

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335