I read on the FAQs of Angular that "Angular can use jQuery if it's present in your app when the application is being bootstrapped".
My question is, is it a good practice or would there be any conflict or performance issue if a site contains jquery and angularjs scripts?
I plan to build a site that would contain both jquery and angularjs.
The reason for this is that I plan to use jquery mostly for plugins like carousel, slideshow, lightbox, calendar, form validation, etc. and angularjs will be mostly used for data binding. (mostly ajax request then bind it a table using ng-repeat, etc)
Do you think this is a good approach or should I just stick with only one (jquery or angular) to do all the process?
This is because I'm not sure how much plugins like carousel, slideshow, lightbox, etc. are available in angular and if I would be able to find such plugins that may be present in jquery but not in angular.
Thanks a lot!
From a technical point of view it is no problem to use AngularJS along with jQuery. In fact Angular itself contains a light version of jQuery: jqLite. So you never really use it completely without jQuery. For example basic selectors are always available. However, this is not sufficient for running your jQuery plugins.
From an architectural point of view, mixing jQuery and Angular can be confusing. Certain things can be done the "jQuery way" or the "Angular way" -- such as attaching a click handler to an element. If you include jQuery, you should be consistent with regard to these issues. I suggest you do it the Angular way (e.g. use ng-click in your templates instead of $(selector).on('click',...) in your directive's link function -- or even worse in services or elsewhere).
In your case it is justified to use both together. There are tons of great jQuery plugins and there isn't an Angular version for all of them yet. I would include jQuery only for those plugins and discipline myself not to use jQuery features apart from that.
So obviously, you'll get a hit from initial loading of your site, because not only will you be getting Angular scripts you'll also be calling for jQuery scripts.
There is no problem with you doing this, it is something you'll have to weigh up, pros and cons.
As for this:
The reason for this is that I plan to use jquery mostly for plugins
like carousel, slideshow, lightbox, calendar, form validation, etc.
and angularjs will be mostly used for data binding. (mostly ajax
request then bind it a table using ng-repeat, etc)
So with a bit of searching (ui bootstrap) you'll find that stuff like carousel, slideshow, lightbox, calendar can all be done with Angular Directives (Angular's way of interacting with the DOM). I created a massive widget drag and drop screen all with Angular - no jQuery. So what you can achieve is limitless* and is a lot easier to do with straight Angular because you're less likely to run into digest cycle issues.
Form validation what an interesting point, I believe this to be a pain point for most web developers for years. What is nice about Angular is this comes supported straight out of the box. And it is good (and symmantic). Take email validation for example:
<input type="email" ng-model="person.email" ng-required />
Angular will automatically regex this email to check it is valid. And it will also make sure there is a value. The power doesn't stop there. Like I said it is extensively supported out of the box.
The advice I can give you is, search google for Angular components, test them out before making your decision. But I can assure you that, I have done everything you're talking about purely in Angular.
But the joy of programming that it is entirely up to you!
* you imaginations the limit, angular will find ways to limit you..... etc. etc.
This is not recommended. BTW, jQlite is already included in Angular...
It is not a good practice to use jquery with an angular js.Angular consist of almost all the functionalities that you can get from jquery.
Although if you have some specific scenarios where you need the strongly type model binding of angular js and you want to use jquery for your other work then you can use both in a single project.
Related
I'm new to angular. Some forums and tutorials show how to integrate jquery plugins in angular. Actually there are plenty of jquery plugins. I used a lot of jquery plugin in my previous projects which were implemented only in jquery. So I would like to get that feel (colors,UI, animation...) into my angular 7 project. But in the middle, I'm worrying that some forums say "Don't mix jquery plugins with angular"
So may I import jquery plugins inside angular? Will it be a problem? For Eg : Datatable has a lot of function where I need most. Jquery Confirm Master gives a better UI. And there are a lot of API calls also. If I need to use these kind of jquery plugins, what can I do?
There are some core reasons you shouldn't access the DOM directly in Angular (as you do with Jquery). I answered a similar question here
Angular is a fully blown framework where you shouldn't differ from the 'Angular way'. There are several reasons for this. For one your code will become very complicated in the way it works. Some things you do in Jquery is very hideous compared to how simple you can implement the same thing with Angular. Another reason is that Angular applications are not always meant to be ran in a browser. For example you can run Angular in a web worker, which doesn't have direct access to the DOM. Your components will become dependent on Jquery when there is no need to, which might hurt you if you want to reuse those components in other Angular applications.
Your value point for sticking to Jquery is that you can reuse that code. To that I will say that you should rewrite those components for your Angular application so you can later reuse those components in other Angular applications. Modernize / rewrite your components now, so you have optimized clean Angular components. You will quickly find that your Jquery code is overly complicated compared to how you do similar things in the Angular framework.
Due to some architectural decisions, my team has decided to fallback to using Javascript without any framework dependencies (Angular or react).
I would now want to write custom components(that do the exact same thing as Angular's components: a selector that can be used in HTML with a scope & a controller to play with) with no dependencies on frameworks.
jQuery widgets is an option we thought of. But there's a dependency on jQuery :(
What's the best approach to proceed?
Does ES6 provide any ways to do this?
Angular is parsing the html and searching to match with the selectors.. before this, it parses your templates to generate dynamic code... and a lot more things under the hood.. so, no, you wont be able to create a custom html tag easily.
Maybe take a look at Polymer?
https://www.polymer-project.org/
Why bother creating something what is sucessfully done by a huge team of developers on your own? You will most likely fail.
But if you still want to try it, there's a thing called WebComponents, but it has very limited browser support at the moment. A better support would also lead to another library called Polymer.
Another lightweight library to create custom components is Vue.js.
Fyi: React isn't a framework.
Recently I decided to check out VueJS 2.0. Since I still mostly work with various CMS systems (Wordpress, TYPO3, OctoberCMS, that kind of stuff) I wanted to try and implement a pjax like page loading. To my suprise, it is not as simple as I thought.
Is there a way to replace parts of the page and reinitialize the components in VueJS?
I should probably explain why I want to implement such a feature. In the last years I found that it is much easier and quicker to develop feature rich websites using a frontend framework. However, since most customers need a backend to manage their websites, using an already existing CMS is a no brainer.
In the past I used Angular to build the frontend. It worked suprisingly well, even with pjax, since it is possible to reinitialize parts of the page in Angular 1.0.
Angular 2.0 took a different approach and while I absolutely love what they have done with it, I do not think it is suitable for use in an enviroment, where most of the frontend is being rendered by the server. That's why I decided to check out VueJS.
I want to implement a pjax-like feature, because the HTML already gets rendered on the serverside and dynamically replacing parts of the page just looks cool :)
EDIT
Just to be clear, I am not talking about the jQuery pjax plugin, just about dynamically replacing parts of the page (which in the company I worked for before was simply referred to as "pjax" :P)
Yes, you can absolutely do that. You can structure your one page view with multiple components, and you can just reload the data of one component which will update only that component, or you can also have conditions with v-if, so that you can change which components will render dynamically.
Sample fiddle: http://jsfiddle.net/mimani/6dgbg2dL/
Sample fiddle simulating ajax with setTimeout: http://jsfiddle.net/6dgbg2dL/1/
You can use vuex to communication between multiple components, check one sample here.
I used AJAX a lot.Its good not to reload a page ,just a part of page without even knowing to user.
I saw lots of sites using Angular JS and what i found common in them is :
1.All use AJAX stuff which is angular js based.
2.Most of the website didnt use reload method to open pages , it smoothly jumps from page 1 to 2.
My question is : Is Angular JS an alternative to traditional jQuery AJAX call & page navigation without reload ?
I didnt find this question answered anywhere.Thanks.
Its not really an alternative but a framework. Angular uses ajax like functionality and indeed contains a light jquery implementation within itself. It is a whole lot more though as its a MVC framework and amongst others some notable features are two way data binding, directives (adding features if you will to html) etc
No It is not. Actually, AngularJs is a framework suits for single page applications ans MVC design pattern and tries to include everything it needs in itself without using any other libraries. Along with AngularJs you can use other libraries such as jquery but in order to keep your codes clear and being maintained easily later, it's a good practice to work with angularjs functions.
I am currently developing an application where I need some richer elements. Some of these are searches live updating, adding checkboxes to arrays and the like.
I have successfully implemented this using AngularJS, but I am not really sure if it's good practice to use AngularJS on just a few pages.
Would it be better practice to use JQuery for this purpose, and does it go against the goal of AngularJS?
Yea the transition from AngularJS can be a difficult one. Of course, they can both be used side-by-side but it kinda defeats the purpose of Angular. I use to be big jQuery user but I've tried to stay as far away from it as I can when using Angular.
Sometimes I'll come across a problem and I'll think to myself "Wow this would be so simple to do in jQuery". But if I stick to Angular and use their philosophy, I find that the "Angular" solution is often the one that uses better coding practices.
TL;DR: AngularJS and jQuery work fine side-by-side but I recommend getting into the habit of using just Angular, as it will result in more organized, maintainable and understandable code.
They can be used together. The two libraries have different purposes. jQuery provides an alternate interface to the DOM that is more consistent across all the browsers, so you don't have to worry about various browser eccentricities. AngularJS is a framework that provides for such things like binding MVC-style objects on the client side.