ui-router + growing-panes

managing layout with deep routes





Joe Hsu ( @jhsu )

ui-router




  • state based (child states using dot)
  • ui-sref instead of ng-href
  • state metadata
  • abstract states




https://github.com/angular-ui/ui-router

layout



    1. view a list of users
    2. view a single user
    3. create a new payment for the user
    4. show the newly created payment
    5. view additional information about the payment

Routes


 .state('users', {
    url: '/users',
  ...
  })
  .state('users.details', {
    url: '/:id',
...
  })
  .state('users.details.payment', {
    url: '/payment',
    ...
  })
  .state('users.details.payment_details', {
    url: '/payment/:payment_id',
    ...
  })
  .state('users.details.payment_details.from', { url: '/from' ... });



too much pane!

hiding parent ui-views

growing-panes


  • uses ng-show to show/hide panes
  • uses nested states and ui-views
  • uses state data to keep track of depth
  • uses directives: <growing-panes /> and <pane />






https://github.com/jhsu/growing-panes



Demo


Thanks!

deck

By jhsu

deck

angular ui-router and controlling layout with growing-panes

  • 1,155