Skip to content

Commit 3ce3383

Browse files
christopherthielenchristopherthielen
committed
Test harness for angular-ui/ui-router#545 
0 parents  commit 3ce3383

15 files changed

+2613
-0
lines changed

‎app/app.js

+217
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
// Make sure to include the `ui.router` module as a dependency
2+
angular.module('uiRouterSample', [
3+
'uiRouterSample.contacts',
4+
'uiRouterSample.contacts.service',
5+
'uiRouterSample.utils.service',
6+
'ui.router',
7+
'ngAnimate'
8+
])
9+
10+
.run( ['$rootScope', '$state', '$stateParams', '$timeout', '$location',
11+
function ($rootScope, $state, $stateParams, $timeout, $location) {
12+
$rootScope.$state = $state;
13+
$rootScope.$stateParams = $stateParams;
14+
15+
var steps = [
16+
{ state: 'about', params: { } },
17+
{ state: 'contacts.list', params: { } },
18+
{ state: 'contacts.detail', params: { contactId: "1" } },
19+
{ state: 'contacts.detail', params: { contactId: "42" } },
20+
{ state: 'contacts.detail', params: { contactId: "123" } },
21+
{ state: 'contacts.detail', params: { contactId: "1" } },
22+
{ state: 'contacts.detail', params: { contactId: "42" } },
23+
{ state: 'contacts.detail', params: { contactId: "123" } },
24+
{ state: 'about', params: { } },
25+
{ state: 'contacts.list', params: { } },
26+
{ state: 'contacts.detail', params: { contactId: "1" } },
27+
{ state: 'contacts.list', params: { } },
28+
{ state: 'contacts.detail', params: { contactId: "42" } },
29+
{ state: 'contacts.list', params: { } },
30+
{ state: 'contacts.detail', params: { contactId: "123" } },
31+
{ state: 'contacts.detail.item', params: { contactId: "123", itemId: 'a' } },
32+
{ state: 'contacts.detail.item', params: { contactId: "123", itemId: 'b' } },
33+
{ state: 'contacts.detail.item', params: { contactId: "123", itemId: 'a' } },
34+
{ state: 'contacts.detail.item', params: { contactId: "123", itemId: 'b' } },
35+
{ state: 'contacts.detail.item.edit', params: { contactId: "123", itemId: 'b' } },
36+
{ state: 'contacts.detail.item', params: { contactId: "123", itemId: 'b' } },
37+
{ state: 'contacts.detail.item.edit', params: { contactId: "123", itemId: 'b' } },
38+
{ state: 'contacts.detail.item', params: { contactId: "123", itemId: 'b' } },
39+
{ state: 'contacts.detail.item.edit', params: { contactId: "123", itemId: 'b' } },
40+
];
41+
42+
$rootScope.totalTransitions = 0;
43+
$rootScope.running = false;
44+
45+
var idx = 0;
46+
var tick = function() {
47+
if (!$rootScope.running) return;
48+
idx = (idx + 1) % steps.length;
49+
const go = () =>
50+
$rootScope.running && $state.go(steps[idx].state, steps[idx].params)
51+
.then(() => $rootScope.totalTransitions++);
52+
53+
Promise.resolve($state.transition)
54+
.then(() => new Promise(resolve => setTimeout(resolve, 50)))
55+
.then(go)
56+
.then(tick);
57+
}
58+
59+
let scheduledStartTime;
60+
$rootScope.startStop = function() {
61+
if ($rootScope.running) {
62+
stop();
63+
} else {
64+
start();
65+
}
66+
}
67+
68+
function start() {
69+
scheduledStartTime = Date.now() + 2500;
70+
71+
const countdown = () => {
72+
$rootScope.countdown = Math.max(0, scheduledStartTime - Date.now());
73+
if ($rootScope.countdown === 0) {
74+
$rootScope.running = true;
75+
tick();
76+
} else {
77+
$timeout(countdown, 50);
78+
}
79+
}
80+
81+
$timeout(countdown, 50);
82+
}
83+
84+
function stop() {
85+
$rootScope.running = false;
86+
}
87+
88+
$rootScope.ngVersions = [
89+
// "1.2.0", "1.2.1", "1.2.2", "1.2.3", "1.2.4", "1.2.5", "1.2.6", "1.2.7", "1.2.8", "1.2.9", "1.2.10",
90+
// "1.2.11", "1.2.12", "1.2.13", "1.2.14", "1.2.15", "1.2.16", "1.2.17", "1.2.18", "1.2.19", "1.2.20",
91+
// "1.2.21", "1.2.22", "1.2.23",
92+
"1.2.27", "1.2.28", "1.2.29", "1.2.30", "1.2.31", "1.2.32",
93+
"1.3.0", "1.3.1", "1.3.2", "1.3.3", "1.3.4", "1.3.5", "1.3.6", "1.3.7", "1.3.8", "1.3.9", "1.3.10",
94+
"1.3.11", "1.3.12", "1.3.13", "1.3.14", "1.3.15", "1.3.16", "1.3.17", "1.3.18", "1.3.19", "1.3.20", "1.3.36",
95+
"1.4.0", "1.4.1", "1.4.2", "1.4.3", "1.4.4", "1.4.5", "1.4.6", "1.4.7", "1.4.8", "1.4.9", "1.4.10",
96+
"1.4.11", "1.4.12", "1.4.13", "1.4.14",
97+
"1.5.0", "1.5.1", "1.5.2", "1.5.3", "1.5.5", "1.5.6", "1.5.7", "1.5.8", "1.5.9", "1.5.10", "1.5.11",
98+
"1.6.0", "1.6.1",
99+
]
100+
101+
$rootScope.uirVersions = [
102+
'0.2.8', '0.2.10', '0.2.11', '0.2.13', '0.2.14', '0.2.15', '0.2.16', '0.2.17', '0.2.18',
103+
'0.3.0', '0.3.1', '0.3.2',
104+
'0.4.0', '0.4.1', '0.4.2',
105+
'1.0.0-alpha.1', '1.0.0-alpha.2', '1.0.0-alpha.3', '1.0.0-alpha.4', '1.0.0-alpha.5', '1.0.0-alpha0',
106+
'1.0.0-beta.1', '1.0.0-beta.2', '1.0.0-beta.3', '1.0.0-rc.1',
107+
]
108+
109+
$rootScope.ngVersion = localStorage.getItem('ngVersion');
110+
$rootScope.uirVersion = localStorage.getItem('uirVersion');
111+
112+
$rootScope.changeNgVersion = () => {
113+
let newVersion = $rootScope.ngVersion;
114+
localStorage.setItem('ngVersion', newVersion);
115+
setTimeout(() => document.location.reload(true), 100);
116+
}
117+
118+
$rootScope.changeUIRVersion = () => {
119+
let newVersion = $rootScope.uirVersion;
120+
localStorage.setItem('uirVersion', newVersion);
121+
setTimeout(() => document.location.reload(true), 100);
122+
}
123+
}
124+
]
125+
)
126+
127+
.config(
128+
[ '$stateProvider', '$urlRouterProvider',
129+
function ($stateProvider, $urlRouterProvider) {
130+
131+
/////////////////////////////
132+
// Redirects and Otherwise //
133+
/////////////////////////////
134+
135+
// Use $urlRouterProvider to configure any redirects (when) and invalid urls (otherwise).
136+
$urlRouterProvider
137+
138+
// The `when` method says if the url is ever the 1st param, then redirect to the 2nd param
139+
// Here we are just setting up some convenience urls.
140+
.when('/c?id', '/contacts/:id')
141+
.when('/user/:id', '/contacts/:id')
142+
143+
// If the url is ever invalid, e.g. '/asdf', then redirect to '/' aka the home state
144+
.otherwise('/');
145+
146+
147+
//////////////////////////
148+
// State Configurations //
149+
//////////////////////////
150+
151+
// Use $stateProvider to configure your states.
152+
$stateProvider
153+
154+
//////////
155+
// Home //
156+
//////////
157+
158+
.state("home", {
159+
160+
// Use a url of "/" to set a state as the "index".
161+
url: "/",
162+
163+
// Example of an inline template string. By default, templates
164+
// will populate the ui-view within the parent state's template.
165+
// For top level states, like this one, the parent template is
166+
// the index.html file. So this template will be inserted into the
167+
// ui-view within index.html.
168+
template: '<p class="lead">Welcome to the UI-Router Demo</p>' +
169+
'<p>Use the menu above to navigate. ' +
170+
'Pay attention to the <code>$state</code> and <code>$stateParams</code> values below.</p>' +
171+
'<p>Click these links—<a href="#/c?id=1">Alice</a> or ' +
172+
'<a href="#/user/42">Bob</a>—to see a url redirect in action.</p>'
173+
174+
})
175+
176+
///////////
177+
// About //
178+
///////////
179+
180+
.state('about', {
181+
url: '/about',
182+
183+
// Showing off how you could return a promise from templateProvider
184+
templateProvider: ['$timeout',
185+
function ( $timeout) {
186+
return $timeout(function () {
187+
return '<p class="lead">UI-Router Resources</p><ul>' +
188+
'<li><a href="https://github.com/angular-ui/ui-router/tree/gh-pages/sample">Source for this Sample</a></li>' +
189+
'<li><a href="https://github.com/angular-ui/ui-router">GitHub Main Page</a></li>' +
190+
'<li><a href="https://github.com/angular-ui/ui-router#quick-start">Quick Start</a></li>' +
191+
'<li><a href="https://github.com/angular-ui/ui-router/wiki">In-Depth Guide</a></li>' +
192+
'<li><a href="https://github.com/angular-ui/ui-router/wiki/Quick-Reference">API Reference</a></li>' +
193+
'</ul>';
194+
}, 100);
195+
}]
196+
})
197+
198+
.state('instructions', {
199+
url: '/leaktest-instructions',
200+
201+
// Showing off how you could return a promise from templateProvider
202+
templateProvider: ['$timeout',
203+
function ( $timeout) {
204+
return $timeout(function () {
205+
return '<p class="lead">UI-Router Resources</p><ul>' +
206+
'<li><a href="https://github.com/angular-ui/ui-router/tree/gh-pages/sample">Source for this Sample</a></li>' +
207+
'<li><a href="https://github.com/angular-ui/ui-router">GitHub Main Page</a></li>' +
208+
'<li><a href="https://github.com/angular-ui/ui-router#quick-start">Quick Start</a></li>' +
209+
'<li><a href="https://github.com/angular-ui/ui-router/wiki">In-Depth Guide</a></li>' +
210+
'<li><a href="https://github.com/angular-ui/ui-router/wiki/Quick-Reference">API Reference</a></li>' +
211+
'</ul>';
212+
}, 100);
213+
}]
214+
})
215+
}
216+
]
217+
);

