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

Question

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

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

Answer 1

@Broooooklyn Following this hint, I found a very good post on stackoverflow with a very clear explanation

Answer 2

ng-bind or ng-cloak, the official has said it many times, using css to solve it is the best and perfect

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 {
display: none !important;
}

Answer 3

Please use ng-bind

Answer 4

angularjs will automatically cooperate with $qProvider, which is actually the underlying $digest loop.

Option 1

When the reject or resolve of $q's promise is not executed, the attempt will not be rendered, let alone the problem of primary placeholder. In the router module of angularjs, you can use this function by defining resolve. angular-ui-routerUse the same principle.

Option 2

Don’t use {{ }} placeholders, use the ng-bind directive. But this solution is not flexible.
For example, using {{ }}, you can write it like this

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

But that’s all you can do after using the ng-bind command.

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

A lot of useless empty tags will appear. Not conducive to maintenance. And the page will appear blank.

It is recommended to use the first option. But the first one also has a shortcoming, that is, when the data is returned slowly, the view returns to the whiteboard, but it is still sent. You can use ng-animate and add loading animation when switching pages.

router.js router.js angular-ui-router The module sample code is as follows

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;
}])

// Try the code
一定要注意，视图里面不能再重复指定控制器名称。否则会报错, it should be that the controller name has been specified in the route.

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