How to prevent element show before AngularJS initialized( ng-show )
In AngularJS, I wonder how to prevent the elements shown on page before ng-show take effect, I found some posts talk about ng-cloak, but it seems not work in my case, probably the ng-cloak is for prevent double curly bracket rather than Element style.
Another way someone talk about is define some style for before AngularJS initialized, but that is kinda hard to manage.
Is there some official way to handle this?
angularjs ng-show
edited Dec 11 '18 at 4:28
Cœur
19.2k9116155
asked Jun 27 '15 at 0:37
KuanKuan
4,1161355123
add a comment |
In AngularJS, I wonder how to prevent the elements shown on page before ng-show take effect, I found some posts talk about ng-cloak, but it seems not work in my case, probably the ng-cloak is for prevent double curly bracket rather than Element style.
Another way someone talk about is define some style for before AngularJS initialized, but that is kinda hard to manage.
Is there some official way to handle this?
angularjs ng-show
edited Dec 11 '18 at 4:28
Cœur
19.2k9116155
asked Jun 27 '15 at 0:37
KuanKuan
4,1161355123
The correct way to do this is to show a loader while you load if it gas any delay... that's just good ux. I have given you the solution to show a loader while the loading/rendering occurs. If you don't want loader us ngcloak as suggested. The loader I gave you does not use a timeout either to do this which is a correct approach. Please accept the answer if not works for you ;)
– Alpha G33k
Jun 27 '15 at 12:54
add a comment |
In AngularJS, I wonder how to prevent the elements shown on page before ng-show take effect, I found some posts talk about ng-cloak, but it seems not work in my case, probably the ng-cloak is for prevent double curly bracket rather than Element style.
Another way someone talk about is define some style for before AngularJS initialized, but that is kinda hard to manage.
Is there some official way to handle this?
angularjs ng-show
edited Dec 11 '18 at 4:28
Cœur
19.2k9116155
asked Jun 27 '15 at 0:37
KuanKuan
4,1161355123
In AngularJS, I wonder how to prevent the elements shown on page before ng-show take effect, I found some posts talk about ng-cloak, but it seems not work in my case, probably the ng-cloak is for prevent double curly bracket rather than Element style.
Another way someone talk about is define some style for before AngularJS initialized, but that is kinda hard to manage.
Is there some official way to handle this?
angularjs ng-show
angularjs ng-show
edited Dec 11 '18 at 4:28
Cœur
19.2k9116155
asked Jun 27 '15 at 0:37
KuanKuan
4,1161355123
edited Dec 11 '18 at 4:28
Cœur
19.2k9116155
asked Jun 27 '15 at 0:37
KuanKuan
4,1161355123
edited Dec 11 '18 at 4:28
Cœur
19.2k9116155
edited Dec 11 '18 at 4:28
Cœur
19.2k9116155
edited Dec 11 '18 at 4:28
Cœur
19.2k9116155
19.2k9116155
asked Jun 27 '15 at 0:37
KuanKuan
4,1161355123
asked Jun 27 '15 at 0:37
KuanKuan
4,1161355123
asked Jun 27 '15 at 0:37
KuanKuan
4,1161355123
4,1161355123
The correct way to do this is to show a loader while you load if it gas any delay... that's just good ux. I have given you the solution to show a loader while the loading/rendering occurs. If you don't want loader us ngcloak as suggested. The loader I gave you does not use a timeout either to do this which is a correct approach. Please accept the answer if not works for you ;)
– Alpha G33k
Jun 27 '15 at 12:54
add a comment |
The correct way to do this is to show a loader while you load if it gas any delay... that's just good ux. I have given you the solution to show a loader while the loading/rendering occurs. If you don't want loader us ngcloak as suggested. The loader I gave you does not use a timeout either to do this which is a correct approach. Please accept the answer if not works for you ;)
– Alpha G33k
Jun 27 '15 at 12:54
The correct way to do this is to show a loader while you load if it gas any delay... that's just good ux. I have given you the solution to show a loader while the loading/rendering occurs. If you don't want loader us ngcloak as suggested. The loader I gave you does not use a timeout either to do this which is a correct approach. Please accept the answer if not works for you ;)
– Alpha G33k
Jun 27 '15 at 12:54
The correct way to do this is to show a loader while you load if it gas any delay... that's just good ux. I have given you the solution to show a loader while the loading/rendering occurs. If you don't want loader us ngcloak as suggested. The loader I gave you does not use a timeout either to do this which is a correct approach. Please accept the answer if not works for you ;)
– Alpha G33k
Jun 27 '15 at 12:54
add a comment |
4 Answers
4
active
oldest
votes
Unless you want to show a loader, ng-cloak should be your solution.
Official documentation on ng-cloak
If you still have the issue, you may try to add the css to hide element with ng-cloak inside your html to be sure the browser has it in time.
If you do that, choose on way to add the ng-cloak.
For example add it as class:
<div ng-show="condition" class="ng-cloak">...</div>
And add this into your html head tag:
<style> .ng-cloak { display: none !important; } </style>
answered Jun 27 '15 at 1:22
YoannYoann
42626
Just beware that whatever is cloaked/hidden on the page, it's still there. If you use ui-router, the HTML is only injected at the right time. Another alternative is ng-bind e.g.<span ng-bind="expression_without_braces"></span>
– DJDaveMark
Nov 16 '18 at 11:44
add a comment |
In case you want to just avoid showing something till it's ready to be shown (some data has been loaded from the backend perhaps) then it's better to use ng-if. Ofcourse it works the same with ng-show. But the advantage of using ng-if is that you delay the creation of the extra DOM until it needs to be shown and as a result you improve the intial page loading time.
Here is an example:
var myApp = angular.module('myApp', );
myApp.controller("myController", function ($scope, $timeout) {
$scope.isLoading = false;
$scope.data = null;
simAsync();
//simulate async task like http request
function simAsync() {
//loadind data has started
$scope.isLoading = true;
$timeout(function () {
$scope.data = [{
"firstname": "Sims",
"lastname": "Wilkerson"
}, {
"firstname": "Kelli",
"lastname": "Vazquez"
}, {
"firstname": "Mcdonald",
"lastname": "Byrd"
}, {
"firstname": "Taylor",
"lastname": "Frost"
}, {
"firstname": "Merle",
"lastname": "Adkins"
}, {
"firstname": "Garrett",
"lastname": "Hood"
}];
//the data has loaded
$scope.isLoading = false;
}, 1500);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
</div>answered Jun 27 '15 at 7:17
Christos BaziotisChristos Baziotis
2,894154870
ng-ifwon't work (it's content will be shown) if the HTML is on the index page & angular isn't ready yet.
– DJDaveMark
Nov 16 '18 at 11:41
add a comment |
Use a loader such as this:
JS
angular.element(document).ready(function(){
$('.loading').remove(); // Just an example dont modify the dom outside of a directive in a real app!
alert('Loaded!');
});
CSS
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: #000;
}
DEMO
http://codepen.io/nicholasabrams/pen/MwOMNR
I just answered a similar topic here: Angularjs tab Loading spinner while rendering
edited May 23 '17 at 11:47
Community♦
11
answered Jun 27 '15 at 0:46
Alpha G33kAlpha G33k
1,075515
add a comment |
2 alternatives to completely avoid the problem:
- ngBind
<span ng-bind="expression_without_braces"></span>
It is preferable to use
ngBindinstead of{{ expression }}if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. SincengBindis an element attribute, it makes the bindings invisible to the user while the page is loading.
- use
ui-routerto keep HTML in separate files, which will be loaded/parsed/injected only when needed and only when the controller is initialized.
Here's the hello world tutorial modified to use a separate HTML file:
// helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
templateUrl: 'helloworld.html'
}
$stateProvider.state(helloState);
});
<!-- helloworld.html -->
<h3>hello world!</h3>
<!-- index.html -->
<html>
<head>
<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<ui-view></ui-view>
</body>
</html>
answered Nov 16 '18 at 11:26
DJDaveMarkDJDaveMark
1,5091022
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f31083974%2fhow-to-prevent-element-show-before-angularjs-initialized-ng-show%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Unless you want to show a loader, ng-cloak should be your solution.
Official documentation on ng-cloak
If you still have the issue, you may try to add the css to hide element with ng-cloak inside your html to be sure the browser has it in time.
If you do that, choose on way to add the ng-cloak.
For example add it as class:
<div ng-show="condition" class="ng-cloak">...</div>
And add this into your html head tag:
<style> .ng-cloak { display: none !important; } </style>
answered Jun 27 '15 at 1:22
YoannYoann
42626
Just beware that whatever is cloaked/hidden on the page, it's still there. If you use ui-router, the HTML is only injected at the right time. Another alternative is ng-bind e.g.<span ng-bind="expression_without_braces"></span>
– DJDaveMark
Nov 16 '18 at 11:44
add a comment |
Unless you want to show a loader, ng-cloak should be your solution.
Official documentation on ng-cloak
If you still have the issue, you may try to add the css to hide element with ng-cloak inside your html to be sure the browser has it in time.
If you do that, choose on way to add the ng-cloak.
For example add it as class:
<div ng-show="condition" class="ng-cloak">...</div>
And add this into your html head tag:
<style> .ng-cloak { display: none !important; } </style>
answered Jun 27 '15 at 1:22
YoannYoann
42626
Just beware that whatever is cloaked/hidden on the page, it's still there. If you use ui-router, the HTML is only injected at the right time. Another alternative is ng-bind e.g.<span ng-bind="expression_without_braces"></span>
– DJDaveMark
Nov 16 '18 at 11:44
add a comment |
Unless you want to show a loader, ng-cloak should be your solution.
Official documentation on ng-cloak
If you still have the issue, you may try to add the css to hide element with ng-cloak inside your html to be sure the browser has it in time.
If you do that, choose on way to add the ng-cloak.
For example add it as class:
<div ng-show="condition" class="ng-cloak">...</div>
And add this into your html head tag:
<style> .ng-cloak { display: none !important; } </style>
answered Jun 27 '15 at 1:22
YoannYoann
42626
Unless you want to show a loader, ng-cloak should be your solution.
Official documentation on ng-cloak
If you still have the issue, you may try to add the css to hide element with ng-cloak inside your html to be sure the browser has it in time.
If you do that, choose on way to add the ng-cloak.
For example add it as class:
<div ng-show="condition" class="ng-cloak">...</div>
And add this into your html head tag:
<style> .ng-cloak { display: none !important; } </style>
answered Jun 27 '15 at 1:22
YoannYoann
42626
answered Jun 27 '15 at 1:22
YoannYoann
42626
answered Jun 27 '15 at 1:22
YoannYoann
42626
answered Jun 27 '15 at 1:22
YoannYoann
42626
42626
Just beware that whatever is cloaked/hidden on the page, it's still there. If you use ui-router, the HTML is only injected at the right time. Another alternative is ng-bind e.g.<span ng-bind="expression_without_braces"></span>
– DJDaveMark
Nov 16 '18 at 11:44
add a comment |
Just beware that whatever is cloaked/hidden on the page, it's still there. If you use ui-router, the HTML is only injected at the right time. Another alternative is ng-bind e.g.<span ng-bind="expression_without_braces"></span>
– DJDaveMark
Nov 16 '18 at 11:44
Just beware that whatever is cloaked/hidden on the page, it's still there. If you use ui-router, the HTML is only injected at the right time. Another alternative is ng-bind e.g.
<span ng-bind="expression_without_braces"></span>– DJDaveMark
Nov 16 '18 at 11:44
Just beware that whatever is cloaked/hidden on the page, it's still there. If you use ui-router, the HTML is only injected at the right time. Another alternative is ng-bind e.g.
<span ng-bind="expression_without_braces"></span>– DJDaveMark
Nov 16 '18 at 11:44
add a comment |
In case you want to just avoid showing something till it's ready to be shown (some data has been loaded from the backend perhaps) then it's better to use ng-if. Ofcourse it works the same with ng-show. But the advantage of using ng-if is that you delay the creation of the extra DOM until it needs to be shown and as a result you improve the intial page loading time.
Here is an example:
var myApp = angular.module('myApp', );
myApp.controller("myController", function ($scope, $timeout) {
$scope.isLoading = false;
$scope.data = null;
simAsync();
//simulate async task like http request
function simAsync() {
//loadind data has started
$scope.isLoading = true;
$timeout(function () {
$scope.data = [{
"firstname": "Sims",
"lastname": "Wilkerson"
}, {
"firstname": "Kelli",
"lastname": "Vazquez"
}, {
"firstname": "Mcdonald",
"lastname": "Byrd"
}, {
"firstname": "Taylor",
"lastname": "Frost"
}, {
"firstname": "Merle",
"lastname": "Adkins"
}, {
"firstname": "Garrett",
"lastname": "Hood"
}];
//the data has loaded
$scope.isLoading = false;
}, 1500);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
</div>answered Jun 27 '15 at 7:17
Christos BaziotisChristos Baziotis
2,894154870
ng-ifwon't work (it's content will be shown) if the HTML is on the index page & angular isn't ready yet.
– DJDaveMark
Nov 16 '18 at 11:41
add a comment |
In case you want to just avoid showing something till it's ready to be shown (some data has been loaded from the backend perhaps) then it's better to use ng-if. Ofcourse it works the same with ng-show. But the advantage of using ng-if is that you delay the creation of the extra DOM until it needs to be shown and as a result you improve the intial page loading time.
Here is an example:
var myApp = angular.module('myApp', );
myApp.controller("myController", function ($scope, $timeout) {
$scope.isLoading = false;
$scope.data = null;
simAsync();
//simulate async task like http request
function simAsync() {
//loadind data has started
$scope.isLoading = true;
$timeout(function () {
$scope.data = [{
"firstname": "Sims",
"lastname": "Wilkerson"
}, {
"firstname": "Kelli",
"lastname": "Vazquez"
}, {
"firstname": "Mcdonald",
"lastname": "Byrd"
}, {
"firstname": "Taylor",
"lastname": "Frost"
}, {
"firstname": "Merle",
"lastname": "Adkins"
}, {
"firstname": "Garrett",
"lastname": "Hood"
}];
//the data has loaded
$scope.isLoading = false;
}, 1500);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
</div>answered Jun 27 '15 at 7:17
Christos BaziotisChristos Baziotis
2,894154870
ng-ifwon't work (it's content will be shown) if the HTML is on the index page & angular isn't ready yet.
– DJDaveMark
Nov 16 '18 at 11:41
add a comment |
In case you want to just avoid showing something till it's ready to be shown (some data has been loaded from the backend perhaps) then it's better to use ng-if. Ofcourse it works the same with ng-show. But the advantage of using ng-if is that you delay the creation of the extra DOM until it needs to be shown and as a result you improve the intial page loading time.
Here is an example:
var myApp = angular.module('myApp', );
myApp.controller("myController", function ($scope, $timeout) {
$scope.isLoading = false;
$scope.data = null;
simAsync();
//simulate async task like http request
function simAsync() {
//loadind data has started
$scope.isLoading = true;
$timeout(function () {
$scope.data = [{
"firstname": "Sims",
"lastname": "Wilkerson"
}, {
"firstname": "Kelli",
"lastname": "Vazquez"
}, {
"firstname": "Mcdonald",
"lastname": "Byrd"
}, {
"firstname": "Taylor",
"lastname": "Frost"
}, {
"firstname": "Merle",
"lastname": "Adkins"
}, {
"firstname": "Garrett",
"lastname": "Hood"
}];
//the data has loaded
$scope.isLoading = false;
}, 1500);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
</div>answered Jun 27 '15 at 7:17
Christos BaziotisChristos Baziotis
2,894154870
In case you want to just avoid showing something till it's ready to be shown (some data has been loaded from the backend perhaps) then it's better to use ng-if. Ofcourse it works the same with ng-show. But the advantage of using ng-if is that you delay the creation of the extra DOM until it needs to be shown and as a result you improve the intial page loading time.
Here is an example:
var myApp = angular.module('myApp', );
myApp.controller("myController", function ($scope, $timeout) {
$scope.isLoading = false;
$scope.data = null;
simAsync();
//simulate async task like http request
function simAsync() {
//loadind data has started
$scope.isLoading = true;
$timeout(function () {
$scope.data = [{
"firstname": "Sims",
"lastname": "Wilkerson"
}, {
"firstname": "Kelli",
"lastname": "Vazquez"
}, {
"firstname": "Mcdonald",
"lastname": "Byrd"
}, {
"firstname": "Taylor",
"lastname": "Frost"
}, {
"firstname": "Merle",
"lastname": "Adkins"
}, {
"firstname": "Garrett",
"lastname": "Hood"
}];
//the data has loaded
$scope.isLoading = false;
}, 1500);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
</div>var myApp = angular.module('myApp', );
myApp.controller("myController", function ($scope, $timeout) {
$scope.isLoading = false;
$scope.data = null;
simAsync();
//simulate async task like http request
function simAsync() {
//loadind data has started
$scope.isLoading = true;
$timeout(function () {
$scope.data = [{
"firstname": "Sims",
"lastname": "Wilkerson"
}, {
"firstname": "Kelli",
"lastname": "Vazquez"
}, {
"firstname": "Mcdonald",
"lastname": "Byrd"
}, {
"firstname": "Taylor",
"lastname": "Frost"
}, {
"firstname": "Merle",
"lastname": "Adkins"
}, {
"firstname": "Garrett",
"lastname": "Hood"
}];
//the data has loaded
$scope.isLoading = false;
}, 1500);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
</div>var myApp = angular.module('myApp', );
myApp.controller("myController", function ($scope, $timeout) {
$scope.isLoading = false;
$scope.data = null;
simAsync();
//simulate async task like http request
function simAsync() {
//loadind data has started
$scope.isLoading = true;
$timeout(function () {
$scope.data = [{
"firstname": "Sims",
"lastname": "Wilkerson"
}, {
"firstname": "Kelli",
"lastname": "Vazquez"
}, {
"firstname": "Mcdonald",
"lastname": "Byrd"
}, {
"firstname": "Taylor",
"lastname": "Frost"
}, {
"firstname": "Merle",
"lastname": "Adkins"
}, {
"firstname": "Garrett",
"lastname": "Hood"
}];
//the data has loaded
$scope.isLoading = false;
}, 1500);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
</div>answered Jun 27 '15 at 7:17
Christos BaziotisChristos Baziotis
2,894154870
edited Jun 27 '15 at 10:25
answered Jun 27 '15 at 7:17
Christos BaziotisChristos Baziotis
2,894154870
answered Jun 27 '15 at 7:17
Christos BaziotisChristos Baziotis
2,894154870
answered Jun 27 '15 at 7:17
Christos BaziotisChristos Baziotis
2,894154870
2,894154870
ng-ifwon't work (it's content will be shown) if the HTML is on the index page & angular isn't ready yet.
– DJDaveMark
Nov 16 '18 at 11:41
add a comment |
ng-ifwon't work (it's content will be shown) if the HTML is on the index page & angular isn't ready yet.
– DJDaveMark
Nov 16 '18 at 11:41
ng-if won't work (it's content will be shown) if the HTML is on the index page & angular isn't ready yet.– DJDaveMark
Nov 16 '18 at 11:41
ng-if won't work (it's content will be shown) if the HTML is on the index page & angular isn't ready yet.– DJDaveMark
Nov 16 '18 at 11:41
add a comment |
Use a loader such as this:
JS
angular.element(document).ready(function(){
$('.loading').remove(); // Just an example dont modify the dom outside of a directive in a real app!
alert('Loaded!');
});
CSS
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: #000;
}
DEMO
http://codepen.io/nicholasabrams/pen/MwOMNR
I just answered a similar topic here: Angularjs tab Loading spinner while rendering
edited May 23 '17 at 11:47
Community♦
11
answered Jun 27 '15 at 0:46
Alpha G33kAlpha G33k
1,075515
add a comment |
Use a loader such as this:
JS
angular.element(document).ready(function(){
$('.loading').remove(); // Just an example dont modify the dom outside of a directive in a real app!
alert('Loaded!');
});
CSS
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: #000;
}
DEMO
http://codepen.io/nicholasabrams/pen/MwOMNR
I just answered a similar topic here: Angularjs tab Loading spinner while rendering
edited May 23 '17 at 11:47
Community♦
11
answered Jun 27 '15 at 0:46
Alpha G33kAlpha G33k
1,075515
add a comment |
Use a loader such as this:
JS
angular.element(document).ready(function(){
$('.loading').remove(); // Just an example dont modify the dom outside of a directive in a real app!
alert('Loaded!');
});
CSS
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: #000;
}
DEMO
http://codepen.io/nicholasabrams/pen/MwOMNR
I just answered a similar topic here: Angularjs tab Loading spinner while rendering
edited May 23 '17 at 11:47
Community♦
11
answered Jun 27 '15 at 0:46
Alpha G33kAlpha G33k
1,075515
Use a loader such as this:
JS
angular.element(document).ready(function(){
$('.loading').remove(); // Just an example dont modify the dom outside of a directive in a real app!
alert('Loaded!');
});
CSS
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: #000;
}
DEMO
http://codepen.io/nicholasabrams/pen/MwOMNR
I just answered a similar topic here: Angularjs tab Loading spinner while rendering
edited May 23 '17 at 11:47
Community♦
11
answered Jun 27 '15 at 0:46
Alpha G33kAlpha G33k
1,075515
edited May 23 '17 at 11:47
Community♦
11
edited May 23 '17 at 11:47
Community♦
11
edited May 23 '17 at 11:47
Community♦
11
11
answered Jun 27 '15 at 0:46
Alpha G33kAlpha G33k
1,075515
answered Jun 27 '15 at 0:46
Alpha G33kAlpha G33k
1,075515
answered Jun 27 '15 at 0:46
Alpha G33kAlpha G33k
1,075515
1,075515
add a comment |
add a comment |
2 alternatives to completely avoid the problem:
- ngBind
<span ng-bind="expression_without_braces"></span>
It is preferable to use
ngBindinstead of{{ expression }}if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. SincengBindis an element attribute, it makes the bindings invisible to the user while the page is loading.
- use
ui-routerto keep HTML in separate files, which will be loaded/parsed/injected only when needed and only when the controller is initialized.
Here's the hello world tutorial modified to use a separate HTML file:
// helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
templateUrl: 'helloworld.html'
}
$stateProvider.state(helloState);
});
<!-- helloworld.html -->
<h3>hello world!</h3>
<!-- index.html -->
<html>
<head>
<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<ui-view></ui-view>
</body>
</html>
answered Nov 16 '18 at 11:26
DJDaveMarkDJDaveMark
1,5091022
add a comment |
2 alternatives to completely avoid the problem:
- ngBind
<span ng-bind="expression_without_braces"></span>
It is preferable to use
ngBindinstead of{{ expression }}if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. SincengBindis an element attribute, it makes the bindings invisible to the user while the page is loading.
- use
ui-routerto keep HTML in separate files, which will be loaded/parsed/injected only when needed and only when the controller is initialized.
Here's the hello world tutorial modified to use a separate HTML file:
// helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
templateUrl: 'helloworld.html'
}
$stateProvider.state(helloState);
});
<!-- helloworld.html -->
<h3>hello world!</h3>
<!-- index.html -->
<html>
<head>
<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<ui-view></ui-view>
</body>
</html>
answered Nov 16 '18 at 11:26
DJDaveMarkDJDaveMark
1,5091022
add a comment |
2 alternatives to completely avoid the problem:
- ngBind
<span ng-bind="expression_without_braces"></span>
It is preferable to use
ngBindinstead of{{ expression }}if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. SincengBindis an element attribute, it makes the bindings invisible to the user while the page is loading.
- use
ui-routerto keep HTML in separate files, which will be loaded/parsed/injected only when needed and only when the controller is initialized.
Here's the hello world tutorial modified to use a separate HTML file:
// helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
templateUrl: 'helloworld.html'
}
$stateProvider.state(helloState);
});
<!-- helloworld.html -->
<h3>hello world!</h3>
<!-- index.html -->
<html>
<head>
<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<ui-view></ui-view>
</body>
</html>
answered Nov 16 '18 at 11:26
DJDaveMarkDJDaveMark
1,5091022
2 alternatives to completely avoid the problem:
- ngBind
<span ng-bind="expression_without_braces"></span>
It is preferable to use
ngBindinstead of{{ expression }}if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. SincengBindis an element attribute, it makes the bindings invisible to the user while the page is loading.
- use
ui-routerto keep HTML in separate files, which will be loaded/parsed/injected only when needed and only when the controller is initialized.
Here's the hello world tutorial modified to use a separate HTML file:
// helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
templateUrl: 'helloworld.html'
}
$stateProvider.state(helloState);
});
<!-- helloworld.html -->
<h3>hello world!</h3>
<!-- index.html -->
<html>
<head>
<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<ui-view></ui-view>
</body>
</html>
answered Nov 16 '18 at 11:26
DJDaveMarkDJDaveMark
1,5091022
edited Nov 16 '18 at 11:38
answered Nov 16 '18 at 11:26
DJDaveMarkDJDaveMark
1,5091022
answered Nov 16 '18 at 11:26
DJDaveMarkDJDaveMark
1,5091022
answered Nov 16 '18 at 11:26
DJDaveMarkDJDaveMark
1,5091022
1,5091022
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f31083974%2fhow-to-prevent-element-show-before-angularjs-initialized-ng-show%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The correct way to do this is to show a loader while you load if it gas any delay... that's just good ux. I have given you the solution to show a loader while the loading/rendering occurs. If you don't want loader us ngcloak as suggested. The loader I gave you does not use a timeout either to do this which is a correct approach. Please accept the answer if not works for you ;)
– Alpha G33k
Jun 27 '15 at 12:54