‎app/contacts/contacts-service.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
angular.module('uiRouterSample.contacts.service', [
2+
3+
])
4+
5+
// A RESTful factory for retrieving contacts from 'contacts.json'
6+
.factory('contacts', ['$http', 'utils', function ($http, utils) {
7+
var path = 'assets/contacts.json';
8+
var contacts = $http.get(path).then(function (resp) {
9+
return resp.data.contacts;
10+
});
11+
12+
var factory = {};
13+
factory.all = function () {
14+
return contacts;
15+
};
16+
factory.get = function (id) {
17+
return contacts.then(function(){
18+
return utils.findById(contacts, id);
19+
})
20+
};
21+
return factory;
22+
}]);

‎app/contacts/contacts.detail.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div>
2+
<h2>{{contact.name}}</h2>
3+
<ul>
4+
<li ng-repeat="item in contact.items">
5+
6+
<!-- Here's another ui-sref except THIS time we are passing parameters
7+
AND inheriting parameters from active ancestor states. So we don't
8+
need to resupply the contactId parameter. -->
9+
<a ui-sref="contacts.detail.item({itemId:item.id})">{{item.type}}</a>
10+
</li>
11+
</ul>
12+
<div ui-view class="slide">
13+
<!-- Example of default content. This content will be replace as soon as
14+
this ui-view is populate with a template -->
15+
<small class="muted">Click on a contact item to view and/or edit it.</small>
16+
</div>
17+
</div>

