I am a beginner in angularJS, and do not write good English.
I have the following code
<span class="custom-marker-price" ng-bind="property.rentValue"></span>
How can I hide the element span (IMG1) when load angular...
Well, if im correct you should use ng-hide property.
Inside of span after class add ng-hide='hideIt'
and inside of controller at first line put:
$scope.hideIt=false;
And when you want to hide it just put boolean variable in true:
$scope.hideIt = true;
You could also use ngif property.
Hope this help!
ngCloak
directive in module ng
The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
— AngularJS ng-cloak Directive API Reference
<html ng-app>
<body>
<p ng-cloak>{{foo}}</p>
</body>
</html>
The way I understand it:
The HTML page is rendered.
DOMContentLoaded is emitted, and Angular starts its bootstrap process.
During the compile phase, when it sees the ng-cloak directive, it applies display: none !important.
During/after the link phase and before the re-rendering, it removes that display: none !important rule from things with the ng-cloak directive.
So I understand why things wouldn't be shown from the time the compile phase starts to the end of the link phase. But I don't understand why things wouldn't be shown from the time the HTML is loaded to the start of the compile phase.
It's all explained in the documentation:
[...] When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ngCloak directive are hidden. When Angular encounters this directive during the compilation of the template it deletes the ngCloak element attribute, making the compiled element visible.
Other than the explanation in the docs. I've worked on websites that use async calls to retrieve data and I've used ng-cloak to avoid showing variables that might not have a value yet until the end of the compile process. My use case is when the DOMContent might have finished loading way before the compile process ends but my Angular data is not ready yet. Hope this gives you an idea of a use case but that's not the only one.
I am writing a web app using AngularJS on the frontend and I'm implementing a return to top button at the bottom of the page.
<h1 id = "top">
..........
Return to Top
However, this does not work at all. I'm lost because this has worked before on other apps that do not use Angular. So do I have to do something different here?
add target="_self" to href will solve the problem. Thanks to #Chandermani
There's no inherent reason that Angular should interfere with the native operation of a link. Is it possible that the link isn't doing what you expect because the h1 element with the anchor isn't in the DOM anymore at the time you click the link? For example, could you have conditionally removed a parent or ancestor element of that h1 tag with an ng-if directive?
Update: Apparently there is an inherent reason that Angular would interfere. Thanks for the lesson, #Chandermani.
I was in one of the angular presentation and one of the person in the meeting mentioned ng-bind is better than {{}} binding.
One of the reason, ng-bind put the variable in the watch list and only when there is a model change the data get pushed to view, on the other hand, {{}} will interpolate the expression every time (I guess it is the angular cycle) and push the value, even if the value changed or not.
Also it is said that, if you have not much data in on the screen you can use {{}} and the performance issue will not be visible. Can someone shed some light on this issue for me?
Visibility:
While your angularjs is bootstrapping, the user might see your placed brackets in the html. This can be handled with ng-cloak. But for me this is a workaround, that I don't need to use, if I use ng-bind.
Performance:
The {{}} is much slower.
This ng-bind is a directive and will place a watcher on the passed variable.
So the ng-bind will only apply, when the passed value does actually change.
The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it's not necessary.
I am currently building a big single page app (~500 bindings per view). Changing from {{}} to strict ng-bind did save us about 20% in every scope.$digest.
Suggestion:
If you use a translation module such as angular-translate, always prefer directives before brackets annotation.
{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>
If you need a filter function, better go for a directive, that actually just uses your custom filter. Documentation for $filter service
UPDATE 28.11.2014 (but maybe off the topic):
In Angular 1.3x the bindonce functionality was introduced. Therefore you can bind the value of an expression/attribute once (will be bound when != 'undefined').
This is useful when you don't expect your binding to change.
Usage:
Place :: before your binding:
<ul>
<li ng-repeat="item in ::items">{{item}}</li>
</ul>
<a-directive name="::item">
<span data-ng-bind="::value"></span>
Example:
ng-repeat to output some data in the table, with multiple bindings per row.
Translation-bindings, filter outputs, which get executed in every scope digest.
If you are not using ng-bind, instead something like this:
<div>
Hello, {{user.name}}
</div>
you might see the actual Hello, {{user.name}} for a second before user.name is resolved (before the data is loaded)
You could do something like this
<div>
Hello, <span ng-bind="user.name"></span>
</div>
if that's an issue for you.
Another solution is to use ng-cloak.
ng-bind is better than {{...}}
For example, you could do:
<div>
Hello, {{variable}}
</div>
This means that the whole text Hello, {{variable}} enclosed by <div> will be copied and stored in memory.
If instead you do something like this:
<div>
Hello, <span ng-bind="variable"></span>
</div>
Only the value of the value will be stored in memory, and angular will register a watcher (watch expression) which consists of the variable only.
Basically the double-curly syntax is more naturally readable and requires less typing.
Both cases produce the same output but.. if you choose to go with {{}} there is a chance that the user will see for some milliseconds the {{}} before your template is rendered by angular. So if you notice any {{}} then is better to use ng-bind.
Also very important is that only in your index.html of your angular app you can have un-rendered {{}}. If you are using directives so then templates, there is no chance to see that because angular first render the template and after append it to the DOM.
{{...}} is meant two-way data binding. But, ng-bind is actually meant for one-way data binding.
Using ng-bind will reduce the number of watchers in your page. Hence ng-bind will be faster than {{...}}. So, if you only want to display a value and its updates, and do not want to reflect its change from UI back to the controller, then go for ng-bind. This will increase the page performance and reduce the page load time.
<div>
Hello, <span ng-bind="variable"></span>
</div>
This is because with {{}} the angular compiler considers both the text node and it's parent as there is a possibility of merging of 2 {{}} nodes. Hence there are additional linkers that add to the load time. Of course for a few such occurrences the difference is immaterial, however when you are using this inside a repeater of large number of items, it will cause an impact in slower runtime environment.
The reason why Ng-Bind is better because,
When Your page is not Loaded or when your internet is slow or when your website loaded half, then you can see these type of issues (Check the Screen Shot with Read mark) will be triggered on Screen which is Completly weird. To avoid such we should use Ng-bind
ng-bind has its problems too.When you try to use angular filters, limit or something else, you maybe can have problem if you use ng-bind. But in other case, ng-bind is better in UX side.when user opens a page, he/she will see (10ms-100ms) that print symbols ( {{ ... }} ), that's why ng-bind is better.
There is some flickering problem in {{ }} like when you refresh the page then for a short spam of time expression is seen.So we should use ng-bind instead of expression for data depiction.
ng-bind is also safer because it represents html as a string.
So for example, '<script on*=maliciousCode()></script>' will be displayed as a string and not be executed.
According to Angular Doc:
Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading... it's the main difference...
Basically until every dom elements not loaded, we can not see them and because ngBind is attribute on the element, it waits until the doms come into play... more info below
ngBind
- directive in module ng
The ngBind attribute tells AngularJS to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.
An alternative solution to this problem would be using the ngCloak directive. visit here
for more info about the ngbind visit this page: https://docs.angularjs.org/api/ng/directive/ngBind
You could do something like this as attribute, ng-bind:
<div ng-bind="my.name"></div>
or do interpolation as below:
<div>{{my.name}}</div>
or this way with ng-cloak attributes in AngularJs:
<div id="my-name" ng-cloak>{{my.name}}</div>
ng-cloak avoid flashing on the dom and wait until all be ready! this is equal to ng-bind attribute...
You can refer to this site it will give you a explanation which one is better as i know {{}} this is slower than ng-bind.
http://corpus.hubwiz.com/2/angularjs/16125872.html
refer this site.
I commonly use hidden divs on my pages until they need to be unhidden with javascript. I used to do the initial hiding with javascript too, but now moved away to hiding them with css to guarantee that the hiding takes place (js disabled in the browser). Also there was a latency issue with js hiding (waiting for the js to load).
My problem is that with css, there's still some latency, and so I end up including the style with the markup like below, and I kind of hate doing it, makes me feel like I'm doing something wrong..
<div style="display:none;">
content
</div>
How often do you guys do this? and is there a way I can get the css or js to somehow load BEFORE the rest of the markup?
Thanks in advance
Include the css in an inline style block at the top of the page:
<style>
.hidden: { display: none; }
</style>
Then annotate your div with the needed class:
<div class="hidden"> ... </div>
The upshot of this approach is that to show the element, you don't need to set display to block, you can just add/remove the class from the element with JavaScript. This works out better because not every element needs display=block (tables and inline elements have different display modes).
Despite what another poster said, it's not bad practice. You should separate your CSS into presentational and functional markup - functional one controls such logical things as whether or not something gets shown, presentational one just determines how to show it. There is no issue putting functional CSS inline to avoid the page jumping around.
I may get hammered for this, but in a lot of apps, when I want to avoid this latency I use inline script tags immediately after the content, like this:
<div id="hidden-div">
content
</div>
<script type="text/javascript">
$('#hidden-div').hide();
</script>
Or if you're not using jQuery:
<div id="hidden-div">
content
</div>
<script type="text/javascript">
document.getElementById('hidden-div').style.display = 'none';
</script>
At first this seems clunky; however, there are a couple of reasons why I take this approach:
The hiding is immediate (no waiting
for the entire DOM to load)
People with JavaScript disabled will
still see the content, whereas if we
hide it with CSS there is no way for
non-JS users to make it visible
again.
Hope this helps!
I would suggest moving your display:none rule to the top of the stylesheet so it's the first or first of a few parsed, though to be honest it would really depend on how many http requests/media resources you have.
You could try throwing the js before the end body tag and making sure the css is at the top, and the css stylesheet that hides those elements is the very first one linked.
Depends on the browser. Opera, WebKit and Konqueror load CSS and JavaScript in parallel (all CSS is loaded before being applied, however).
display:none is the best solution, but you can use inline-css (like in your description) which is directly loaded with the page, if you want to be extra cautious, its bad practice though.