使用 Angular 样式加载 CSS

Loading CSS with Angular Stylings

本文关键字：CSS 加载 样式 Angular 使用      更新时间：2023-09-26

我的页面加载并应用在其包含 css 链接之一中定义的 CSS。我还有一个角度控制器，它调用一些服务来获取一些数据。此数据还将根据其返回的数据类型应用 css 样式（通过角度）。

问题在于，由于服务必须等待一秒钟左右的数据才能操作页面上的样式，因此会出现延迟应用于页面样式的外观。

页面加载应用CSS...等待数据从服务调用返回，然后应用更多样式。

有没有办法在应用页面上的任何样式之前等待数据返回，无论是来自 css html 链接还是角度指令，以避免这种延迟/加载问题？

您可以在解析角度路由之前预加载数据。

例：

$routeProvider
                .when('/bar/foo/',
                {
                    templateUrl: '',
                    controller: Ctrl,
                    resolve: {
                        data: ['service', function (service) {
                              return service.function();
                          }
                        ],
                    }
                })
在

控制器中注入'data'作为依赖项。在这种情况下，数据在呈现页面之前可用。

您的服务如何"应用更多样式"？是通过将链接标签附加到您的 DOM 吗？

您可以手动将获得的不同样式存储在临时变量中，并在知道拥有所有样式时立即应用它们。

另一个不错的选择是隐藏整个页面，例如使用一些徽标或进度条，或者只是一个纯白色页面，直到应用了所有样式。在您的顶部控制器中，放置一些$scope.pageReady，一旦您的服务返回了所有 CSS，您将设置为true这些 CSS。同时，隐藏内容：

<div ng-show = "pageReady"> ... </div>
相关文章：