Loading CSS with Angular Stylings

Question

My page loads and applies the CSS defined in one of its include css link. I also have an angular controller, that does a call to some services to grab some data. This data will also apply css stylings(via angular) depending on the type of data it returns.

The problem is that, because the services has to wait a split second or so for the data in order to manipulate the stylings on the page, there is this appearance of delay being applied to the page stylings.

Page loads applies CSS...waits for data to return from service call, and then applies some more stylings.

Is there a way to just wait for the data to return before any stylings on the page is applied, whether its from a css html link or angular directive, to avoid this delay/loading issue?

rupampatel · Accepted Answer · 2016-03-21 17:07:43Z

2

You can pre-load data before angular route is resolved.

Example:

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

Inject 'data' as dependency in your controller. In this case, data is available before page is rendered.

answered Mar 21, 2016 at 17:07

rupampatel

3002 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dev123Dev Over a year ago

I like this approach thanks. However, I'm running into a problem. When i use the resolve property in my routeProvider, it doesn't seem to be maintaining req.headers vs. if i call that route directly from the controller. For instance, i have a factory $resource route that i call in the controller to return some data, first verifying a token header(using a req.header). This works great. But when i hit the same $resource route from the resolve property, it makes it into the $resource route, but doesn't seem to be carrying the same req. information and fails at the token validation step. thoughts?

rupampatel Over a year ago

I think you are confusing two different things: 1. request headers comes in to picture when using $http service to make API calls. $http is consumed in your 'service' function which has nothing to do with route resolve. 2. routeProvder helps configuring routes in application. To tap all request originated from $httpProvider, you can use interceptors. example: $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; $httpProvider.defaults.headers.common['X-XSRF-Token'] = angular.element('[name="__RequestVerificationToken"]').val();

Dev123Dev Over a year ago

sorry yes, you are correct. i didn't realize i had another resolve setting that header, and i was skipping over it. Thanks for your help. Marked yours as answered

floribon · Accepted Answer · 2016-03-21 16:31:22Z

0

How does your service "apply some more stylings"? Is it by appending a link tag to your DOM?

You could manually store the different styles you get in a temporary variable, and apply them all at once when you know you have them all.

Another nice alternative would be to hide the whole page, for instance with some logo or progress bar, or just a plain white page until all your styles have been applied. In your top controller, put some $scope.pageReady that you will set to true once your services have returned all the CSS. In the mean time, hide the content:

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

answered Mar 21, 2016 at 16:31

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Collectives™ on Stack Overflow

Loading CSS with Angular Stylings

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related