jQuery doesnt work with AngularJS ng-route view - angularjs

I have four html pages that I want to inject in my index.html using AngularJS ngRoute.
I have a carousel on hairstyle.html and a photo zoom-in jquery on salon.html, both do not work on angularjs route.
How do I make my jquery code work on AngularJS ngRoute view?
Here is the link to my codes: https://embed.plnkr.co/wyoVtQ/

Related

Use Ng Quill in AngularJs project

I am trying to use ng-quill text editor in nested view (not the index.html) in AngularJs project.
Using Angular version 1.2.28.
Able to get ng quill on index.html page but not in other views.
https://github.com/rkmr039/Ng-Quill-example
Not getting any error either on welcome page or nested view

After angular.bootstrap in ts file the angularjs not rendering anything on the browser showing empty page

Well by following guide from one tutorial and https://angular.io/guide/upgrade
I manage to make angularjs bootstrap by using this
angular.bootstrap(document.body, ['heroApp'], { strictDi: true });
i am working on mvc dotnet web application
problem is that after putting that code in app.module.ts file and removing ng-app from html index page.
nothing is loading on the page. empty page. nothing load from angularjs directive and angularjs file.
help me to figure out this.
Thanks in advance
After this i will upgrade angularjs to angular 4 after making this bootstrap
app.module.ts is Angular 2+ related but
angular.bootstrap(document.body, ['heroApp'], { strictDi: true });
is AngularJs related
so you can't combine the 2 methods
there is no straight way to upgrade from agnularjs to angular because angularjs is mvc ES5 framework but angular is component oriented ES6 framewok

how to use angular directives inside angular 1.5 components

How can I use an angular directive inside my angular 1.5 component. I have a angular-ui bootstrap tooltip that I want to use in my angular 1.5 component. Everything is working fine except that I pass is not displaying inside the tooltip.

Angular templates grunt not loading

I have AngularJS project with more than 20 html templates (routes, modals).
I'm using grunt-angular-templates to split tempaltes in one file templates.js.
In my Angular project I'm using angular-route 1.2.25 for routing.
When I try to use template from templates.js file, browser crashes and not responding. There is any error on console.
The problem is only with html templates with Angular stuff (ng-switch, ng-show etc.)
When I load clean html it works.
I thing the problem is with compile the templates from $templateCache, but how o manage it?
Templates.js
...
$templateCache.put("name","HTML");
...
After long hours of search I found what's wrong.
In my solution I'm using Modal Boostrap for Angular.
grunt-angular-templates plugin don't compile this templates correctly. I just skip this files and all works.

How to ignore specific links from routing?

I am using Angular 1.3.14 with Angular Route.
Now, I have some specific links like this one:
<a target="_self" ng-href="#next" role="menuitem">Next</a>
And on this link there is a jQuery plugin attached, that opens/closes the accordion. Now currently, it just takes AngularJS routing into effect and redirects me to /#next. How can I disable that ?
I have tried setting target="_self", but no luck.

Resources