<html>
  <head>
    <script src="//unpkg.com/angular@1.5/angular.js"></script>
    <script src="//unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js"></script>
    
    <!--  Hello Galaxy Code -->
    <script src="hello.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="//unpkg.com/show-current-browser-url"></script>
    <script src="//unpkg.com/d3@3"></script>
    <script src="//unpkg.com/ui-router-visualizer@2"></script>
  </head>
  
  <body ng-app="hello" ng-class="{'debug-sref': debug.uisref, 'debug-view': debug.uiview}">
    <div>
      <button onClick="document.location.reload(true)">reload plunker</button>
      <button ng-click="debug.uiview = !debug.uiview">{{ debug.uiview ? "disable" : "enable"}} ui-view debug</button>
      <button ng-click="debug.uisref = !debug.uisref">{{ debug.uisref ? "disable" : "enable"}} ui-sref debug</button>
    </div>
    <div class="nav">
      <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>
    </div>
    
    
    <ui-view></ui-view>
  </body> 
</html>
var myApp = angular.module('hello', ['ui.router']);

myApp.config(function($stateProvider) {
  // An array of state definitions
  var states = [
    { name: 'hello', url: '/hello', component: 'hello' },
    { name: 'about', url: '/about', component: 'about' },
    
    { 
      name: 'people', 
      url: '/people', 
      component: 'people',
      resolve: {
        people: function(PeopleService) {
          return PeopleService.getAllPeople();
        }
      }
    },
    
    { 
      name: 'people.person', 
      url: '/{personId}', 
      component: 'person',
      resolve: {
        person: function(people, $stateParams) {
          return people.find(function(person) { 
            return person.id === $stateParams.personId;
          });
        }
      }
    }
  ]
  
  // Loop over the state definitions and register them
  states.forEach(function(state) {
    $stateProvider.state(state);
  });
});


myApp.run(function($http, $uiRouter) {
  window['ui-router-visualizer'].visualizer($uiRouter);
  $http.get('data/people.json', { cache: true });
});
The angular-ui-router "Hello Galaxy" app
angular.module('hello').component('hello', {
  template:  '<h3>{{$ctrl.greeting}} galaxy!</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('hello').component('about', {
  template:  '<h3>Its the UI-Router "Hello Galaxy" app!</h3>'
})
angular.module('hello').component('people', {
  bindings: { people: '<' },
  
  template: '<div class="flex-h">' + 
            '  <div class="people">' +
            '    <h3>Some people:</h3>' +
            '    <ul>' +
            '      <li ng-repeat="person in $ctrl.people">' +
            '        <a ui-sref-active="active" ui-sref="people.person({ personId: person.id })">' +
            '          {{person.name}}' +
            '        </a>' +
            '      </li>' +
            '    </ul>' + 
            '  </div>' +
            '  <ui-view></ui-view>' +
            '</div>'
});
[
  {
    "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('hello').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('hello').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>'
});
body {
  font-family: Arial, helvetica, sans-serif;
}

.active { color: red; font-weight: bold; }

.flex-h {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

.people {
  width: 30%;
  ul {
    list-style: none;
    padding: 0.1em 0;
  }
}

.nav {
  border-bottom: 1px solid #FEFEFE;
  margin-top: 1em;
  
  a {
    background-color: #EEE;
    text-decoration: none;
    color: #444;
    padding: 0.1em 1em;
    border: 1px solid darkgrey;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    
    &.active {
      color: black;
      background-color: #ccc;
      font-weight: normal;
    }
  }
}

body.debug-sref {
  [ui-sref]:after {
    content: ' ui-sref="' attr(ui-sref) '"';
    font-family: monospace;
  }
  
  [ui-sref] {
    padding: 0 0.25em;
  }
}

body.debug-view {
  ui-view {
    padding: 0 1em 1em 1em;
    display: block;
    border: 5px solid darkgrey;
    ui-view {
      margin: 1em;
    }
    
    &:before {
      content: "<ui-view>";
      display: block;
      width: 100%;
      font-size: 1em;
      font-weight: bold;
      text-align: center;
      background-color: darkgrey;
      margin: 0 -1em;
      padding: 0 1em;
    }
      
    &:empty:after {
      display: block;
      width: 100%;
      text-align: center;
      content: "No view is loaded into this ui-view";
    }
  }
}