Javascript 等待，然后加载页面[AngularJS]

我有一个问题，当页面加载在页面上显示纯文本angularjs变量在几秒钟，直到angular编译。。。有没有办法在编译前显示loader或空白

这是我的html：

<li ng-repeat="x in notys" class="item js-item">
                <a href="/project/<% x.project_id %>"  class="notification-link">
                    <div class="details">
                        <!--SERVER SIDE-->
                        <span ng-if="x.type == 'AnswerProject'" class="title">New answer added <i>"<% x.subject %>"</i> for <b><% x.body %></b> group, click to check your project.</span>
                        <span ng-if="x.type == 'QuestionProject'" class="title">New question/s added for <b> <% x.subject %> </b> group, check your project <b> <% x.body %> </b></span>

                        <span ng-if="x.type == 'GroupProject'" class="title">New group created: <b> <% x.subject %> </b>. New project assigned to you <b> <% x.body %> </b></span>
                        <span ng-if="x.type == 'GroupProjectUpdate'" class="title">Group <b> <% x.subject %> </b> updated, for <b> <% x.body %> </b> project.</span>

                        <span ng-if="x.type == 'NewComment'" class="title">User <b> <% x.subject %> </b> commented: <b> <% x.body %> </b> in some of your projects. Click to check.</span>

                        <!--CLIENT SIDE-->
                        <span ng-if="x.type == 'NewCommentClient'" class="title">User <b> <% x.name %> </b> commented: <b> <% x.text %> </b> in some of your projects. Click to check.</span>

                        <span ng-if="x.type == 'GroupProjectClient'" class="title">New group created: <b> <% x.name %> </b>. New project assigned to you <b> <% x.project_name %> </b></span>
                        <span ng-if="x.type == 'GroupProjectUpdateClient'" class="title">Group <b> <% x.name %> </b> updated, for <b> <% x.project_name %> </b> project.</span>

                        <span ng-if="x.type == 'AnswerProjectClient'" class="title">New answer added <i>"<% x.answer %>"</i> for <b><% x.groupName %></b> group, click to check your project.</span>
                        <span ng-if="x.type == 'QuestionProjectClient'" class="title">New question/s added for <b> <% x.gName %> </b> group, check your project <b> <% x.name %> </b></span>

                        <p><time-ago from-time="<% x.created_at %>"></time-ago></p>
                    </div>
                </a>
            </li>

这实际上取决于您的特定用例，但一种简单的方法将遵循如下模式：

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // TODO: handle the error somehow
  }).finally(function() {
    // called no matter success or failure
    $scope.loading = false;
  });
});
And then react to it in your template:

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

.controller（'MainCtrl'，函数（$scope，myService）{
$scope.loading=true；
myService.get（）.then（函数（响应）{
$scope.items=response.data；
}，功能（回应）{
//TODO:以某种方式处理错误
}).最后（函数（）{
//无论成功或失败都被召唤
$scope.loading=false；
});
});
然后在模板中对其作出反应：
这实际上取决于您的特定用例，但一种简单的方法将遵循如下模式：

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // TODO: handle the error somehow
  }).finally(function() {
    // called no matter success or failure
    $scope.loading = false;
  });
});
And then react to it in your template:

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

.controller（'MainCtrl'，函数（$scope，myService）{
$scope.loading=true；
myService.get（）.then（函数（响应）{
$scope.items=response.data；
}，功能（回应）{
//TODO:以某种方式处理错误
}).最后（函数（）{
//无论成功或失败都被召唤
$scope.loading=false；
});
});
然后在模板中对其作出反应：
AngularJS实际上有一个防止未编译内容显示的指令：ng-Clope


可以在DOM中的div/元素上应用，以防止在编译之前显示它下面的每个元素

<div ng-cloak>
</div>

AngularJS实际上有一个指令来防止未编译的内容被显示：ng斗篷


可以在DOM中的div/元素上应用，以防止在编译之前显示它下面的每个元素

<div ng-cloak>
</div>

您的问题是，在加载页面资源时，文本是可见的。我建议使用css将html标记设置为display:none，然后使用angular的手动引导选项，这样您只能在引导后显示html标记。以下是一个例子：

    // to turn off automatic bootstrapping, remove the ng-app tag from the html

    var app = angular.module('someapp', []),
        htmlNode = document.getElementsByTagName('html')[0];

    // wait for the document to be ready - similar to jquery
    angular.element(document).ready(function(){

        // manually bootstrap the element
        angular.bootstrap(angular.element(), ['gts-frontEnd']);

        // show the html element again
        htmlNode.style.display = 'block';
    });

这是一个问题，您的问题是在加载页面资源时文本是可见的。我建议使用css将html标记设置为display:none，然后使用angular的手动引导选项，这样您只能在引导后显示html标记。以下是一个例子：

    // to turn off automatic bootstrapping, remove the ng-app tag from the html

    var app = angular.module('someapp', []),
        htmlNode = document.getElementsByTagName('html')[0];

    // wait for the document to be ready - similar to jquery
    angular.element(document).ready(function(){

        // manually bootstrap the element
        angular.bootstrap(angular.element(), ['gts-frontEnd']);

        // show the html element again
        htmlNode.style.display = 'block';
    });

以下是在这种情况下可以实现loader或spinner的
。在这种情况下可以实现loader或spinner。这也是一个很好的答案，迄今为止最简单。无论如何，我更喜欢手动引导应用程序，这样我可以更好地控制它何时启动。这也是一个很好的答案，迄今为止最简单。无论如何，我更喜欢手动引导应用程序，这样我可以更好地控制它何时启动。