ui-router angular master detail view

Question

I'm trying to get the userlist [master] and user details[detail] on the same page.

https://plnkr.co/edit/EKY2pztGkKXUuQIyefUY?p=preview

module and configuration.

var myModule = angular.module("myApp", ['ui.router']);  

myModule.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('user', {
      url : '/users',
      templateUrl:'users.html',
      controller : 'usersController'
  })
  .state('user.details', {
      url : '/:id',
      templateUrl:'users.html',
      controller : 'usersControllerDetail'
  });

  $urlRouterProvider.otherwise("/users");

});


myModule.controller('usersController' ,  function($scope){
  $scope.users = [{username : 'manish', id : 1}, { username : 'kaustubh', id :2} ]
});

myModule.controller('usersControllerDetail' ,  function($scope, $stateParams){
  console.log($stateParams.id);
});

when ever I click on the user in the master list , master list is rendered twice on scree.

can you please let me know where I'm going wrong

score 0 · Accepted Answer · answered Oct 31 '16 at 07:27

0

There is adjusted and working plunker

Just use different template for a child

.state('user.details', {
      url : '/:id',
      //templateUrl:'users.html',
      templateUrl:'details.html',
      controller : 'usersControllerDetail'
});

this could be the template

<div>

 <div ui-view>
  <h3>current state name: <var>{{$state.current.name}}</var></h3>


  <h5>params</h5>
  <pre>{{$stateParams | json}}</pre>
  <h5>state</h5>
  <pre>{{$state.current | json}}</pre>

 </div>
</div>

answered Oct 31 '16 at 07:27

Radim Köhler

122,561
47
239
335

I can do that, but for now I want to do it in single page.. see this http://embed.plnkr.co/DBSbiV/App.js , but not sure how to do this with ui-router – Manish Oct 31 '16 at 07:29
single page.. is not a single view (templateUrl). UI-Router is there not for making reuse of templates (while that is possible as well) but for splitting stuff into states with their own (unique) views/templates. So, what I showed you is THE WAY. Other words... reuse of templates will REUSE the templates. and what you see in parent you will see twice, if a child will come. – Radim Köhler Oct 31 '16 at 07:33
Please, also check this: http://stackoverflow.com/q/28800644/1679310 to see the essence of views, named views and absolute name usage.. that is the essence of the UI-Router, good luck sir ;) – Radim Köhler Oct 31 '16 at 07:36
1

Thanks again. good luck sir [when recruiter says that... they never call me back..lol] – Manish Oct 31 '16 at 07:42

ui-router angular master detail view

1 Answers1