Develop Reference

Javascript code in main body is not working with angular template

I have designed an htm page which has javascript and all has worked well,
but when I tried to put some of the div sections of the page inside a template which would be read by
angularjs application all the element which require javascript to display properly were not working
properly or displaying the element properly.
I later discorvered that angular has its own jquery etc. But the problem is that I am using some
elements which are not custom made and making changes to the code may make the whole program fail.
What can I do to get all the sections to work properly?
This is the angular section
var app = angular.module("app",[]);
app.controller("controls",["$scope", function($scope){
}]);
app.directive("myTemplate", function(){
return{
templateUrl: "template_file_with_div_section.htm"
};
});
HTM SECTION
<div ng-controller="controls">
<div my-template></div>
</div>
Some of the sections are using datatable etc
some the scripts i am using are
<script src="angular/angular.js"></script>
1. jquery.min.js
2. tables/jquery-datatable.js
3. jquery-datatable/jquery.dataTables.js
4. jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js
5. jquery-datatable/extensions/export/dataTables.buttons.min.js
there are over fifty different jquery scripts
UPDATE
When i enter the template's url through http://url/#template_name
The template shows up in the web page so it shows that it works fine but there are sections within the template which would perform some operations (e.g. sorting etc) this sections relies on javascript which are in the main page.
These are the sections which are not working at all.
When I put the angular script after the table script. The template did not show up,
But when I put the angular script after the table script as shown above, the template showed up but the script where not working at all

It is little hard to guess what is exactly happening.
But, here are some things that you might want to consider:
Make sure you have defined ng-app in your HTML.
Also, the other part of the application (like you are saying sections) should come under your ng-app.
Make sure that all your scripts are added and loaded properly.
Each page has binding to certain controller or directive with appropriate template URL.
Hope that helps!

When I change router-link not working jquery plugins, but when I refresh it's working

I have SPA with Laravel and I have main.js file and I set up this file in my main.blade.php file and I write some code in main.js with jquery plugins. Problem is when I change vue-router not working this plugins so main.js file, but when I refresh page everything is fine working.Any idea?

I have a similar issue with angular with using jquery plugins. As vue and angular are SPA(Single Page Application).
The reasoning for this is when the whole document loads, jquery onDocument.ready() will then kick off - enabling event handlers to listen and attached to HTML DOMs.
Using SPA Routers to navigate through your application will not load again everything. So jquery cannot attach listeners to your newly rendered views.
Find a way to manually initialize those jquery plugins.

Run angular 2 app inside a non-angular app

I bought a layout to build a web app and then I made a specific part in angular 2. In this web app all the styles come from css files that came with the layout, but, when I add to a page and try to bootstrap my angular application, it disables all the styles and script in the page. What can I do to make angular to run without messing the styles and scripts that are out of the application?
I'm sorry if I was not so clear.

Without some more details, I'm not entirely sure. I don't believe Angular.js makes any CSS or styling changes on its own. I would also try to move your bootstrap CSS link above your layout. When your layout css file loads it will overwrite bootstrap's CSS. Thought I am not certain how much of Bootstrap's Javascript will overwrite.

I was using twitter bootstrap within my angular project and in my non-angular page I was using too, so, angular was changing all the page style by the twitter bootstrap built in it and all the styles was being missing. After removing the twitter bootstrap built in my angular app, everything became fine now.

jQuery thumbnail grid in AngularJS

I'm attempting to use a thumbnail grid in my AngularJS application. I've set up a directive for the HTML template part, but am having trouble initializing the jQuery part that expands a tile on click.
I know this is a typical issue when attempting to use jQuery in Angular apps. The jQuery script is very simple, I just don't know how to make it work in Angular. The script:
<script>
$(function() {
Grid.init();
});
</script>
Thanks for any advice/help!
Edit:
Page is here: tinyurl.com/jgbrpd6. As you can see, if you click on one of the elements, nothing happens because the jQuery script is located in the HTML of the templateUrl file.
templateUrl file is here: tinyurl.com/zr9ylqf. As you can see, if you click on one of the elements, it behaves as expected, becuase it is now outside of the AngularJS app.

Angular JS not working in subpages

I have a HTML page that works as a container of different HTML sub-pages/Usercontrols.
I use Ajax get of jquery to load the HTML of the sub page in the container page.
I am using a angular js directive in one of the sub pages.
The angular js directive is not working in the sub page and the potential issue can be that my anguarl js is firing before the HTML of the subpage gets loaded into the container page. And thats why angular js dont see the directive in the subpage it needs to process.
Is there a way to delay the execution of the angular js until subpage gets loaded.

I agree with #m59's assessment, but if you are unable to follow that route you will need to use the manual bootstrapping see manual initialization