var app = angular.module("app", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: "app.html",
controller: "ViewCtrl",
resolve: {
loadData: viewCtrl.loadData
}
})
});
app.controller("AppCtrl", function ($rootScope) {
//event on route, depends on root scope
$rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
console.log(event);
console.log(current);
console.log(previous);
console.log(rejection);
})
});
var viewCtrl = app.controller("ViewCtrl", function ($scope, $route) {
console.log($route);
$scope.model = {
message: "I'm a great app!"
}
});
viewCtrl.loadData = function ($q, $timeout) {
var defer = $q.defer();
$timeout(function () {
defer.reject("Your network is down");
}, 500);
return defer.promise;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Egghead Videos</title>
<link rel="stylesheet" href="./foundation.min.css">
<script type="text/javascript" src="./angular.min.js"></script>
<script type="text/javascript" src="./angular-route.min.js"></script>
<script type="text/javascript" src="./app.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="AppCtrl">
<ng-view></ng-view>
</div>
</body>
</html>