Develop Reference

How to load angularjs "ng-app" dynamically using javascript?

I created an web application in javascript and jQuery. Rendered dynamic html page using jQuery .load() method.
File home.html, included angularjs.min.js file. This page having one button "loadUsers". On click handler of the button loading "userList.html" file in a container ("#userContainer") same page.
The userList.html sample content is like below,
<div ng-app>
Enter Your Name: <input type="text" ng-model="txtName" /> <br />
Hello {{txtName}}
On input, the value is not binding with model. Angular is not applied for dynamically loaded template.
Any one guide me how to achieve this?

The AngularJS framework scans the DOM for the ng-app directive at DOMContentLoaded. If the directive is added later (say after an .ajax call), the directive is ignored.
Any apps added to the DOM after DOMContentLoaded need to be manually bootstrapped:
angular.bootstrap(document, ['myNgApp']);
For more information, see
AngularJS Developer Guide - Bootstrap
AngularJS angular.bootstrap Function API Reference
AngularJS and jQuery can live together if done wisely. In fact the AngularJS framework will use jQuery internally if the jQuery library is loaded before the AngularJS library.
For more information, see
- AngularJS angular.element Function API Reference.

The main question is:
Why do you need to use jquery and angular together?!
I think you can move the ng-app to body or html tag. When the content is loaded use $compile service to append $scope to your view. (angular 1.7)

Place script inside template in AngularJS 2

I should insert a script tag quite long inside a template in AngularJS 2? is it a a good idea to put a script inside a template in AngularJS 2? Where should I put? Basically it is just a script that load a map https://developers.arcgis.com/javascript/jssamples/search_basic.html

Script tags in templates are just removed by Angular. You can dynamically create and add one after the view is created or add it to the entry page.
There is already a similar question answered but I don't have the time just yet to look it up.
See also https://stackoverflow.com/a/38090157/217408

Angular 1.4: Add directives dynamically to markup

I have a web application thats written mostly in Jquery, that is essentially a dashboard that a user can add any number of custom widgets to. I have the users currently added widgets, so when its loaded up I masically append each widget to the DOM. I want to work on converting this to an Angular application however im stumbling on one major issue.
1)I can recreate each widget as a directive, that will work nicely. However what I'm struggling with is how to add each widget that a user has setup on load. My first attempt at solving this was to create a generic widget directive, and doing an ng-repeat, and dynamically assigning the widget its controller/templateUrl.
In theory this seems great however I ran into some issues with not being able to dynamically pass the controller name via attribute. if I hard coded a string value it would work, but wouldnt a data-bound attribute in the ng-repeat. Example below does not work.
<quidget ng-dynamic-controller="quidget.QuidgetName" ng-repeat="quidget in tab.quidgets track by $index"></quidget>
if instead of quidget.QuidgetName I passed in the actual name of the controller, it would work...like so
<quidget ng-dynamic-controller="quidget1Controller" ng-repeat="quidget in tab.quidgets track by $index"></quidget>
Does anyone have any insight on how I can go about accomplishing this?

Instead of passing the controller name dynamically to the directive you can define the name of the controller in the template of that widget (this is assuming that every widget has a different template). For example you just pass the widget name to the controller:
<quidget ng-repeat="quidget in quidgets" name="quidget.name">
Next, in your quidget directive's template you conditionally load the template based on the name of the widget, some thing like this:
<div ng-switch on="name">
<div ng-switch-when="widget1" >
<ng-include src="'widget1.html'"></ng-include>
</div>
<div ng-switch-when="widget2" >
<ng-include src="'widget2.html'"></ng-include>
</div>
</div>
and inside each widget's template you define the Controller name like this:
<p ng-controller="widget1Ctrl">This is widget1.</p>
Here is a working plunker that illustrates the whole idea: http://plnkr.co/edit/dBqHRqChy17U8pFI9PXH
I know it's kind of a messy solution and I am pretty sure this can be accomplished in a much simpler manner.

Using add-hoc angular directive in an external html

This should be simple but I can't get it done right.
I have some custom angular directives working just fine, and I'm intended to use some in a external (other domain/server/port) html.
First, I included scripts from the working directives webapp:
<script
data-main="http://localhost:9000/vassets/javascripts/main.js"
src="http://localhost:9000/vassets/lib/requirejs/require.js">
</script>
Then I just tried to use one of them in the external html:
<div custom-directive attrib="abcd"></div>
Problem is template associated with directive cant be loaded, since it is declared as:
templateUrl: '/vassets/partials/customDirective.html'
And of course can't be found when external html is loaded.
There are alse issues regarding cross site.
It is clear that I'm not including external directives (and importing its source) correctly.

One thing which can be done is in the directives, instead of referencing to an external template, you can place the template inside the directive itself. Like:
template: '<div>Template here</div>'
Now when you export your directive file to a new app you will have no worries in exporting its template file as well.
Alternatively, you can keep your existing scenario and place the template in the location where the directive is looking for it.

Angular directive on generated HTML

I'm working on an existing website that currently use jQuery and PHP.
On a page, HTML code is generated by jQuery AJAX calling PHP code.
How would one add angular directives to this HTML code ?
For example, the PHP code generates :
<div class="testDiv">click me</div>
I would like :
<div class="testDiv" ng-click="angularFunction()">click me</div>
As I understand it, angular directives need to be compiled using $compile.
Is there a function like jQuery's "on" function I can use ?
Thanks

In that case, yes use $compile. If you want to learn angular forget the way you do things in jquery. If you try to mimic jquery that most likely will be wrong. That's why they call it the angular way.