<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-route@1.2.14" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular-route.js"></script>
<script src="app.js"></script>
<script src="slowCtrl.js"></script>
<script src="slowDataService.js"></script>
</head>
<body ng-app="route-change-loader">
<div class="container">
<div class="masthead">
<ul class="nav nav-tabs">
<li>
<a href="#/default">Default</a>
</li>
<li>
<a href="#/route1">Slow Loading Controller</a>
</li>
</ul>
</div>
<!-- Jumbotron -->
<div class="row">
<div class="col-lg-12" ng-view></div>
</div>
<!-- Site footer -->
<div class="footer">
<p>by <a href="http://www.technofattie.com">Techno Fattie</a>
</p>
</div>
</div>
</body>
</html>
(function(){
var app = angular.module('route-change-loader', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/route1', {
templateUrl:'route1.html',
controller:'slowCtrl',
controllerAs:'ctrl'
}).otherwise({
templateUrl:'default.html'
});
}]);
}());
<h1>Click on the tabs to change routes</h1>
<h1>{{ctrl.message}}</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Blog</th>
<th>Twitter</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='contact in ctrl.contacts'>
<td>{{contact.name}}</td>
<td>{{contact.blog}}</td>
<td>{{contact.twitter}}</td>
</tr>
</tbody>
</table>
(function(app){
var SlowDataService = function($timeout){
this.$timeout = $timeout;
};
SlowDataService.$inject = ['$timeout'];
angular.extend(SlowDataService.prototype, {
contacts:[{
name:'Todd Moto',
blog:'http://toddmotto.com/',
twitter:'@toddmotto'
},{
name:'Jeremy Likness',
blog:'http://csharperimage.jeremylikness.com/',
twitter:'@jeremylikness'
},{
name:'John Papa',
blog:'http://www.johnpapa.net/',
twitter:'@John_Papa'
},{
name:'Josh Carroll',
blog:'http://www.technofattie.com/',
twitter:'@jwcarroll'
}],
getContacts:function(){
var _this = this;
return this.$timeout(function(){
return angular.copy(_this.contacts);
}, 2000);
}
});
app.service('slowDataService', SlowDataService);
}(angular.module('route-change-loader')));
(function(app) {
var SlowCtrl = function(slowDataService) {
this.slowDataService = slowDataService;
this.init();
};
SlowCtrl.$inject = ['slowDataService'];
angular.extend(SlowCtrl.prototype, {
message:'Wait for it...',
contacts: [],
init: function() {
var _this = this;
this.slowDataService.getContacts()
.then(function(contacts) {
_this.contacts = contacts;
_this.message = "BAM!";
});
}
});
app.controller('slowCtrl', SlowCtrl);
}(angular.module('route-change-loader')));