Angularjs 加载我的ng视图之前的空白预加载程序_Angularjs_Ng View

Angularjs 加载我的ng视图之前的空白预加载程序

angularjs

Angularjs 加载我的ng视图之前的空白预加载程序,angularjs,ng-view,Angularjs,Ng View,我知道有很多关于这方面的问题，但其中很多都是旧的（有些在新的Angular版本中不再适用），还有一些与我试图实现的目标无关基本上，我有一个不确定的观点： <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 bg-body"> <div ng-view></div> </main> HTML: 最好的方法是什么？执行此操作并用模板替

我知道有很多关于这方面的问题，但其中很多都是旧的（有些在新的Angular版本中不再适用），还有一些与我试图实现的目标无关

基本上，我有一个不确定的观点：

<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 bg-body">
   <div ng-view></div>                       
</main>

HTML:

最好的方法是什么？

执行此操作并用模板替换

/home

路由，如果

/home

模板中的

必须是您的主页，则不要删除ng
index.html
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script data-require="angular-router@1.4.0-beta.3" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.2.16/angular-route.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <main ng-controller="mainCtrl">
      <loading ng-if="showSpin"></loading>
      <div ng-view="" ng-if="!showSpin"></div>
      <!--<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>-->
    </main>
  </body>

</html>



script.js
//代码在这里
angular.module('app', ['ngRoute'])
    .controller('mainCtrl', function($rootScope,$scope, $timeout) {
        $rootScope.showSpin = true;

    $rootScope.$on('$routeChangeStart', function(event, toState, toParams, fromState, fromParams){
      $timeout(function(){$rootScope.showSpin = true;
      $scope.showSpin = true;}, 5000); // Just addedto show loader, you can remove the `$timeout`
    });
    $rootScope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){
      $timeout(function(){$rootScope.showSpin = false;
      $scope.showSpin = false;}, 5000); // Just addedto show loader, you can remove the `$timeout`
    });
})
.directive('loading', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>',
        link: function(scope, element, attr) {
            scope.$watch('showSpin', function(newVal) {
                if (newVal)
                    $(element).show();
                else
                    $(element).hide();
            });
        }
    }
})
.config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            url: '/home',
            template: '<div>Hello world!</div>',
            controller: function($scope) {
            }
        })
        .when('/example', {
            url: '/example',
            template: '<div>Hello Example!</div>',
            controller: function($scope) {
            }
        })
        .otherwise({ redirectTo: '/example' })
})

angular.module（'app'，['ngRoute']））
.controller（'mainCtrl'，函数（$rootScope，$scope，$timeout）{
$rootScope.showSpin=true；
$rootScope.$on（“$routeChangeStart”，函数（事件、toState、toParams、fromState、fromParams）{
$timeout（函数（）{$rootScope.showSpin=true；
$scope.showSpin=true；}，5000）；//刚刚添加到show loader中，您可以删除`$timeout`
});
$rootScope.$on（“$routeChangeSuccess”，函数（事件、toState、toParams、fromState、fromParams）{
$timeout（function（）{$rootScope.showSpin=false；
$scope.showSpin=false；}，5000）；//刚刚添加到show loader中，您可以删除`$timeout`
});
})
.directive（'加载'，函数（））{
返回{
限制：'E'，
替换：正确，
模板：“”，
链接：功能（范围、元素、属性）{
范围：$watch（'showSpin'，函数（newVal）{
if（newVal）
$（元素）.show（）；
其他的
$（元素）.hide（）；
});
}
}
})
.config（函数（$routeProvider）{
$routeProvider
.when（“/home”{
url:“/home”，
模板：“你好，世界！”，
控制器：功能（$scope）{
}
})
.when（“/example”{
url:“/示例”，
模板：“你好，示例！”，
控制器：功能（$scope）{
}
})
。否则（{重定向到：'/example'}）
})

更新的答案
我已经更新了答案。请查收
工作哪里出了问题？实际发生了什么？你是否得到了装载机？嗯，不知道为什么这不起作用（我是不是忘记了什么？）。。。这是我的网站：你能制作一个plunker吗？@GoingSolo，它是否显示旋转器？请制作一个只有旋转器和路线（状态）的plunker。我可以将你链接到js脚本吗？我想我没有解释我自己，那只是一个测试，我不想在内容顶部显示旋转器，我想显示一个空白的白色页面，里面有一个微调器，而内容正在加载是的，我正在这样做哦，谢谢，对不起，我的英语不好，虽然我没有解释我自己。这是一个脚本，很难在plunker中复制这个问题
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script data-require="angular-router@1.4.0-beta.3" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.2.16/angular-route.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <main ng-controller="mainCtrl">
      <loading ng-if="showSpin"></loading>
      <div ng-view="" ng-if="!showSpin"></div>
      <!--<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>-->
    </main>
  </body>

</html>

angular.module('app', ['ngRoute'])
    .controller('mainCtrl', function($rootScope,$scope, $timeout) {
        $rootScope.showSpin = true;

    $rootScope.$on('$routeChangeStart', function(event, toState, toParams, fromState, fromParams){
      $timeout(function(){$rootScope.showSpin = true;
      $scope.showSpin = true;}, 5000); // Just addedto show loader, you can remove the `$timeout`
    });
    $rootScope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){
      $timeout(function(){$rootScope.showSpin = false;
      $scope.showSpin = false;}, 5000); // Just addedto show loader, you can remove the `$timeout`
    });
})
.directive('loading', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>',
        link: function(scope, element, attr) {
            scope.$watch('showSpin', function(newVal) {
                if (newVal)
                    $(element).show();
                else
                    $(element).hide();
            });
        }
    }
})
.config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            url: '/home',
            template: '<div>Hello world!</div>',
            controller: function($scope) {
            }
        })
        .when('/example', {
            url: '/example',
            template: '<div>Hello Example!</div>',
            controller: function($scope) {
            }
        })
        .otherwise({ redirectTo: '/example' })
})