Q:

Nest URIs but not controllers or views in AngularUI Router

Using AngularUI Router I want to nest some URIs but not their views or controller actions.
For example, I would like these URIs:

/things - lists the recent things.
/things/:x - shows the details of thing with id x.

If I use the "Nested States & Views" from the wiki then I have to actually nest the "list of things" and "show single thing" views, which happen to be unrelated.  Moreover, the "show single thing" scope will have the "list of things" even though it will not need them.
If I use the "Nested States & Views" from the README then I've got a separate /things/list URI instead of plain old /things like I want.
It seems like I want a separate "list" (or "index") state that resolves to the base URL for an otherwise nested state but without passing on the view and actions to child states.  Is this possible?

A:

Rather than using nested routes, I recommend specifically declaring the url; however, you could also use an absolute route - '^/things/:x'.
Using the routes you provided in your question, here is an example of how you could possibly go about it.
DEMO (with code): http://plnkr.co/edit/sxOeCBipiQS7AOt4Ax4L?p=preview
DEMO (without code, shows route urls): http://run.plnkr.co/uT4PLYDqk8ItzqaK/#/things
First, setup the app:
var app = angular.module('myApp', [
    'ui.router'
]);

Next, configure the app with the various states.  You can use angular-ui-router's $stateParams service to expose any parameters in the url, which can be handy if you need to fetch any data from a resource/service:
  app.config(function($stateProvider, $urlRouterProvider) {

  // for any unknown routes, default to the '/things' url
  $urlRouterProvider.otherwise('/things')

  $stateProvider
    .state('things', {
      url: '/things',
      templateUrl: 'things.html',
      controller: function($scope, $state) {
        // add items to the scope
        $scope.items = ['Thing 1', 'Thing 2', 'Thing 3'];

        // create an action that will change the state
        $scope.goToDetails = function(scope) {
          $state.go('details', {
            x: scope.item
          })
        }
      }
    })
  // create the details state
  .state('details', {
    url: '^/things/:x',
    templateUrl: 'details.html',
    controller: function($scope, $stateParams) {
      // use $stateParams service
      $scope.data = 'I am ' + $stateParams.x
    }
  });
});

Hopefully this helps and please let me know if you have any questions!

