CODEWITHSUNDEEP
javascriptangularjs
temporary_user_name
temporary_user_name

Reputation: 37068

Why don't users see the {{ handlebars expressions }} in Angular when the page first loads?

I've just started learning Angular and my first big question relates to the use of handlebars expressions such as {{ variableName }}.

When the HTML first loads but before the JS executes, shouldn't the users see a bunch of handlebars expressions all over the page before they're evaluated as the JS executes? Wouldn't this cause a glitchy appearance? Since I assume that must not happen, how has the effect been accomplished?

Upvotes: 2

Views: 294

Answers (5)

Bijay Rai
Bijay Rai

Reputation: 959

Best pratices for not showing such curly braces before js executes you can use ng-bind or ng-cloak

<script>
  angular.module('eg', [])
    .controller('egCtrl', ['$scope', function($scope) {
      $scope.name = 'Aerovistae';
    }]);
</script>

<div ng-app="eg" ng-controller="egCtrl">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
  Hi <span ng-cloak>{{name}}</span>!
</div>

Upvotes: 0

Daniel
Daniel

Reputation: 3131

It depends how the template is loaded, and what directives are used on the page. If the template is loaded from a url or cache, it is processed through the template engine before being output to the page. In a full-on SPA that uses routing and ngView, the process goes like this:

  • javascript loads, including angular
  • angular sees route and decides which template and controller to load
  • the template is loaded from cache or a url, and the controller initialized
  • the template is processed
  • the output of the template is placed in the view

Similarly, if ngCloak is used, then CSS hides the content until Angular "does it's thing". https://docs.angularjs.org/api/ng/directive/ngCloak

If the view is inline on the page (ie the first simple examples on Angular), and ngCloak or some other method are not used to initially hide the content using CSS, then the handlebars will indeed appear until Angular processes the page.

Upvotes: 2

Sherman Szeto
Sherman Szeto

Reputation: 2405

Yes, this does happen. This is what Ng-Cloak is used for.

Reference: https://docs.angularjs.org/api/ng/directive/ngCloak

Upvotes: 2

sockmonk
sockmonk

Reputation: 4255

I'm not familiar with Angular, but I assume handlebars templates work there the same way they do in Backbone: they're wrapped in <script> tags so that nothing between the script tags is displayed initially, including all the handlebars expressions.

These templates of course get compiled to javascript functions, whose input parameter is a context (javascript object with all your variables), and whose output is the rendered HTML that gets added to the page somewhere besides where it first appears in those script tags.

Upvotes: 0

firefoxuser_1
firefoxuser_1

Reputation: 1839

As far as I know, the handlebars do appear briefly, but they go away quickly enough that it is not noticeable.

Upvotes: 0

Related Questions