angular.js - 如何解决angularjs由于网速慢显示了占位符的问题？

Question

相信大家写angularjs都会遇到这个问题，但是一般web都还不太明显，而写了wap页面的时候就会明显有个占位符会停顿在界面刚打开的时候，然后等js异步刷新后值又变了，体验感觉就不太好了。

我觉得这个应该会有个比较成熟的解决方案了，求教一下~！

Answer 1

@Brooooklyn Suite à cet indice, j'ai trouvé un très bon post sur stackoverflow avec une explication très claire

Answer 2

ng-bind ou ng-cloak, le responsable l'a dit à plusieurs reprises, utiliser CSS est la meilleure solution Parfait

.

http://www.cnblogs.com/whitewolf/p/3495822.html

https://docs.angularjs.org/api/ng/directive/ngCloak

[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
affichage : aucun !important;
>

Answer 3

Veuillez utiliser ng-bind

Answer 4

angularjs coopérera automatiquement avec $qProvider, qui est en fait la boucle $digest sous-jacente.

Option 1

Lorsque le rejet ou la résolution de la promesse de $q n'est pas exécuté, la tentative ne sera pas rendue, sans parler du problème de l'espace réservé principal. Dans le module routeur d'angularjs, vous pouvez utiliser cette fonction en définissant la résolution. angular-ui-router Utilisez la même méthode.

Option 2

N'utilisez pas d'espaces réservés {{ }}, utilisez la directive ng-bind. Mais cette solution n'est pas flexible.
Par exemple, en utilisant {{ }}, vous pouvez l'écrire comme ceci

html<p>{{ start_time }} ~ {{ end_time }}</p>

Mais c'est tout ce que vous pouvez faire après avoir utilisé la commande ng-bind.

<p>
    <span ng-bind="start_time"></span>
    ~
    <span ng-bind="start_time"></span>
</p>

De nombreuses balises vides inutiles apparaîtront. Peu propice à l'entretien. Et la page apparaîtra vierge.

Il est recommandé d'utiliser la première option. Mais le premier présente également un inconvénient : lorsque les données sont renvoyées lentement, la vue revient au tableau blanc, mais elle est toujours envoyée. Vous pouvez utiliser ng-animate et ajouter une animation de chargement lors du changement de page.

router.js angular-ui-router L'exemple de code du module est le suivant

javascript.state('admin.event', {
    url: '/events',
    views: {
        'MainBody': {
            // 重点在这里
            templateUrl: '.....',
            controller: 'dzadmin.controller.events.query', //这里需要制定控制器名称，视图里不要在再制定了。因为是有 路由器 负责告诉控制器合适开始执行，而不是试图来驱动。
            resolve: {
                events: ['eventService', '$q', function(eventService, $q){
                    var deferred = $q.defer();
                    eventService.query(.....).then(deferred.resolve, deferred.reject);
                    return deferred.promise;
                }]
            }
        }
    }
})

// dzadmin.controller.events.query

.controller('dzadmin.controller.events.query', ['$scope', 'events', function($scope, events){
    $scope.events = events;
}])

// Essayez le code
一定要注意，视图里面不能再重复指定控制器名称。否则会报错, il faudrait que le nom du contrôleur ait été spécifié dans la route.

<ul>
 <li ng-repeat="event in events">{{ event.name }}</li>
</ul>