AngularJS will first compile and then load the page

Question

AngularJS will first compile and then load the page

My issue is that when the page loads, it displays AngularJS variables in plain text for a few seconds until Angular compiles. Is there a way to show a loader or just keep it blank until Angular compiles?

Below is my HTML code:

<li ng-repeat="x in notys" class="item js-item">
                <a href="/project/<% x.project_id %>"  class="notification-link">
                    <div class="details">
                        <!--SERVER SIDE-->
                        <span ng-if="x.type == 'AnswerProject'" class="title">New answer added <i>"<% x.subject %>"</i> for <b><% x.body %></b> group, click to check your project.</span>
                        <span ng-if="x.type == 'QuestionProject'" class="title">New question/s added for <b> <% x.subject %> </b> group, check your project <b> <% x.body %> </b></span>

                        <span ng-if="x.type == 'GroupProject'" class="title">New group created: <b> <% x.subject %> </b>. New project assigned to you <b> <% x.body %> </b></span>
                        <span ng-if="x.type == 'GroupProjectUpdate'" class="title">Group <b> <% x.subject %> </b> updated, for <b> <% x.body %> </b> project.</span>

                        <span ng-if="x.type == 'NewComment'" class="title">User <b> <% x.subject %> </b> commented: <b> <% x.body %> </b> in some of your projects. Click to check.</span>

                        <!--CLIENT SIDE-->
                        <span ng-if="x.type == 'NewCommentClient'" class="title">User <b> <% x.name %> </b> commented: <b> <% x.text %> </b> in some of your projects. Click to check.</span>

                        <span ng-if="x.type == 'GroupProjectClient'" class="title">New group created: <b> <% x.name %> </b>. New project assigned to you <b> <% x.project_name %> </b></span>
                        <span ng-if="x.type == 'GroupProjectUpdateClient'" class="title">Group <b> <% x.name %> </b> updated, for <b> <% x.project_name %> </b> project.</span>

                        <span ng-if="x.type == 'AnswerProjectClient'" class="title">New answer added <i>"<% x.answer %>"</i> for <b><% x.groupName %></b> group, click to check your project.</span>
                        <span ng-if="x.type == 'QuestionProjectClient'" class="title">New question/s added for <b> <% x.gName %> </b> group, check your project <b> <% x.name %> </b></span>

                        <p><time-ago from-time="<% x.created_at %>"></time-ago></p>
                    </div>
                </a>
            </li>

javascript angularjs

Answer 1

Answer №1

One way AngularJS handles uncompiled content is through the use of a directive called ng-cloak

Learn more about ng-cloak here.

You can apply ng-cloak to a div or element in the DOM to prevent any elements beneath it from being displayed before compilation

<div ng-cloak>
</div>

Answer 2

One way AngularJS handles uncompiled content is through the use of a directive called ng-cloak

Learn more about ng-cloak here.

You can apply ng-cloak to a div or element in the DOM to prevent any elements beneath it from being displayed before compilation

<div ng-cloak>
</div>

Answer 3

Answer №2

The issue you are facing is that the text appears on the page before all resources are loaded. To resolve this, I recommend using CSS to hide the HTML tag initially and then manually bootstrap Angular after everything has been loaded. Here's a sample code snippet:

// Remove the ng-app tag from the HTML to disable automatic bootstrapping

var app = angular.module('someapp', []),
    htmlNode = document.getElementsByTagName('html')[0];

// Wait for the document to be ready - similar to jQuery
angular.element(document).ready(function(){

    // Manually bootstrap the element
    angular.bootstrap(angular.element(), ['gts-frontEnd']);

    // Display the HTML element again
    htmlNode.style.display = 'block';
});

For more information, refer to the official documentation.

Answer 4

The issue you are facing is that the text appears on the page before all resources are loaded. To resolve this, I recommend using CSS to hide the HTML tag initially and then manually bootstrap Angular after everything has been loaded. Here's a sample code snippet:

// Remove the ng-app tag from the HTML to disable automatic bootstrapping

var app = angular.module('someapp', []),
    htmlNode = document.getElementsByTagName('html')[0];

// Wait for the document to be ready - similar to jQuery
angular.element(document).ready(function(){

    // Manually bootstrap the element
    angular.bootstrap(angular.element(), ['gts-frontEnd']);

    // Display the HTML element again
    htmlNode.style.display = 'block';
});

For more information, refer to the official documentation.

Answer 5

Answer №3

When it comes to your specific use case, there are various approaches you can take. One simple way would be to implement a solution similar to the following:

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // Handle the error in some way
  }).finally(function() {
    // This code runs regardless of success or failure
    $scope.loading = false;
  });
});
Then, you can respond to it in your template:

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

source: Displaying Spinner GIF while making an $http request in Angular

Answer 6

When it comes to your specific use case, there are various approaches you can take. One simple way would be to implement a solution similar to the following:

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // Handle the error in some way
  }).finally(function() {
    // This code runs regardless of success or failure
    $scope.loading = false;
  });
});
Then, you can respond to it in your template:

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

source: Displaying Spinner GIF while making an $http request in Angular

AngularJS will first compile and then load the page

Answer №1

Answer №2

Answer №3

Similar questions

Loading content from another webpage within a webpage using Ajax

Determining when a text area has selected text without constant checking

Ensuring contact form accuracy using jQuery and PHP

ReactJS popover element - property pushing and event management

Various CSS regulations for various languages/modes in CodeMirror

I'm facing an issue with Angular2 where I am unable to include a component from

Ways to test the initial launch of an Android application using Cordova

A guide on incorporating router links within a list component in a React project

Updating content in AngularJS based on the sidebar can be achieved by following these steps:

Express js is failing to deliver static assets

Why does my node-js API's second endpoint not function properly?

Updating content in Bootstrap modal after form submission

Understanding Json data using Jquery

Problems with passing state parameters in AngularJS UI-Router

Creating a Vue Directive in the form of an ES6 class: A step-by-step

What is the best way to eliminate the click event from a child element?

Utilizing Object Assign to reset the state

What is the best way to adjust the size of an SVG path when zooming in Highcharts?

Having trouble updating state following a fetch request in React Native

Exploring the implementation of query parameters in Nest.js