angular-ui-routerng-admin

Create Nested Views in ng-admin


Hope I can explain this clearly. First, I'm using ng-admin and I know how to create a custom view per this:

I'm trying to figure out how to create nested views within the same custom page. Specifically, I have a view that needs to have 3 columns on the page - each with their functionality (and services).

Example:

In the image below, I have 3 views.

  1. The first column will call a custom service to get a list of collections (aka entities in ng-admin speak) and allow a user to select a collection
  2. The middle column will show a list of the items in the selected collection/entity and allow a user to select one item
  3. The final column will be for editing the selected item

The url to access this page should be myapp.com/ng-admin/#collections/collections/collection/1 (1 being the id of the item to view/edit)

The nested view for ng-admin

My Code:

//collections state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections', {
    abstract: true,
    parent: 'ng-admin',
    url: '/collections/',
    controller: collectionsCtrl,

    templateUrl: '/app/collectionsView.html'
});

//collection state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections.collection', {

    parent: 'ng-admin',
    url: '/collections/collection/:ID',
    controller: collectionCtrl,
    templateUrl: '/app/collectionView.html'
});
... ommiting first two controllers

Then in the collection item controller, I have:

myApp.controller('ItemViewCtrl', ['$scope', 'Events', '$stateParams', '$sce', function($scope, Events, $stateParams, $sce) {

$stateParams.ID && Collection.find($stateParams.ID).then(function(item) {
    $scope.item = item;

});
  $scope.view = function(id) {
            $state.go('days.day', {
                'ID': id
            })
        };



 }]);

My collectionsView.html

<div ng-include src="'/app/tpl/collectionView.html'" include-replace>
</div>
<div class="inner-content full-height" ui-view></div>

In my collectionView.html

   <ul>
        <li ng-repeat="collections as collection" >
            <a ui-sref="collections.collection.id">
               Link to collection
            </a>
        </li>
     <ul>

My Current Problem:

I can get collections/collection to show both views but it won't show the first column.

If I go to just collections/ I can see the first the column only (but only if I remove abstract:true from $stateParam router options.)

What am missing?


Solution

  • Solved:

    This helped me realize that I didn't need the parent property or first part of the url since they're both inherited from parent when I 'statecollections.collection' as part of the $stateProvider.

    //collection state
    myApp.config(function ($stateProvider) {
    $stateProvider.state('collections.collection', {
    
       // parent: 'ng-admin', <-REMOVED
       url: '/collections/collection/:ID', // Didn't need the /collections part of the url
      controller: collectionCtrl,
       templateUrl: '/app/collectionView.html'
    });