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

Question

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

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

Answer 1

@Broooooklyn 이 힌트에 따라 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 {
디스플레이: 없음 !중요;
}

Answer 3

ng-bind를 사용해주세요

Answer 4

angularjs는 실제로 기본 $digest 루프인 $qProvider와 자동으로 협력합니다.

옵션 1

$q 약속의 거부 또는 해결이 실행되지 않으면 기본 자리 표시자 문제는 물론이고 시도도 렌더링되지 않습니다. Anglejs의 라우터 모듈에서는 Resolve를 정의하여 이 기능을 사용할 수 있습니다. angular-ui-router도 같은 방식으로 사용됩니다. 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 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;
}])

// 试图代码
一定要注意，视图里面不能再重复指定控制器名称。否则会报错

옵션 2🎜 🎜{{ }} 자리 표시자를 사용하지 말고 ng-bind 지시문을 사용하세요. 하지만 이 솔루션은 유연하지 않습니다.
예를 들어 {{ }}를 사용하면 이렇게 쓸 수 있습니다🎜 으아아아 🎜하지만 ng-bind 지시어를 사용한 후에는 이것이 전부입니다. 🎜 으아아아 🎜쓸모없는 빈 태그가 많이 나타날 것입니다. 유지관리에 도움이 되지 않습니다. 그러면 페이지가 공백으로 나타납니다. 🎜 🎜첫 번째 옵션을 사용하는 것이 좋습니다. 하지만 첫 번째에도 단점이 있습니다. 즉, 데이터가 느리게 반환되면 뷰가 화이트보드로 돌아가지만 여전히 전송된다는 것입니다. 페이지 전환 시 ng-animate를 사용하고 로딩 애니메이션을 추가할 수 있습니다. 🎜 🎜router.js angular-ui-router 모듈의 샘플 코드는 다음과 같습니다🎜 으아아아 🎜// 코드 보기
컨트롤러 이름은 뷰에서 반복해서 지정할 수 없다는 점에 유의하세요. 그렇지 않으면 오류가 보고됩니다. 이는 컨트롤러 이름이 경로에 지정되었기 때문입니다. 🎜 으아아아