‎app/contacts/contacts.detail.item.edit.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<hr>
2+
<h4>{{item.type}} <button class="btn" ng-click="done()">Done</button></h4>
3+
<div><input type="text" ng-model="item.value" /></div>

‎app/contacts/contacts.detail.item.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<hr>
2+
<h4>{{item.type}} <button class="btn" ng-click="edit()">Edit</button></h4>
3+
<div>{{item.value}}</div>

‎app/contacts/contacts.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="row">
2+
<div class="span3">
3+
<div class="pa-sidebar well well-small">
4+
<ul class="nav nav-list">
5+
<li ng-class="{ active: $state.includes('contacts.list') }"><a ui-sref="contacts.list">All Contacts</a></li>
6+
<li class="nav-header">Top Contacts</li>
7+
8+
<!-- This <li> will only add the 'active' class if 'contacts.detail' or its descendants are active
9+
AND if it is the link for the active contact (aka contactId) -->
10+
<li ng-repeat="contact in contacts | limitTo:2" ui-sref-active="active">
11+
12+
<!-- Here's a ui-sref that is also providing necessary parameters -->
13+
<a ui-sref="contacts.detail({contactId:contact.id})">{{contact.name}}</a>
14+
</li>
15+
</ul>
16+
<hr>
17+
<button class="btn" ng-click="goToRandom()">Show random contact</button>
18+
19+
<!-- Another named view -->
20+
<div ui-view="menuTip" class="slide"></div>
21+
</div>
22+
</div>
23+
24+
<!-- Our unnamed main ui-view for this template -->
25+
<div ui-view class="span9 slide"></div>
26+
</div>

0 commit comments

Comments
 (0)