<html>
  <head>
    <script src="//npmcdn.com/angular@latest/angular.js"></script>
    <script src="//npmcdn.com/angular-ui-router@1.0.0-alpha.4/release/angular-ui-router.js"></script>
    
    <!--  Hello solarsystem Code -->
    <script src="hellosolarsystem.js"></script>
    <script src="services/people.js"></script>
    <script src="components/hello.js"></script>
    <script src="components/about.js"></script>
    <script src="components/people.js"></script>
    <script src="components/person.js"></script>
    
    <!-- Visualizer and url -->
    <link rel="stylesheet" href="styles.css">
    <script src="//npmcdn.com/show-current-browser-url"></script>
    <script src="//npmcdn.com/d3@3"></script>
    <script src="//npmcdn.com/ui-router-visualizer@1"></script>
  </head>
  
  <body ng-app="hellosolarsystem">
    <div><button onClick="document.location.reload(true)">reload plunker (without changing the url)</button></div>
    
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>
    <a ui-sref="people" ui-sref-active="active">People</a>
    
    
    <ui-view></ui-view>
    
    <uir-state-vis class="statevis" width="300" height="100"></uir-state-vis>
  </body> 
</html>
var myApp = angular.module('hellosolarsystem', ['ui.router', 'ui.router.visualizer']);

myApp.config(function($stateProvider) {
  // An array of state definitions
  var states = [
    { 
      name: 'hello', 
      url: '/hello', 
      // Using component: instead of template:
      component: 'hello'  
    },
    
    { 
      name: 'about', 
      url: '/about', 
      component: 'about'
    },
    
    { 
      name: 'people', 
      url: '/people', 
      component: 'people',
      // This state defines a 'people' resolve
      // It delegates to the PeopleService to HTTP fetch (async)
      // The people component receives this via its `bindings: `
      resolve: {
        people: function(PeopleService) {
          return PeopleService.getAllPeople();
        }
      }
    },
    
    { 
      name: 'person', 
      // This state takes a URL parameter called personId
      url: '/people/{personId}', 
      component: 'person',
      // This state defines a 'person' resolve
      // It delegates to the PeopleService, passing the personId parameter
      resolve: {
        person: function(PeopleService, $transition$) {
          return PeopleService.getPerson($transition$.params().personId);
        }
      }
    }
  ]
  
  // Loop over the state definitions and register them
  states.forEach(function(state) {
    $stateProvider.state(state);
  });
});

// To account for plunker embeds timing out, preload the async data
myApp.run(function($http) {
  $http.get('data/people.json', { cache: true });
});
The angular-ui-router "Hello Solar System" app
angular.module('hellosolarsystem').component('hello', {
  template:  '<h3>{{$ctrl.greeting}} solar sytem!</h3>' +
             '<button ng-click="$ctrl.toggleGreeting()">toggle greeting</button>',
             
  controller: function() {
    this.greeting = 'hello';
    
    this.toggleGreeting = function() {
      this.greeting = (this.greeting == 'hello') ? 'whats up' : 'hello'
    }
  }
})
angular.module('hellosolarsystem').component('about', {
  template:  '<h3>Its the UI-Router<br>Hello Solar System app!</h3>'
})
angular.module('hellosolarsystem').component('people', {
  bindings: { people: '<' },
  
  template: '<h3>Some people:</h3>' +
            '<ul>' +
            '  <li ng-repeat="person in $ctrl.people">' +
            '    <a ui-sref="person({ personId: person.id })">' +
            '      {{person.name}}' +
            '    </a>' +
            '  </li>' +
            '</ul>'
})
[
  {
    "id": "293",
    "isActive": false,
    "eyeColor": "brown",
    "name": "Ingrid Townsend",
    "company": "JASPER",
    "email": "ingridtownsend@jasper.com",
    "address": "690 Charles Place, Santel, Northern Mariana Islands, 3791"
  },
  {
    "id": "581",
    "isActive": true,
    "eyeColor": "blue",
    "name": "Estrada Nolan",
    "company": "FIBRODYNE",
    "email": "estradanolan@fibrodyne.com",
    "address": "317 Seeley Street, Cade, Maryland, 3976"
  },
  {
    "id": "29",
    "isActive": true,
    "eyeColor": "brown",
    "name": "Laverne Andrews",
    "company": "INTRAWEAR",
    "email": "laverneandrews@intrawear.com",
    "address": "760 Provost Street, Valle, Alaska, 4628"
  },
  {
    "id": "856",
    "isActive": false,
    "eyeColor": "green",
    "name": "Hull Woodward",
    "company": "SENMAO",
    "email": "hullwoodward@senmao.com",
    "address": "452 Union Avenue, Hachita, Palau, 9166"
  },
  {
    "id": "2321",
    "isActive": false,
    "eyeColor": "green",
    "name": "Maria Stanley",
    "company": "EYERIS",
    "email": "mariastanley@eyeris.com",
    "address": "350 Remsen Avenue, Abrams, Ohio, 6355"
  }
]
angular.module('hellosolarsystem').service('PeopleService', function($http) {
  var service = {
    getAllPeople: function() {
      return $http.get('data/people.json', { cache: true }).then(function(resp) {
        return resp.data;
      });
    },
    
    getPerson: function(id) {
      function personMatchesParam(person) {
        return person.id === id;
      }
      
      return service.getAllPeople().then(function (people) {
        return people.find(personMatchesParam)
      });
    }
  }
  
  return service;
})
angular.module('hellosolarsystem').component('person', {
  bindings: { person: '<' },
  template: '<h3>A person!</h3>' +
  
            '<div>Name: {{$ctrl.person.name}}</div>' +
            '<div>Id: {{$ctrl.person.id}}</div>' +
            '<div>Company: {{$ctrl.person.company}}</div>' +
            '<div>Email: {{$ctrl.person.email}}</div>' +
            '<div>Address: {{$ctrl.person.address}}</div>' +
            
            '<button ui-sref="people">Close</button>'
});
.active { color: red; font-weight: bold }
.statevis {
  position: fixed;
  right: 2em;
  top: 2em;
  z-index: -1;
}