CODEWITHSUNDEEP
angularjsangular-routingangular-new-router
Alain
Alain

Reputation: 971

Angular new router - Nested components and routing

I'm playing around with the new angular router and wanted to try out a use case where I have a component and a nested component.

Below there's the JavaScript code I wrote to define the two components and the routes:

angular.module('app', ['ngNewRouter'])
  .controller('AppController', function ($router) {

  $router.config([
    {
      path: '/parent',
      component: 'parent'
    }
  ]);

})
.controller('ParentController', function ($router) {

  this.name = 'Parent component';
  $router.config([
    {
      path: '/child',
      component: 'child'
    }
  ]);

})
.controller('ChildController', function () {

  this.name = 'Child component';

})
.config(function ($componentLoaderProvider) {

  $componentLoaderProvider.setTemplateMapping(function (compName) {
    return compName + '.html';
  });  

});

And the HTML part:

<!-- index.html -->
<body ng-controller="AppController as app">
    <a ng-link="parent">Go to parent</a>
    <div ng-viewport></div>
</body>

<!-- parent.html -->
{{ parent.name }}<br/>
<a ng-link="child">Show child</a>
<div ng-viewport></div>

<!-- child.html -->
{{ child.name }}

Here's a Plunker containing the code above: http://plnkr.co/edit/yWCFgXQI491EYvIldjyR

Based on this code I have the following questions/issues:

  1. If I go to the lowest level (#/parent/child) and then hit refresh, the parent and child components are not shown anymore. The route is not restored even though the URL still is the same. Do I need to renavigate or do something to restore the page's state? This is a very basic feature to be able to bookmark URLs.
  2. If I go to the lowest level (#/parent/child) and then click on the Go to parent link, the URL is correctly set to #/parent but the child component is still visible.

Upvotes: 17

Views: 3292

Answers (4)

simme
simme

Reputation: 1554

The first thing that strike me, is that you're not using any identifier that points to the parent and child that you want to display.

How/where do you get this information? Your url would look a lot nicer (and maybe even solve the issue if it were written as 

/parent/:parentId/

or 

/parent/:parentId/child/:childId

I've mostly used routeProvider and routeParameters myself, and they provide this functionality without any hassle but as this exercise seems to be purely academic, i'd try to read through what the module is actually doing as well as checking whether there is a related issue among the github issues.

Further, this page from the documentation seem to shed some light on the issue.

If this is not at all helping you, would you consider helping us out by giving us some more information?

Good luck!

Upvotes: 1

Alex Petrescu
Alex Petrescu

Reputation: 181

You can also try using UI Router.

You can also have a look at this if you want to use nested routes.

Upvotes: 1

laxmikant yadav
laxmikant yadav

Reputation: 39

**Using new way we can do perform routing this .**


(function () {
  'use strict';

  angular
    .module('app', ['parent', 'home', 'ngNewRouter'])
    .controller('AppController', function ($router) {
      this.header = 'TITLE';
      $router.config([
        {
          path: '/', component: 'home'
        },
        {
          path: '/parent', component: 'parent'
        }
      ]);
    });
})();
**I hope this will work .**

Upvotes: 1

laxmikant yadav
laxmikant yadav

Reputation: 39

This is Old Way #

 var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "parent.htm"
    })
    .when("/other", {
        templateUrl : "Default.htm"
    });
});

Upvotes: 1

Related Questions