AngularJS Directive… preloader experiment

I’m still a newbie to AngularJS development, however I have to admit that I’m having a lot of fun thinking of new directives and exploring increasingly better ways to implement them, mostly inspired by the lively and vital AngularJS community.

I’m posting one of my most recent experiments which was to have a very simple way to add preloading functionality to an AngularJS application… and this i what I came up with.

Please note that this is purely experimental and the reason for me posting it is to allow others to start thinking of their own directives as well as learn something in the process..

Now… one of my objectives was that I wanted to be able to point to an external file for the preloader content, however the preloader content should also be able to contain AngularJS itself.

This lead me to the use of the AngularJS-native “include” directive and the “$compile” service.

The actual implementation of the loading was out of scope for this small experiment, so I decided to fake it with a simple timer using the relatively new “$timeout” service, which recently replaced the “$defer” service as a way of postponing function calls.

Furthermore, since basically every application I build contains some level of DOM manipulation, I have no problem with having jQuery as a pre-requisite, so the implementation is using jQuery for the DOM manipulation, however it would be trivial to remove or replace this requirement.

AngularJS Community Member, Glen Maddern, has been so kind to post my experiment as a executing sample in the form of a Gist on GitHub:
http://2886724.run-a-gist.herokuapp.com/

The contents of the splash.html is very crude for this example, however it could be any HTML content…

<h1 ng-click="clickHandler(event)" ng-controller="PreloaderController">
	Loading, please wait...still loading {{percentCompleted}}%
</h1>

As you can see in the the snippet above, the preloader HTML is driven by a PreloaderController… and it has a clickHandler for demo purposes to shurtcut the preloading…

function PreloaderController( $scope, $timeout ) {

	$scope.percentCompleted = 0;

	$scope.applicationProgressMock = function() {

		if( $scope.percentCompleted == 100 ) {
			$scope.$emit( "applicationComplete" );
		}
		else
		{
			$scope.percentCompleted += 5;
			$timeout( $scope.applicationProgressMock, 100 );
		}
	}
	$timeout( $scope.applicationProgressMock, 100 );

	$scope.clickHandler = function( event ) {
		$scope.percentCompleted = 100;
	}
}

The directive itself is fairly simple and straightforward JavaScript…

PreloaderFactory = function( $compile ) {

	var directive = {

		restrict : "A",

		link : function( scope, elm, attrs ) {

			scope.preloader = jQuery( "<ng-include />" );
			scope.preloader.attr( "src", "'"+ attrs.preloader +".html'" );

			$compile( scope.preloader )( scope );

			jQuery( "body" ).append( scope.preloader );

			scope.$on( "applicationComplete", function( event ) {

				jQuery( scope.preloader ).remove();
			});
		}
	}
	return directive;
}

Now, my main HTML looks like this, pretty advanced app…

<html ng-app="application" preloader="splash">
  <head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>Preloader Experiment</title>
    
    <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="preloader-0.0.1.js"></script>
    
    <script>
    
    	angular.module( "application", [] )
    	
    	.directive( "preloader", PreloaderFactory );
    	
    </script>
    
  </head>
  <body>
  
  </body>
</html>

That’s it, a faily simple and crude implementation of a preloader tag… comments are much appreciated, however please note that this was purely intended as an inspiration and not a cookbook recipe…

In any case I decided to put it on GitHub… I sincerely hope to be able to get much more samples up there and that they will increase in quality…
https://github.com/pmoelgaard/labs/tree/master/angular/preloader-directive

About these ads
Tagged ,

2 thoughts on “AngularJS Directive… preloader experiment

  1. Igor Minar says:

    Instead of using $compile and ngInclude, use $http an $templateCache.

    angular.forEach(attrs.preloader.split(‘,’), (function(templateName) {
    var templateUrl = templateName + ‘.html’;
    $http.get(templateUrl).success(function(template) {
    $templateCache.put(templateUrl, template);
    }
    });

  2. Igor Minar says:

    I guess, you should trim templateUrl before sending it to $http.get

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 522 other followers

%d bloggers like this: