AngularJS - animation callback / sequence - angularjs

Question

I'm just finding my way with Angular, and more importantly trying to find my way without jQuery!
I'd like to have a view that shows a loading spinner while data is fetched from the server, and when it arrives (the model will have a property of "Populated") I want the spinner to fade out, and the content to fade in.
I'm using a directive for the loading bit, and ng-show seems simple enough to switch the sections in the view.
View:
<div ng-hide="model.Populated" loading-spinner></div>
<div ng-show="model.Populated"><!-- Content goes here --> </div>
Directive:
module App.Directives {
declare var Spinner: any;
export class LoadingSpinner {
constructor() {
var directive: ng.IDirective = {};
directive.restrict = 'A';
directive.scope = { loading: '=myLoadingSpinner'},
directive.template = '<div class="loading-spinner-container"></div>';
directive.link = function (scope, element, attrs) {
var spinner = new Spinner().spin();
var loadingContainer = element.find('.loading-spinner-container')[0];
loadingContainer.appendChild(spinner.el);
};
return directive;
}
}
It's the animation I'm not sure about. In particular, I want the content to fade in once the spinner has completely faded out, and I'm not sure how to do this with a callback.
Should I attempt all the animation with CSS or expand on my directive and use javascript?
(I'm using TypeScript for anyone wondering about the syntax)

Answer 1

I did a quick spike for my app yesterday and this is how it can be easily done.
This uses ui.bootstrap modal dialog.
When you have a long running process such as remote service call you "raise" an event via $emit. This will bubble up to your outer most scope. Here is a sample from typeahead search functionality I spiked it against.
function autoCompleteClientName(searchValue, searchType) {
var self = this;
self.$emit("WorkStarted", "Loading Clients...");
//return promise;
if (searchType === 'name') {
return $scope.clientSearchDataService.getClientsByName(searchValue)
.then(function (response) {
self.$emit("WorkCompleted", "");
return response.results;
}, function(error) {
self.$emit("WorkCompleted", "");
console.warn("Error: " + error);
});
} else if (searchType === 'number') {
return $scope.clientSearchDataService.getClientsByNumber(searchValue)
.then(function (response) {
self.$emit("WorkCompleted", "");;
return response.results;
}, function (error) {
self.$emit("WorkCompleted", "");
console.warn("Error: " + error);
});
}
};
Then we have a "shell" controller that is the controller for outermost view, the one that hosts ng-view.
(function () {
'use strict';
// Controller name is handy for logging
var controllerId = 'shellCtrl';
// Define the controller on the module.
// Inject the dependencies.
// Point to the controller definition function.
angular.module('app').controller(controllerId,
['$scope', '$modal', shellCtrl]);
function shellCtrl($scope,$modal) {
// Bindable properties and functions are placed on vm.
$scope.title = 'shellCtrl';
$scope.$on("WorkStarted", function(event, message) {
$scope.modalInstance = $modal.open({ templateUrl: "app/common/busyModal/busyModal.html" });
});
$scope.$on("WorkCompleted", function (event, message) {
$scope.modalInstance.close();
});
}
})();
Here is the modal template
<div class="modal-dialog">
<div class="modal-content">
<img src="/images/loading.gif"width="55" height="55"/>
<h3>Loading data...</h3>
</div>
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->
For this to appear you have to override some styles
<style>
.modal
{
display: block;
}
.modal-body:before,
.modal-body:after
{
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after
{
display: table;
content: " ";
}
</style>
and if you need full template for modal
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Keep in mind that this is just a spike that took me about 30 min to wire together. For more robust solution, you need to be able to keep track of number of processes started and completed etc, if you are executing multiple calls to remove service.