<html>
<head>
<script src="//npmcdn.com/angular@1.6.5/angular.js"></script>
<script src="//npmcdn.com/@uirouter/angularjs@1.0.5/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/@uirouter/visualizer@4.0.2"></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>
</body>
</html>
var myApp = angular.module('hellosolarsystem', ['ui.router']);
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 });
});
// Show state tree
myApp.run(function($uiRouter) {
var StateTree = window['ui-router-visualizer'].StateTree;
var el = StateTree.create($uiRouter, null, { height: 100, width: 300 });
el.className = 'statevis';
});
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;
height: 5em;
}