missgg missgg - 4 months ago 15
Smarty Question

Loading message or spinner icon before JSON loads in the same file as angular module and controller

I am trying to figure out a way to not use $http.get() or $resource to load my JSON data from a separate file or URL since I can load my JSON data using a smarty code like $scope.products = {$data}; I want to load a spinner icon or a "loading" msg before my JSON data loads since the curly braces from angular code are ugly to display. Here is my code below and any thoughts would be appreciated.

<script type="text/javascript">
var app= angular.module('mysearch', []);
app.controller('mysearchController', ['$scope', function($scope){
$scope.products = {$data};
]);
</script>

<div ng-app="mysearch">
<div ng-controller="mysearchController">
<div ng-repeat="item in products">
{{item.sub_name}}
</div>
<p> {{item.title}}</p>
</div>
</div>

Answer

You should be using ng-cloak directive. It prevents the document from showing unfinished AngularJS code while AngularJS is being loaded. An example of such is :

  <element ng-cloak>{{yourdata}}</element>

Edit 1:

https://jsfiddle.net/ph110293/ou5e1dsv/

Use ng-hide to show your spinner for the time being your angular loads and ng-show to show when your scope has loaded

Comments