Unable to load a view that doesn't exist in the sidemenu

[ghost]

Hi,

I have a module called courses which is loading ok. When loaded it shows list.html which is a list of the courses. Each course can then be edited by going to the courses.edit state but because this isn't loaded into the menu I can't do it.

I can see the URL changing to courses/edit/mycourseID but the content in the ui-view does not change.

Can you point me in the right direction to get around this?

(function () { 'use strict';

angular.module('BlurAdmin.pages.courses', []) .config(routeConfig);

/* @ngInject / function routeConfig($stateProvider, $urlRouterProvider) { $stateProvider

  .state('courses', {
      url: '/courses',
      title: 'Courses',
      templateUrl: 'app/pages/courses/list.html',
      controller: 'CoursesController',
      controllerAs: 'vm',
      sidebarMeta: {
        icon: 'fa fa-trophy',
        order: 120,
      },
    })
    .state('courses.edit', {
      url: '/edit/:ID',
      templateUrl: 'app/pages/courses/edit/edit.html',
      controller: 'CourseEditController',
      controllerAs: 'vm'
    });
  }

})();

[lugovsky]

@leighmillard We use ui-router for routing. I think you might not clearly understand how nested states work https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views The most important thing for you to know is that Child states will load their templates into their parent's ui-view.

I think you might need to name your states courses.list and courses.edit and have some abstract state courses for example

[ghost]

If I use an abstract state then this creates a menu option with a dropdown which isn't what I need.

There are basically 3 parts to the moduel, list.html edit.html create.html

list.html should always load when 'courses' menu option is clicked and then there is another button for 'create' and an 'edit' on each course listed.

I have tried several different router techniques without any luck.

[ghost]

I can do it by using the following code but the 'courses' menu option does not highlight in the sidemenu

  .state('courses', {
      url: '/courses',
      templateUrl: 'app/pages/courses/list.html',
      controller: 'CoursesController',
      controllerAs: 'vm',
      title: 'Courses',
      sidebarMeta: {
        icon: 'fa fa-trophy',
        order: 120,
      },
    })
    .state('coursesCreate', {
      url: '/courses/create',
      templateUrl: 'app/pages/courses/create/create.html',
      controller: 'CourseCreateController',
      controllerAs: 'vm',
    })
    .state('coursesEdit', {
      url: '/courses/edit/:ID',
      templateUrl: 'app/pages/courses/edit/edit.html',
      controller: 'CourseEditController',
      controllerAs: 'vm',
    });
  }

[smartapant]

@leighmillard there is a helpful doc that explains router + sidebar in our theme https://akveo.github.io/blur-admin/articles/051-sidebar/

[ghost]

@smartapant thanks for the link to the sidebar docs. I had already had a look through this and it doesn't seem to cover this scenario.

I'm at a bit of a loss what to do with this as I have the same scenario running in other applications where the sidemenu is manually coded but as this is run using a directive it needs to work in a particular way. I can create a standard menu option as well as dropdown options using abstract but if I create 'courses' as abstract it cannot be a standard menu item, any other method then loses the ability to have the active menu option highlighted.

The easiest way I can explain what it is I want to do is if the user was to click a 'view' button on the one of the dashboard widgets it would go to dashboard/view/1234 (1234 being the ID)

This would be a new view and not a nested view on the same page. The dashboard sidemenu option would stay highlighted

[vazh]

i dont think ui router can recognize coursesCreate & coursesEdit are in fact a child of courses route. since you dont specify its parent or using state name dot notation. since ui-router is in fact read state parent & child relationship using state name/parent.

have you tried making courses.create & courses.edit ? dont make courses into abstract. put your courses content inside <div ui-view></div>

or else, try using modal window.

[m-gora]

i'm having exactly the same problem. I have a main state 'jobs' and the substates 'new', 'edit', 'list'

If I go for

$stateProvider
                        .state('jobs', {
                                url : '/jobs',
                                templateUrl : 'app/pages/jobs/jobs.html',
                                title : 'Jobs',
                                sidebarMeta : {
                                        icon : 'ion-ios-clock-outline',
                                        order : 100
                                },
                        })
                        .state('jobs.list', {
                                url : '',
                                templateUrl : 'app/pages/jobs/jobs.list.html',
                                title : 'Jobs',
                        })

clicking the link in the sidebar does not load the jobs.list state automatically and the JS console is not throwing any errors. But if i make the parent abstract and click on the sidebar link the JS console throws errors, but typing /jobs in the address bar successfully loads the view with the embedded default state.

This looks like a problem with ui-router itself. using <a ui-sref="jobs"></a> to navigate to the page tries to directly to navigate to the abstract state, while <a href="#/jobs"></a> uses the $urlRouterProvider and therefore you can redirect from /jobs to /jobs/list.

$uiRouterProvider
                       .when('/jobs', '/jobs/list');
$stateProvider
                        .state('jobs', {
                                url : '/jobs',
                                templateUrl : 'app/pages/jobs/jobs.html',
                                title : 'Jobs',
                                sidebarMeta : {
                                        icon : 'ion-ios-clock-outline',
                                        order : 100
                                },
                        })
                        .state('jobs.list', {
                                url : '',
                                templateUrl : 'app/pages/jobs/jobs.list.html',
                                title : 'Jobs',
                        })

otherwise i have no idea what would make it possible to get nested views for a sidebar-single-link.

[vazh]

@blackanthrax so /jobs is abstract route ? what is the content of jobs.html ?

[m-gora]

@vazh <div ui-view></div> is sufficient to render it. currently i am looking into the sidebar directive if i can manage to get this link running, which will raise an error with my approach.

/jobs needs to be abstract, otherwise you can't render the sub-views.

$stateProvider
                        .state('jobs', {
                                abstract : true,
                                url : '/jobs',

[m-gora]

@vazh @leighmillard okay i have a workaround. This is not really clean, but my javascript experience is quite limited and this needs to be overlooked by someone with more experience.

What i've done now is creating an abstract page with subpages as i did above. Now i edited app/theme/components/baSidebar/baSidebar.service.js and replaced

stateRef: s.name,

with

stateRef: s.abstract === true ? meta.defaultSubview : s.name,

and provided the default subview in the module definition of my module

$stateProvider
                        .state('jobs', {
                                abstract : true,
                                url : '/jobs',
                                templateUrl : 'app/pages/jobs/jobs.html',
                                title : 'Jobs',
                                sidebarMeta : {
                                        icon : 'ion-ios-clock-outline',
                                        order : 100,
                                        defaultSubview  : 'jobs.list'
                                },

I hope this helps atleast a bit.