How to upgrade angularjs with jquery to angular 9? - javascript

I have a project in angularjs and I want to upgrade this project to Angular9.
The problem is most of the project uses jQuery features such as query-ui, selectors, change the dom, animations, bootstrap and more.
Say it may only my problem since I do not want to use jQuery after the upgrade, just to do stuff in the angular way. so I guess to convert jQuery to angular.
I wonder if there is a way to do that? or I need to go manually and remove the jQuery code to new one?
I know I can import jQuery to my project, but sometimes I use $('#some').innerHtml('bla') and this is not what I want to do in my new code.
What are the ideas or approaches should I consider and use?

Related

How can I force old, compiled jquery plugins to use a specific version of jQuery in WordPress?

I have a client who had a very complex jQuery app custom built by a previous developer within his WordPress site. Its functionality is cleanly broken out into several scripts which get minified together with the libraries they depend on. The libraries rely on an old version of jQuery (3.3.1). The site is complex and we need to be able to use the current version of jQuery to allow other plugins we're using to continue to keep up with upgrades.
The libraries include c. 2018 versions of:
Select2
Isotope
SpriteSpin
EasyResponsiveTabs
ImagesUploaded
jQuery Viewport
Some of these are minified/uglified.
I've used best practices to load jQuery 3.3.1 into a variable jQuery3_3_1 with noconflict();
It's rather easy to change standard jQuery to use jQuery3_3_1. But I need a way to force the libraries to use jQuery3_3_1, otherwise they are not recognized by the scripts (and some of them will have issues using a different version of jQuery than they were built in). Most of these use requireJs(), and I've seen instructions for setting up requirejs.config() code in the footer that will define "jquery" to be a particular version. Doing this would be a great solution, but I have no idea how to get these uglified scripts to use it.
I've read through several similar inquiries, but none have addressed forcing a jQuery version on minified/uglified code. Others speak to a level of expertise in jQuery module development that I don't have and don't have time to scale into.
Is there a way to get all these modules that use require('jquery') to have that reference jQuery3_3_1? I'd love it if there were a way to say, "For all the files that live in this directory, jQuery/jquery (there are 2 ways it is called) means jQuery3_3_1/jquery3.3.1".
Or being that it's a Wordpress site, could this be defined in the wp_enqueue_script() call?
Many thanks for your help!

Editing a jQuery script so the new version has code I need to make a gallery work

I read a post answer that you can do search for the code I need from an old version of jQuery and copy it and paste it into a newer version jQuery script. This way I don't have to try and have two versions of jQuery to load at the same time which was unsuccessful. Both the jQuery scripts I have are .min
How do I do this? See the person's answer below
Why would you need two jQuery libraries anyway?! Just use the newer one! ... Let's even say you needed the old one because you need some functions that aren't available in the new framework. Just look them up in search mode and copy past them one by one to the new framework (can only be done if you use jQuery offline like me, which saves loading time during developpement cause it gets cached.) P.S: I hope this doesn't cause any copyrights infrigments.
Editing jquery is very bad practice, do it only for very small projects which maintenance won't have any work with jquery or component updates at all!
Better try using Jquery Noconflict library.

AngularJS2: Include JQuery into application

after a good hour of googling I still haven't found out how to properly include JQuery (or any normal JS file for that matter) into my AnuglarJS application, how would I go over this?
AngularJS provides jqLite, which is a jQuery-like library that provides a subset of jQuery functionality.But it doesnt work if you include jQuery in your app. You should check this out for how to integrating angular and jQuery
http://www.bennadel.com/blog/2752-using-jquery-instead-of-jqlite-in-angularjs.htm

Can we use jQueryUI and KendoUI at same time?

I have php app where jQueryUI library version 1.8.4. is already implemented with jquery library version 1.4.2. But as per new requirements I need to implement some modules in kendo UI library. So I installed stable version of kendoUI and integrated with my code base but it was giving me some issues so I updated my jquery version to latest stable version. Since then I am having jquery object conflicts. So I think problem is related with jqueryUI.
So can we use both jQueryUI and KendoUI libraries at same time in same page?
I am getting error like this - $.sub is not a function. kendo.data.HierarchicalDataSource is not a constructor
Please anyone tell me how to resolve this issue?
#All,
Thanks for your help guys. My issues gets resolved. Now I have point my js to udpated CDN server jquery js, jqueryUI js and kendoUI js. By doing this I got conflicts like .live is not working and all but I have resolved them by using their alternatives.
Thanks once again.
Kendo depends on jQuery! Therefore, yes you can have both of them at the same page. Different versions of Kendo depends on different versions of jQuery.
Latest Kendo (such as 2013.1.319) works with jQuery 1.9. Upgrading your jQuery from 1.8.4 to 1.9 is quite fun (follow http://jquery.com/upgrade-guide/1.9/). If you are using some 3rd party js plugins/libs what are based on 1.8.4 in your project you might need to upgrade them too.

How do I properly import jQuery plugins to Node.JS?

Background
I am new to Node.JS but very experienced with JavaScript and jQuery. I have had no problem installing jQuery via npm install jquery, however, referencing plugins within the code is another challenge.
I have reviewed this similar StackOverflow question, and the solution appears to work but it seems to me that instantiating a "fake" browser window and injecting your jQuery plugin-based functions each time you need the plugin is possibly not the most efficient approach.
The specific plugin that is failing for me linq.js (yes, I am aware that js linq is available via npm but it is not the same as linq.js!).
NOTE: The plugin to which I am referring does not rely on any DOM elements; in my case, it simply runs JSON objects through various data functions. This is why I don't think I need to instantiate a window object.
Question
How do I properly import and use jQuery plugins in a Node.JS application?
You can't do this. JQuery manipulates DOM on the client-side, which means that it has no business on the server-side where NodeJs runs.
You don't.
You don't use jQuery on the server, ever. It has no place there, you don't have a DOM on the server and jQuery itself is a mediocre library to start with.
If you really want to use a "jQuery plugin" in node, you rewrite the plugin as a standalone module without a jQuery dependency.
As an aside, you also shouldn't need linq.js because it's an API you don't need, you already have array methods. Also your coding C# in JavaScript rather then learning JavaScript.
You also have all the array methods (map, filter, reduce, etc) so you simply do not need this. If you really want some of the sugar linq.js offers use underscore instead. (I personally recommend for ES5 over underscore)
Please use ECMAScript correctly rather then emulating C#.

Categories

Resources