angular-page-loader
Version:
quick app integration for your favourite loaders
147 lines (116 loc) • 4.92 kB
HTML
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJs Page Loader - codekraft studio</title>
<meta name="author" content="codekraft-studio">
<meta name="description" content="Expect us, we are coming, the new full qualified web developers duo.">
<meta name="Robots" content="ALL,INDEX">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta property="og:title" content="CodeKraft, cutting edge programming!" />
<meta property="og:description" content="Expect us, we are coming, the new full qualified web developers duo" />
<meta property="og:image" content="http://core.codekraft.it/www.codekraft.it/quadkode.jpg" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.codekraft.it/" />
<meta property="og:site_name" content="CodeKraft, cutting edge programming!" />
<link rel="stylesheet" href="../../style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="../../dist/angular-page-loader.css" media="screen" title="no title" charset="utf-8">
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none ;
}
</style>
</head>
<body ng-cloak>
<page-loader></page-loader>
<article role="main" ng-controller="MainCtrl" >
<header>
<div class="hcont">
<h1>angular-page-loader</h1>
<h2>quick integration for your favourite loaders</h2>
</div>
<a href="https://github.com/codekraft-studio/angular-page-loader"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
<nav class="routes-container">
<ul class="routes-list">
<li class="route" ng-repeat="route in routesList">
<a ui-sref="{{route.name}}" ng-bind="route.title"></a>
</li>
</ul>
</nav>
</header>
<section>
<div ui-view></div>
</section>
</article>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/angular-ui-router@0.3.1/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../../dist/angular-page-loader.min.js"></script>
<script>
angular.module('app', [
'ui.router',
'angular-page-loader'
]);
angular.module('app')
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home', {
title: 'Homepage',
url: '/home',
templateUrl: '../partials/main.html',
resolve: {
timing: function($timeout, $q) {
var defer = $q.defer();
$timeout(function() {
defer.resolve();
}, 3500);
return defer.promise;
}
}
})
.state('sample', {
title: 'No Wait Sample',
url: '/sample',
templateUrl: '../partials/sample.html'
})
.state('details', {
title: 'Details',
url: '/details',
controller: 'DetailsCtrl',
templateUrl: '../partials/details.html',
resolve: {
timing: function($timeout, $q) {
var defer = $q.defer();
$timeout(function() {
defer.resolve();
}, 2500);
return defer.promise;
}
}
})
})
.controller('MainCtrl', function($scope, $state) {
// remove states with empty name
$scope.routesList = ($state.get() || []).filter(function (a) {
return a.name;
});
})
.controller('DetailsCtrl', function($scope) {
$scope.myInput = {
name: 'Filippo',
surname: 'Conti'
}
// prevent location change if form is dirty and not submitted
$scope.$on('$stateChangeStart', function(e) {
if( !$scope.myForm.$pristine && !$scope.myForm.$submitted ) {
if( !confirm("If you exit your changes will be lost, are you sure?") ) {
e.preventDefault();
return;
}
}
})
})
</script>
</html>