Javascript 用角度样式加载CSS

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

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

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

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

您的服务如何“应用更多样式”？是通过在DOM中附加链接标记实现的吗

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

另一个不错的选择是隐藏整个页面，例如使用一些徽标或进度条，或者只是一个纯白色页面，直到应用了所有样式。在您的顶级控制器中，放置一些

$scope.pageReady

，一旦您的服务返回所有CSS，您将设置为

true

。同时，隐藏内容：

<div ng-show = "pageReady"> ... </div>

。。。

您的服务如何“应用更多样式”？是通过在DOM中附加链接标记实现的吗

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

另一个不错的选择是隐藏整个页面，例如使用一些徽标或进度条，或者只是一个纯白色页面，直到应用了所有样式。在您的顶级控制器中，放置一些

$scope.pageReady

，一旦您的服务返回所有CSS，您将设置为

true

。同时，隐藏内容：

<div ng-show = "pageReady"> ... </div>

。。。

您可以在解析角度布线之前预加载数据

例如：

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

---

将

“数据”

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

您可以在解析角度布线之前预加载数据

例如：

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

---

将

“数据”

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

我喜欢这种方法，谢谢。然而，我遇到了一个问题。当我在routeProvider中使用resolve属性时，与直接从控制器调用该路由相比，它似乎没有维护req.headers。例如，我有一个工厂$resource路由，我在控制器中调用它来返回一些数据，首先验证令牌头（使用req.header）。这很有效。但是当我从resolve属性点击相同的$resource路由时，它进入了$resource路由，但似乎没有携带相同的req。信息，并在令牌验证步骤失败。想法？我认为你混淆了两件不同的事情：1。当使用$http服务进行API调用时，请求头出现在图片中$http在您的“服务”函数中使用，该函数与路由解析无关。2.routeProvder有助于在应用程序中配置路由。要点击来自$httpProvider的所有请求，可以使用拦截器。示例：$httpProvider.defaults.headers.common['X-Requested-With']='XMLHttpRequest'$httpProvider.defaults.headers.common['X-XSRF-Token']=angular.element（'[name=“\uu RequestVerificationToken”]'）.val（）；对不起，是的，你是对的。我没有意识到我有另一个解决设置该标题，我跳过了它。谢谢你的帮助。把你的答案记下来我喜欢这个方法谢谢。然而，我遇到了一个问题。当我在routeProvider中使用resolve属性时，与直接从控制器调用该路由相比，它似乎没有维护req.headers。例如，我有一个工厂$resource路由，我在控制器中调用它来返回一些数据，首先验证令牌头（使用req.header）。这很有效。但是当我从resolve属性点击相同的$resource路由时，它进入了$resource路由，但似乎没有携带相同的req。信息，并在令牌验证步骤失败。想法？我认为你混淆了两件不同的事情：1。当使用$http服务进行API调用时，请求头出现在图片中$http在您的“服务”函数中使用，该函数与路由解析无关。2.routeProvder有助于在应用程序中配置路由。要点击来自$httpProvider的所有请求，可以使用拦截器。示例：$httpProvider.defaults.headers.common['X-Requested-With']='XMLHttpRequest'$httpProvider.defaults.headers.common['X-XSRF-Token']=angular.element（'[name=“\uu RequestVerificationToken”]'）.val（）；对不起，是的，你是对的。我没有意识到我有另一个解决设置该标题，我跳过了它。谢谢你的帮助。将您的标记为已回答