Matoy Matoy - 1 year ago 83
AngularJS Question

add loading page before angular loads my single page app

so I have a single page app in angular and it takes some time until all elements are being loaded.

I want to show to user a loading message untill angular will be finished bootstraping (plus angular show an ugly skelton of all the elements and pictures for a split second before it is loaded and I want to save that from the user...).

how can I do that? I preffer to do that in angular js (since my code is written in angular) and not in JQuery.


<!DOCTYPE html>

<script data-require="angular.js@1.4.x" src="" data-semver="1.4.9">
<script src=""></script>
<script src=""></script>
<script src="/"></script>
<script src="small-talkz.model.js"></script>
<script src="components/chat/chatController.js"></script>
<script src="components/login/loginController.js"></script>


<div ng-app="smallTalkzModel" ng-view>



var smallTalkzModel = angular.module('smallTalkzModel', ['ngRoute']);
smallTalkzModel.config(function($routeProvider) {
.when('/', {
templateUrl : 'components/login/loginView.html',
controller : 'loginController'
.when('/chat', {
templateUrl : 'components/chat/chatView.html',
controller : 'chatController'

smallTalkzModel.factory('sessionInfo', function() {
var savedInfo = {}
var set=function (info) {
savedInfo = info;
function get() {
return savedInfo;

return {
set: set,
get: get


Answer Source

Typically what I do in my Angular apps is I'll create some sort of loading variable. I will set this loading variable to 'true' whenever a new controller is initialized, for example, and I will set it to 'false' when everything has been retrieved / bootstrapped. Using this variable, I can show and hide whatever I want. For example:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.loading = true;
  $ = '';

  $scope.init = function () {
        .then(function (data) {
            $ = data;
            $scope.loading = false;

  $scope.loadData = function () {
    return promiseData;


Then in my view I can hide and show anything based on that variable value.

    <div class="loading-spinner" ng-show="loading"></div>
    <div class="my-content" ng-hide="loading"></div>

You can also set this variable to 'true' if you are loading something else in the future and you can show the loading spinner again if you wish.

I hope this helps and gives you some sort of starting point into showing loading screens, etc. Please let me know if you have any questions.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download