April 17, 2015 07:42 by
Peter
In this post, I will explain you about How to Show ngCloak usage with AngularJS. AngularJS gives ngCloak directive to control the glimmering issue when application is bootstrapping. AngularJS adds the ngCloak class to the component if the application is not bootstrapped and removes this class once the application is bootstrapped and prepared. Now, write the following code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-resource.min.js"></script>
<meta charset="utf-8">
<title>AngularJS ngCloak Example</title>
<style> [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } </style>
</head>
<body ng-controller="MyController" ng-cloak>
<h3>ngCloak Example</h3>
<ol >
<li ng-repeat="item in myData"> {{item.title}} </li>
</ol>
</body>
<script> var myApp= angular.module("myApp",['ngResource']); myApp.controller("MyController", ["$scope", "$resource","$timeout", function($scope,$resource,$timeout){ $scope.myData =[]; var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published"); youtubeVideoService.get() .$promise.then(function(responseData) { angular.forEach(responseData.data.items, function(aSingleRow){ console.log(aSingleRow); $scope.myData.push({ "title":aSingleRow.title }); }); }); }]); </script>
</html>
I hope this tutorial helps you!
AngularJS with Free ASP.NET Hosting
Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.
