AngularJS UI-Router navigate to a child URL

Question

Trying to link to a child URL using Angular UI-Router (very new to this)

I have:-

app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
  $urlRouterProvider.otherwise("/products")

  $stateProvider
    .state('products', {
        url: "/products",
        templateUrl: "products.html",
    })
    .state('products.edit', {
        url: "/:id",
        templateUrl: "products.edit.html",
        controller: function ($scope, $stateParams) {
          $scope.id = $stateParams.id;
          console.log($stateParams.id)
        }
    })    
    .state('customers', {
        url: "/customers",
        templateUrl: "customers.html",
    });     
    //$locationProvider.html5Mode(true);         
});

I can navigate to products and customers, but not the products.edit state.

Here is a PLUNKER

Buu · Accepted Answer · 2013-09-17 23:51:05Z

2

Because products.edit is the child state of products, the view of the former is to be embedded into the view of the latter. So in products.html, you need to include a <ui-view> where ui-router will place the child view. Like this:

<div>
 <h4>Products Page</h4>
 <ui-view></ui-view>
</div>

See this updated plunker.

answered Sep 17, 2013 at 23:51

Buu

50.5k6 gold badges72 silver badges85 bronze badges

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

1 Comment

stukennedy Over a year ago

aaah ... perfect! Makes sense now.

Collectives™ on Stack Overflow

AngularJS UI-Router navigate to a child URL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related