Is there anyway to show skeleton (empty boxes- if I need to load some images and text from background using services) while loading data from api services so that user get a feeling something is happening over instead of showing empty page and dump data once ready.
You can use a simple ng-show, and a loaded variable.
ie
<div ng-show="Controller.loaded"></div>
$scope.loaded = false;
$http.get(...)
.then(...{
$scope.loaded = true;
})
you need ngCloak
there is a plunker however it's too fast to be noticed:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-cloak-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2">{{ 'world' }}</div>
</body>
</html>
try it on your project and see if it helps
Related
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
I have text like below which comes from JSON
<div><div>All are lucky and contect is like
I want this to be displayed properly when rendered. How do i do this.
<p>{{bodydata}}</p>
you can use $sce (Strict Contextual Escaping) for displaying HTML encoded characters
function myCtrl($scope,$sce){
$scope.html = $sce.trustAsHtml('<div><div>All are lucky and contect is like');
}
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<span ng-bind-html="html"></span>
</div>
</body>
</html>
Hope it works for you :)
I have written my first Angular JS but it is not loading in the browser. When I run the file, I get a blank screen. However when I do away with the script tag, the page renders.
<!doctype html>
<html lang="en" ng-app>
enter code here<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="lib/angular/angular.min.js></script>
</head>
<body>
<input type="text" ng-model="name">
<h2>Welcome {{name}}</h2>
</body>
</html>
You need to run it on a server to render angular content in browser. Otherwise, as you have faced, a blank page is displayed. Try using node.js for the same.
Below is a snippet of code I want to maked work,also it will be interested how to put angular data in a php string like the one below
<!DOCTYPE html>
<html lang="en" ng-app="Api">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div data-ng-controller="detaliivideo">
{{afisare.video}} <!-- this is showing the data in pure html -->
<!-- but in javascript no -->
<script type="text/javascript">
// in a simple variable also not working
var video = {{afisare.video}};
var flashvars = {
'autoplay':1,
'autohide':0,
'skin':'//www.mysite.net/js/clipuri.swf',
'more':'//www.mysite.net/related.php',
'ecode':'',
'video': {{afisare.video}}, // this is not working, '{{afisare.video}}' not working also ,"{{afisare.video}}" not working also
'thumbnail':''
};
</script>
<?php $var = "{{myItem}}"; // echo $var is showing the data ,but in a function name ($var) is showing {{afisare.video}}?>
</div>
How does any body know how to divide a single html page in different view with angular.js.
I have this working :
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
....
</head>
<body>
<div ng-view></div>
</body>
</html>
But i would like to do something like this :
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
....
</head>
<body>
<div ng-view Sidebar></div>
<div ng-view></div>
<div ng-view Footer></div>
</body>
</html>
In advance thanks.
I think what you're looking for is "ng-include" : http://docs.angularjs.org/api/ng.directive:ngInclude
The Angular UI router should be a newer better way to handle this problem. At least that's its goal, and it looks very promising, but I haven't used it yet myself.
Angular UI is restructuring their site right now, so the links are a little scattered:
https://github.com/angular-ui/ui-router/wiki
http://angular-ui.github.io/ui-router/sample/#/