使用resolve在Angularjs中显示加载动画

Question

我正在尝试（第一次）在我的页面加载时显示加载动画。现在，我的加载动画只是我的html中的黑盒子

<div id="loading" style="width: 500px; height: 500px; background-color: black;"></div>

我的模块配置看起来像这样

(function () {
    "use strict";
    angular.module("4PCApp")

    .config(function config($stateProvider) {
        $stateProvider
            .state('list', {
                url: '/list',
                controller: 'ListCtrl as vm',
                templateUrl: 'app/shared/list/list.html',
                resolve: {
                  app: function ($q) {
                    var defer = $q.defer();
                    $('#loading').show();
                    defer.resolve();
                    return defer.promise.then(function(){
                      $('#loading').hide();
                    })
                  }
                },
                data: {pageTitle: 'List'}
            })
    })

    .controller('ListCtrl',['$scope', '$state', '$log', 'ServerRequest', '$localStorage', '$sessionStorage', 'uiGridConstants', '$rootScope', '$interval', function ($scope, $state, $log, ServerRequest, $localStorage, $sessionStorage, uiGridConstants, $rootScope, $interval) {

我显然不了解解决方案的某些内容，如黑框所示，但不会消失。我做错了什么？