CODEWITHSUNDEEP
angularjsshopifyliquid
Sufyan Ahmad
Sufyan Ahmad

Reputation: 838

angularjs not loading immediately in liquid

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>

Upvotes: 1

Views: 306

Answers (2)

Junaid Sarwar
Junaid Sarwar

Reputation: 209

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>

Upvotes: 1

Pengyy
Pengyy

Reputation: 38191

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>

Upvotes: 2

Related Questions