<html>
<head>
<script src="//unpkg.com/angular@1.5/angular.js"></script>
<script src="//unpkg.com/@uirouter/angularjs@1.0.5/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/@uirouter/visualizer@4.0.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) {
var Visualizer = window['ui-router-visualizer'].Visualizer;
$uiRouter.plugin(Visualizer);
$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";
}
}
}