ASP.NET MVC + AngularJS

Question

I have a an ASP.NET MVC 5 application with AngularJS.

Some pages requires data from server, which I load using $http provider. But it has a big delay while it is waiting for an answer. For example, I return page from the server, on this page I have Foo Angular controller which firstly makes GET request to server and then my data is parsed into table. While this request is performing I can see template html which then results in normal table.

I found that most solutions uses Angular Routing, but in my case it is not a good way, because it is not really a SPA.

I tried this solution, but also without any real good results.

So, is it possible to load data from the server when my controller starts without using Angular Routing?

UPDATE

Here are screens which can show the problem.

When the main page is loaded I see this:

Then, after few some time I can see the resulting page with angular processing:

Original request which performs at this time:

The problem is next: is it possible to not show table layout (first screen) while angular retrieve data from server?

Answer 1

Angular has a built in directive meant to handle this situation, ngCloak.

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

Just ensure that angular.js is loaded in the head of the document, and add the ng-cloak directive to any HTML elements you are having issue with:

<div ng-cloak>{{ 'hello' }}</div>

Answer 2

Check out the documentation on Bootstrapping: https://docs.angularjs.org/api/ng/function/angular.bootstrap

This basic set up is all you would need.

<div ng-controller="WelcomeController">
  {{greeting}}
</div>

Then in your controller make your service call.

var app = angular.module('demo', [])
.controller('WelcomeController', function($scope, $http) {
      $http({
          method: 'GET',
          url: 'yoururl.com'
      }).success(function(response){
           $scope.welcome = response;
      });
});
 angular.bootstrap(document, ['demo']);

Alternatively, if you're not building a SPA it may be a better option to just use jQuery's AJAX methods.