Search code examples
angularjsangularjs-scopepartial-views

Why is it that I see {{ ... }} before loading in AngularJS?

Do you know why is the {{ project.title }} before I see the real value of the scope.

And how to solve that ?

EDIT : <title>{{ pageTitle }}</title>

Page is loading

enter image description here

Page completely loaded

enter image description here

Solution

  • Your views for Angular.JS apps are just static HTML. If you remove the script tag that references Angular.JS, you'd end up with a page full of curly brackets in plain sight that never get replaced.

    When your browser finished loading Angular.JS and loading your application, the expressions in those curly brackets are evaluated. That's why you see, for a brief moment, {{…}} in your page title.

    As noted by others, the ng-cloak directive is usually the way to get rid of the flickering before the app is fully loaded.

    But since ng-cloak is just CSS, it cannot be applied to the page title. You'll need ng-bind for that, as noted here.

    <title ng-bind="pageTitle">Default Title</title>