Develop Reference

Products page powered by AngularJs visualization problem

I am using AngularJS alot in my projects most likely at Admin Panel or non public sides. But I'll need to use AngularJs in products page for a public web site.
Here the problem comes in ;
The page is loading pretty fast but for a millisecond I'm seeing some AngularJS tags, code also the product's html template/structure. For an example let's say I am seeing the codes below in products page;
{{product.name}} ({{product.count}})
these codes are flashing for second and page starts working as expected.
I have tried to use ng-if, ng-show, ng-hide to prevent this flashing effect at start but it worked.
I would realy glad if found a solution to this problem.
btw, I am using AngularJs 1.6.9 version

You should try to use ng-cloak directive on the elements that have tags flickering issue, e.g:
<p ng-cloak>{{ someValue }}</p>
It's purpose is to prevent AngularJS uncompiled templates from being displayed, therefore it should address your issue.

Mysterious div being appended to hyperlinks

We run a Ruby on Rails 3.2 web application that uses a standard mix of rails and jquery.
Recently, we noticed a strange div element appearing in our production code. It seems to only show up when we render views with strings that also contain hyperlinks.
Here's an example:
We have a string in our view, that we want rendered as HTML:
"Try to search <a href='/search?q=hiring'>hiring</a>"
When we render the page in production though, we get the following:
"Try to search <a href="azarvuttcexyytzq.html" id="qqqqtra" rel="file">trufarwdstrzyzdyw</div>."
We're not sure why but the following div is being appended to our link:
<div style="display: none;">trufarwdstrzyzdyw</div>
What's strange is that we don't think that the file azarvuttcexyytzq.html exists on our servers, and we also found out that "file" is not an acceptable rel value for a hyperlink's relation attribute.
So, where could the div be coming from?
One thought is that it is coming from some analytics library in our system, since we're using Google Analytics. But we can't seem to confirm that idea or rule it out.
Does anyone know of a library that causes behavior like this?
Any help or insight would be appreciated.

If there is no developer who has done this (intentionally or otherwise) by appending a div with a random hyperlink in your application, then there is a high probability that your application server, some library or a gem you are using is compromised. It would be good to do an audit of your code/server and ensure that you are using the original version of all the gems and libraries and no malicious code is otherwise included in your app code.

We had the exact same issue, although intermittently, and it was Distil networks injecting in our case. To verify we took Distil out for the site and it worked like a charm!
Although, have yet to find how to get it working with Distil, will update the answer if/when we do

We had the same issue, our application behind Distil as well as in other comments.
If you use Distil, read this:
https://help.distilnetworks.com/hc/en-us/articles/235705127-Optimizing-Honeypot-Links-for-Pages-with-Inline-JavaScript
In short: Add the following comment near the top of your page (and above the JS) to force Distil injection to happen there: </a> -–> You can also add any other custom, a unique comment which Distil could use to inject the honeypot link code into.

Is Angular usable in Content Script

I have a Google Chrome extension that injects a content script on given page of a site. This content script replaces the action bound to a button. When the button is clicked, some HTML elements are added (a foundation popup). I want to use Angular to manage the popup I add to the page. Can I do this ?
Here is sample HTML code that could be added when the button is clicked.
<div ng-app="MyApp">
<div ng-controller="MyCtrl as ctrl">
<p> {{ctrl.sayHello()}} </p>
</div>
</div>
Will this work? (I haven't gotten it to work yet, but I'm still trying) If it works, what if the page already contains another Angular app?
After my HTML insertion, the HTML might look something like:
<html ng-app="PageApp">
<body ng-controller="PageCtrl">
...
...
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
...
</div>
</div>
</body>
</html>
Edit: I have found angular.bootstrap(). So I can launch an Angular module on a given DOM element (my div). I think it could be a good solution. Can I still use it if Angular has already tried to load an ng-app directive and failed? Because it will certainly happen when injecting Angular code, and trying to load a PageApp that is not defined for me.

What #estus is saying is correct, and answered your question. Your code will not work, since "[you] can't have nested Angular apps", in other words an Angular app cannot have another Angular app inside of it, regardless of whether you have access to the source (which you probably do, since you're injecting code).
Suggestions
More radical, but note that most, if not all of AngularJS's functionality can be ported to vanilla JavaScript quite easily, if you ignore the attribute binding. You might have to write more specific and manual code, but this would cut any Angular-related problems out of the picture.
There is a hackish workaround that may allow you to nest some Angular apps, but this also requires access to the source of the page in which you're injecting the code, and some crazy DOM searching and manipulation, which may not be too efficient.

How to build a widget to embed in third-party websites using AngularJs?

I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.

You should also keep in mind the possibility that the 3rd party website also uses angular,
and potentially a different version.
Check Multiple versions of AngularJS in one page

This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.

How to Write JavaScript for Templated Markup?

I'm a little stuck on this.
I've been assigned changes to make to an ASP.NET project. The WebForm I'm working on needs to dynamically display and hide controls in response to user actions.
So far, so good. My approach would be to create a little JavaScript. However, on this page, the markup is part of a template for a Telerik control (which I know nothing about). I'm not sure the ramifications of this. Can I still use JavaScript for templated markup?
I tried to insert some existing JavaScript in the page. The first problem I have is my use of <%= ControlName.ClientID %>, which produces an error because the name of the control in the template is not seen to exist by ASP.NET.
Is there another way to do this, or am I just going to run into more problems?

For template controls like repeater you should hook up the javascript from isnide the itembound event. Get the control using FindControl for each row and then register the javascript from code behind. I believe your telerik control should expose something similar to the itembound event that get called for every row..