loading spinner example - AngularJS demo

by Musale Martin

HTML

<h2>loading spinner example - AngularJS demo</h2>

<ul>
	<li ng-repeat="feed in feedList" repeat-done="layoutDone()" ng-cloak>
		<a href="{{feed}}" title="view at {{feed | hostName}}" data-toggle="tooltip">{{feed | strip_http}}</a>
	</li>
</ul>


<div id="veil" ng-show="isLoading"></div>
<div id="feedLoading" ng-show="isLoading">Loading...</div>


<link rel="stylesheet" href="http://www.wingo.com/bootstrap/css/bootstrap.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://www.wingo.com/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

CSS

#veil {
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width:100%;
	cursor: not-allowed;
	filter: alpha(opacity=60);
	opacity: 0.6;
	background: #000000 url(http://www.wingo.com/angular/AngularShieldLogo.png) no-repeat center;
}
#feedLoading {
	position: absolute;
	top:200px;
	width:100%;
	text-align: center;
	font-size: 4em;
	color:white;
	text-shadow: 2px 2px 2px #021124;
}

JavaScript

'use strict';

angular.module('Loading_Demo', [])

	.service('rssFeedList', function($q, $rootScope, $timeout) {
		this.get = function(url) {
			var d = $q.defer();
			$timeout(function(result) { // simulate AJAX call
				var result = { // override result for demo
					feedList: [
						'http://feeds.feedburner.com/TEDTalks_video',
						'http://feeds.nationalgeographic.com/ng/photography/photo-of-the-day/',
						'http://sfbay.craigslist.org/eng/index.rss',
						'http://www.slate.com/blogs/trending.fulltext.all.10.rss',
						'http://feeds.current.com/homepage/en_US.rss',
						'http://feeds.current.com/items/popular.rss',
						'http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml'
					]
				};
				$rootScope.$apply(d.resolve(result));
			}, 2000);
			return d.promise;
		}
	})

	.directive('repeatDone', function() {
		return function(scope, element, attrs) {
			if (scope.$last) { // all are rendered
				scope.$eval(attrs.repeatDone);
			}
		}
	})

	.filter('strip_http', function() {
		return function(str) {
			var http = "http://";
			return (str.indexOf(http) == 0) ? str.substr(http.length) : str;
		}
	})

	.filter('hostName', function() {
		return function(url) {
			var urlParser = document.createElement('a');
			urlParser.href = url;
			return urlParser.hostname;
		}
	})

	.controller('AppCtrl', function($scope, $timeout, rssFeedList) {

		$scope.setLoading = function(loading) {
			$scope.isLoading = loading;
		}

		$scope.layoutDone = function() {
			$scope.setLoading(false);
			$timeout(function() { $('a[data-toggle="tooltip"]').tooltip(); }, 0); // wait...
		}

		$scope.loadFeed = function(url) {
			$scope.setLoading(true);
			rssFeedList.get(url).then(function(result) {
				if (result.error) {
					alert("ERROR " + result.error.code + ": " + result.error.message + "\nurl: " + url);
					$scope.setLoading(false);
				}
				else {
					$scope.feedList = result.feedList;
					if ($scope.feedList.length == 0)...