Shopify Question posted in
The Shopify help center can be found here.

angularjs not loading immediately in liquid – Shopify

It takes some time for example first it loads angularjs as it and then load output.How i can improve it? First load:
enter image description here

after taking few seconds time output is correct:

enter image description here

  
var app = angular.module('myApp', []).config(function ($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  {[{ firstName + " " + lastName }]}
</div>
Tags:

2

Answers


  1. 0

    you can add ng-cloak to avoid it.

    var app = angular.module('myApp', []).config(function ($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl" ng-cloak>

  {[{ firstName + " " + lastName }]}
</div>
    Login or Signup to reply.
  2. 0

    ng-cloak will do that job for you, it doesn’t let angular expressions to print on view, read the documentation for more details:

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

    you can use it for whole body or on elements as well like:

    <div ng-cloak> {{someExpression}} </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search