<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="http://code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body class="container">
<ng-view></ng-view>
</body>
</html>
myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(["$routeProvider", function($routeProvider) {
var universalResolves = {
"spells": function() {
return [
{ word: "xyzzy", response: "Nothing happens." },
{ word: "open sesame", response: "The door opens!" }
];
}
};
var customRouteProvider = angular.extend({}, $routeProvider, {
when: function(path, route) {
route.resolve = (route.resolve) ? route.resolve : {};
angular.extend(route.resolve, universalResolves);
$routeProvider.when(path, route);
return this;
}
});
customRouteProvider
.when('/home', {
controller: "HomeCtrl",
templateUrl: "_home.html",
resolve: {
"user": function() {
return { name: "Player 1" };
}
}
})
.when('/cast/:spell', {
controller: "CastCtrl",
templateUrl: "_cast.html"
})
.otherwise({
redirectTo: '/home'
});
}]);
myApp = angular.module("myApp");
myApp.controller("CastCtrl", function($scope, $routeParams, spells) {
$scope.spell = spells[$routeParams.spell];
});
myApp.controller("HomeCtrl", function($scope, user, spells) {
$scope.user = user;
$scope.spells = spells;
});
<div class="row">
<h1>Welcome, {{user.name}}!</h1>
<p>In front of you you see a closed door. What do you do?</p>
<ul>
<div class="row" ng-repeat="spell in spells">
> <a ng-href="#/cast/{{$index}}"> say "{{spell.word}}"</a>
</div>
</ul>
</div>
<h1>> say "{{spell.word}}"</h1>
<p>{{spell.response}}</p>
<a href="#/home">Try something else.</a>