I'm working on an Angular app that makes a call to a data service and then repeats the results in the view. Each result has a unique, external link. I've found that, in Safari, when you click the link and then navigate backwards with the browser button, you see only the bracketed Angular template text. So,
<div ng-repeat="i in items">
<div>{{i.name}}</div>
<div>{{i.location}}</div>
<div>{{i.link_name}}</div>
</div>
yields
{{i.name}}
{{i.location}}
{{i.link_name}}
with the anchor being just an empty link. This phenomenon does not appear in Chrome. The app is being served by Rails.
That is basically uncompiled html by angular shown on HTML. In that case I'd prefer you to use ng-bind directive to html on page.
<div ng-repeat="i in items">
<div ng-bind="i.name"></div>
<div ng-bind="i.location">{{i.}}</div>
<div><a ng-href="{{i.link}}" ng-bind="i.link_name"></a></div>
</div>
Related
I have read here and here that a page can be scrolled to a specific element using just a hash selector and a id attr.
But for some reasons I am unable to do it in my Angular application. Can this be due to the usage of routing (angular-ui-router) in my app.
What I am trying to do is moving to a specific section of one of my page, which by the way are loaded in to a state using routing.
I have :
<div class="nav_panel">
<a class="nav_links" href="#footer">Footer</a>
</div>
and
<div class="homeFooter" id="footer">
<div class="social_icons">
<span class="gplus"></span>
<span class="fb"></span>
<span class="twitter"></span>
<span class="whatsapp"></span>
<span class="youtube"></span>
</div>
</div>
on the same template.
Is there a way I can make it work with routing (if at all that matters) as well or am I doing something wrong here ?
Based on this answer, you can add the _targetattribute to the <a>tag.
For your need, value on _target is self. It's an attribute compatible with all recent browser, that will redirect you to the link in the same frame as the user click (useful for SPA e.g.)
Go to the footer
<div id="footer">Welcome to the footer</div>
I'm a newbie in Angular JS(I'm using #1.5.8)and I'm following the docs.angularjs.org/tutorial tutorials.
I've the html
<div class="jumbotron">
<h1>{{application_name | uppercase }}</h1>
<p class="lead" >
</div>
where is set in main.js
$scope.application_name='app';
everything is going well, but every time I reload manually(refresh localhost page) or with gulp, the page renders earlier the html,the user sees application_name printed in big and after is rendered with the wanted value.
My question is :
is there a way to avoid showing Angular js expressions when rendering the page for first time?
I want that when I go to the localhost page, the page shows app and not
application_name
You can avoid it by not using brackets...
<div class="jumbotron">
<h1 ng-bind="application_name | uppercase"></h1>
<p class="lead" >
</div>
As Stephen C commented above you can also use ngcloak..
<div class="jumbotron" ng-cloak>
<h1>{{ application_name | uppercase }}</h1>
<p class="lead" >
</div>
Here is a great link about the difference between cloak and bind. Differences between ng-bind and ng-cloak in angularjs
In summary, directly from that link:
ngBind
The ngBind attribute tells Angular 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.
ngCloak
The ngCloak directive is used to prevent the Angular 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.
Use ng-bind , this will show only value after parsing.
<div class="jumbotron">
<h1 ng-bind="application_name | uppercase"></h1>
<p class="lead" >
</div>
You can use ngCloak directive.
The ngCloak directive is used to prevent the Angular 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.
<div class="jumbotron">
<h1 ng-cloak>{{application_name | uppercase }}</h1>
<p class="lead" >
</div>
You should use ng-bind when you can => When you dont need a two-way binding but a one-way only.
The ngBind attribute tells Angular 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.
You can also use ng-cloack
The ngCloak directive is used to prevent the Angular 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.
I have a internal team website build using python django and angularJS. The website works fine when there is low data/ content on it.
When the website gets scrolled and more data is loaded. It becomes slow.
The major problem occurs when we try to open any modal or try to write text in the textarea. The text lags while writing and modal open very slowly.
I have used nested ng-repeat there are 5 nested ng-repeat.
<div ng-repeat="x in xyz">
<div ng-repeat="y in xyz">
</div>
<div ng-repeat="img in xyz">
</div>
<div ng-repeat="y in xyz">
<div ng-repeat="z in xyz">
</div>
</div>
</div>
Above is the example of the structure being used in the website.
The above snippet repeat itself around 100 times thorughout the page.
These are having images, forms, text, input , user tagging like facebook.
ngCacheBuster,ui.bootstrap, ngTagsInput, ui.mention,monospaced.elastic these are the external library being used in the website.
the website is built using bootstrap.
Is there a specific reason why the website becomes heavy.
each size of the image is around 100kb on an average.
really? the page loads slow when there is alot of data? :D
anyway the most simple method to speed-up heavy data apps is to conditionally load and render parts of it, for example:
<div ng-repeat="x in bla" ng-click="showL1 = true">
<div ng-repeat="y in boo" ng-if="showL1 === true">
//more...
</div>
</div>
on the other part is double check your architecture, since there is a very limited amount of data a person can take from a page and therefor start thinking about tabs and paging
Maybe u need use some function in your controller that will load some part of all data for user.
For example:
app.constant('range' , 10);
app.controller('example', ['$scope', function($scope) {
$scope.loadRangeData = function(range) {
//your way of loading data with using range
}
}
]);
and after u can use ng-repeat as
<div ng-repeat="x in loadRangeData">
but best way it's finding answer in your django maybe
I have an AngularJS application that has a list of contents on the menu. When the user clicks on an item on the menu, the content loads on the main view. There are multiple content types:
When "1" is clicked, a video is loaded. When "2" is clicked, a PDF document is loaded, and so on. Content types may repeat and be complex.
Now, I am setting $scope.content when an item is clicked and, depending on its contentType, I'm calling a different directive:
<div class="content" ng-switch on="content.contentType">
<div ng-switch-when="video">
<videoplayer-directive video="content"></videoplayer-directive>
</div>
<div ng-switch-when="pdf">
<pdfreader-directive pdf="content"></pdfreader-directive>
</div>
<div ng-switch-when="...">
<...-directive content="content"></...-directive>
</div>
</div>
Now I have two problems:
When the page is loaded, all the directive templates are automatically loaded. Even if I don't have a PDF in the menu, the pdf template and scripts will be loaded.
Searching for it, I learned that directives should be tiny, not entire modules of my app.
How do I rewrite the switch above so I can comply with the best practices and load the templates and scripts only when needed?
This is exactly what UI-Router is for: Angular UI Router
Decent tutorial on scotch.io
An easier drop-in replacement for your code may be to simply use ng-if. Ng-if won't instantiate the directive until it's called. Just make sure that your directives aren't transcluding the outer div- if that's the case, shut transclusion off, or add another div to wrap them.
<div class="content">
<div ng-if="content.contentType=='video'">
<videoplayer-directive video="content"></videoplayer-directive>
</div>
<div ng-if="content.contentType=='pdf'">
<pdfreader-directive pdf="content"></pdfreader-directive>
</div>
<div ng-if="content.contentType=='...'">
<...-directive content="content"></...-directive>
</div>
</div>
I make a simple demo in angular js to call service .Actually I am not able to display my image in my list .
First check my web service url
http://timesofindia.indiatimes.com/feeds/newsdefaultfeeds.cms?feedtype=sjson
I call web service using display web security like that on macc
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --allow-file-access-from-files --allow-file-access --user-data-dir=~/chrome-test/ spec/runner.html
on desktop :
--disable -websecurity
I am able to call service but my image is not display on list here is my code on code pen
http://codepen.io/anon/pen/qdPoYN
<div class="list" ng-repeat="d in data">
<a class="item item-thumbnail-left" href="#">
<img src={{d.image.Thumb}}>
<h2>{{d.HeadLine}}</h2>
<p>{{d.DateLine}}</p>
</a>
</div>
</div>
Use ng-src:
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
<img ng-src={{d.image.Thumb}}>
// ^^^
Replace with this
<img ng-src="d.image.Thumb">