NOTE: My question is identical to the unanswered question: Angular schema SEO.
My question is more of a search engine question than an angular question.
Basically this question asks: do search engine bots hang around your webpage for a second or two while some client-side js library (such as angular) re-constructs the dom and then read the completed dom, as angular does during the compile phases when handling ng-repeat directives.
<div itemscope
itemtype = "http://schema.org/Movie"
>
<span ng-repeat = "movie in movies"
itemprop = "name"
>
{{movie}}
</span>
</div>
So will google bot ever read every itemprop=name for every movie generated by this ng-repeat?
I have found schema validator which, for my site (which is unrelated to the example html above), actually still shows the angular expressions:
...
datePublished {{lvl_project['year']}}
name "{{lvl_project['title']}}"
keywords {{lvl_project['tools'].join(',')}}
...
Furthermore, it did not show the ng-repeat-generated elements.
This seems to me like a strong indicator that the google-bot did not see the angular-generated elements and their values, but there could be more to the issue that I don't know.
Related
This is my first post here, usually I can find what I’m looking for before I ask but, if I missed the same question/answer elsewhere sorry. Anyway this is what I have.
I’m working on an Angular project where we have multiple directives not defined on a single DOM like this below(not exactly but a good example)
<div class=”Directive-holder”>
<div Directive-1 ng-show="showDirective1"></div>
<div Directive-2 ng-show="showDirective2"></div>
<div Directive-3 ng-show="showDirective3"></div>
<div Directive-4 ng-show="showDirective5"></div>
(Multiple more below)
</div>
Now when I run the project I need these to load in order
Directive-1
Directive-2
Directive-3
Directive-4
But when they run they run random every reload is there a way to set the order of these to stay 1-4 on every load?
It looks like priority: 0, only work on multiple directives defined on a single DOM,
I have a
<div ng-repeat="post in getServerPosts()" >
where i ng-bind post.title and post.excerpt. Posts also have unique a post.id but it is not shown (which is what I want since I don't bind it).
I am trying to find a way to allow the user to mark a post by somehow utilizing the post.id. That way, if a user marks a post it will automatically be marked next time the ng-repeat runs (every time the page loads).
I have played around with scopes in the controller but I can't figure out how to handle the post.id this way.
Question is probably beyond newbie level and maybe there are smarter ways to do this. Any hint or advice?
The issue is best illustrated in the plunker - http://plnkr.co/edit/9DYQ3rlmiMK9bdtjyYOA.
Basically, I am trying to create a meta form rendering engine using angular with the help of directives that handle interpretation of data runtime and render the fields accordingly.
Please let me know if you have any ideas why the dyn-ng-repeat directive is not rendering the three URL fields under the user object as expected in the code below -
<div dyn-ng-repeat="item in {{field.model}}">
<div ng-repeat="field in field.children" ng-include src="'field.html'">/div>
</div>
Thanks.
EDIT:
Hi guys, I have created a full Plunker here - http://plnkr.co/edit/cFreJZbluy3w4R9PZUCD?p=preview that should have all the code necessary but not working.
Basically, there is a hierarchy of objects. Social Networks have URLS and a list of Friends. The code is supposed to display three social networks and each should have two friends listed under them. The button 'Add Network' should add another social network to the list and the button 'Remove Network' should remove the respective network associated with it along with all its children. Similarly, 'Add Friend' should add a new friend object under that Social Network and 'Remove Friend' should remove the respective friend from under that network.
It's a bit complex, but if you look at it for a couple of minutes, you'll get the idea of what I'm trying to do here. It's dynamic DOM based on the data elements that are bound two way.
Thanks.
I've got an interesting question.
I have a VisualForce page with some Angular JS.
The problem is with the ng-repeat-end tag.
The HTML looks like this:
<span ng-repeat-end ng-if="$last" class="a nav__links__link" data-nav="control">You are here: {{breadcrumb.label}}</span>
VisualForce won't save with this error:
Attribute name "ng-repeat-end" associated with an element type "span" must be followed by the ' = ' character.
So I change the offending tag to this:
<span ng-repeat-end="" ng-if="$last" class="a nav__links__link" data-nav="control">You are here: {{breadcrumb.label}}</span>
Which makes VisualForce happy but Angular JS mad with this error:
Unterminated attribute, found 'ng-repeat-start' but no matching 'ng-repeat-end' found.
How can I satisfy both VisualForce's parser and AngularJS?
At the end of the day Visualforce needs a valid XML document. Try searching for "Angular + XHTML" I guess? I've found https://groups.google.com/forum/#!topic/angular/8iorDWKsMyI for example.
Will ng-repeat-end="ng-repeat-end" work? I remember that a trick with attr. name as attr. value is what's a perfectly fine workaround to convert for example <input type="checkbox" checked /> into valid XHTML.
SF themselves didn't include an example similar to what you're trying to do and I'm not familiar with AngularJS... It might be that they promote it but only for hybrid apps (where you could have local HTML file without the restrictions) or apps where you'd build your DOM from javascript, without having any skeleton in VF other than <script>s and <body>.
Last but not least - check what you can salvage from:
the "Mobile Pack": (looks like it's only VF sample in that directory),
http://www.oyecode.com/2013/06/getting-started-with-angularjs-on.html
Maybe contact the developers? All examples I can find seem to just "repeat" by creating a <table>, no <span>s...
I have an app that requires HTML to be pieced together from different APIs. Rather than getting into specifics there, let me just say that we have tried getting away from that many times but in the end the best answer always end up being what we currently have. Hopefully that changes someday but for now it's working great.
Currently, the HTML is parsed together as a string server-side using NodeJS and sent across the wire as complete HTML to be rendered. I'm in the process of adopting AngularJS, and while I'm loving it I am stuck on this issue-- how can I use Angular templating to insert invalid HTML at times?
The server will return three JSON fields: leadingHTML, trailingHTML, and copy. The copy field is always valid HTML, but leadingHTML and trailingHTML can sometimes return invalid HTML. When all three are added together, valid HTML results.
Let me illustrate:
leadingHTML='<figure>';
copy = '<img src="img1.jpg"/><img src="im2.jpg"/><figcaption>I love AngularJS</figcaption>';
trailingHTML='</figure>';
As you can see, if you add those together you will get the valid HTML that is required to be displayed. It's pretty easy to make the fields trustworthy HTML in Angular:
for (i in data.results){
data.results[i].copy=$sce.trustAsHtml(data.results[i].copy);
data.results[i].leadingHTML =$sce.trustAsHtml(data.results[i].leadingHTML );
data.results[i].trailingHTML =$sce.trustAsHtml(data.results[i].trailingHTML );
}
And then render the copy in my view:
<div ng-repeat='i in data.result'>
<p ng-bind-html='i.copy'></p>
</div>
But I need a way that does what this looks like it would do, but the leadingHTML and trailingHTML scope variables get render as strings:
<div ng-repeat='i in data.result'>
{{ i.leadingHTML }}
<p ng-bind-html='i.copy'></p>
{{ i.trailingHTML }}
</div>
Is the best answer here to build the template via javascript? Would that even work?
Are you able to pre-process your data so that you do have valid HTML?
var item;
for (i in data.results){
item = data.results[i];
item.content = $sce.trustAsHtml(item.leadingHTML + item.copy + item.trailingHTML);
}
Then you can just bind to the combined content in the view:
<div ng-repeat='i in data.results'>
<div ng-bind-html='i.content'></div>
</div>
Edit:
Yes, this will allow you to embed expressions in your HTML content.
In fact, you will need to be careful that you aren't opening yourself up to security exploits in the trusted HTML content (see the example at the bottom of the page for the $sce service).
Using $sce.trustAsHtml in this way is roughly equivalent to loading a directive's templateUrl from your site, so the security considerations around that are probably the same. See the "How does it work?" and
"Impact on loading templates".