angular.js - 如何解決angularjs由於網速慢顯示了佔位符的問題？

Question

相信大家寫angularjs都會遇到這個問題，但是一般web都還不太明顯，而寫了wap頁面的時候就會明顯有個佔位符會停頓在界面剛打開的時候，然後等js異步刷新後數值又變了，體驗感覺就不太好了。

我覺得這個應該會有個比較成熟的解決方案了，求教一下~！

Answer 1

@Broooooklyn 順著這個hint，在stackoverflow找到一個很不錯的帖子，解釋很清楚

Answer 2

ng-bind 或ng-cloak, 官方都說了多少遍了, 用css解決是最好的 完美

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

請使用ng-bind

Answer 4

angularjs 是會自動配合 $qProvider 的，其實就是底層的 $digest 迴圈。

方案一

當 $q 的 promise 的 reject 或者 resolve 沒有執行的時候，試圖就不會渲染，就更不會初選佔位符的問題。 angularjs 的 router 模組，中可以透過定義 resolve 來使用這個功能。 angular-ui-router 使用同理。

方案二

不要使用 {{ }} 佔位符，使用 ng-bind 指令。但是這種方案不靈活。
例如，用 {{ }} 寫法可以這樣

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

但是使用 ng-bind 指令後就只能這樣了。

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

會出現一大堆沒用的空標籤。不利於維修。而且頁面會出現空白。

推薦使用第一種方案。但第一種也有一個缺點，就是當資料回傳比較慢的時候，視圖回白板，不過還是有發給發的。在頁面切換的時候可以使用 ng-animate 加上 loading 動畫就好了。

router.js router.js angular-ui-router 模組範例程式碼如下

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

// 試圖代碼
一定要注意，视图里面不能再重复指定控制器名称。否则会报错，應為路由中已經指定了控制器名稱。

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