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

Question

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

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

Answer 1

@Brooooklyn Mengikuti petunjuk ini, saya menjumpai siaran yang sangat bagus pada stackoverflow dengan penjelasan yang sangat jelas

Answer 2

ng-bind atau ng-cloak, pegawai dah cakap banyak kali, guna css adalah penyelesaian terbaik

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

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

[ng:jubah], [ng-jubah], [data-ng-jubah], [x-ng-jubah], .ng-jubah, .x-ng-jubah {
paparan: tiada !penting;
}

Answer 3

Sila gunakan ng-bind

Answer 4

angularjs secara automatik akan bekerjasama dengan $qProvider, yang sebenarnya merupakan gelung $digest yang mendasari.

Pilihan 1

Apabila penolakan atau penyelesaian janji $q tidak dilaksanakan, percubaan tidak akan dilakukan, apatah lagi masalah pemegang tempat utama. Dalam modul penghala angularjs, anda boleh menggunakan fungsi ini dengan menentukan penyelesaian. angular-ui-router Gunakan kaedah yang sama.

Pilihan 2

Jangan gunakan ruang letak {{ }}, gunakan arahan ng-bind. Tetapi penyelesaian ini tidak fleksibel.
Contohnya, menggunakan {{ }}, anda boleh menulisnya seperti ini

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

Tetapi itu sahaja yang boleh anda lakukan selepas menggunakan perintah ng-bind.

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

Banyak tag kosong yang tidak berguna akan muncul. Tidak kondusif untuk penyelenggaraan. Dan halaman akan kelihatan kosong.

Adalah disyorkan untuk menggunakan pilihan pertama. Tetapi yang pertama juga mempunyai kekurangan, iaitu, apabila data dikembalikan perlahan, pandangan kembali ke papan putih, tetapi ia masih dihantar. Anda boleh menggunakan ng-animate dan menambah animasi pemuatan apabila menukar halaman.

router.js angular-ui-router Kod sampel modul adalah seperti berikut

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

// Cuba kod
一定要注意，视图里面不能再重复指定控制器名称。否则会报错, sepatutnya nama pengawal telah ditentukan dalam laluan.

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