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.
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.
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.
Relatively new to WordPress development. I am creating a new custom theme from scratch and would really like to just write vanilla javaScript without slowing things down with all the bloat of jQuery. I was thinking I could just simply dequeue jQuery.
Would this break anything behind the scenes for WordPress to function or is there no dependency?
jQuery is unlikely to slow you down as it's simply a bunch of optimized DOM selectors/DOM methods/utility functions.
You should be able to proceed with Vanilla JS unless any plugin or library you are using depend on it.
Yes, in theory jQuery will add to the download, but not as much as you think. jQuery gets loaded once if you set cache properly, all following pageloadfs, jQuery gets laoded from cache. If you use a CDN like Google's, big chances that your visitor already has it cached because they loaded it on another page. The parts of jQuery which you don't use, don't activate, they're smart like that.
Also, jQuery fixes some cross browser behaviour which you don't need to worry about and it offers a lot of functionality makes things a whole lot simpler, allowing you to focus on more interesting stuff.
TL;DR: jQuery will save you a much time building code, with(imo) a very minor cost. I do recommend using native JS when relevant, e.g. when you want a href of a clicked anchor: this.href.
Another way is to use the WP-JSON API plugin (comes with WP since 3.7 i think) and build your WP-site as a SPA using React/Vue/Angular/Whatever.
If you choose to go that route you wont have any bloat caused by anything but yourself. Always test your code. I personally like Vue.js, proper open-source framework, works like a charm for WP-development
Check this link out: https://snipcart.com/blog/reactjs-wordpress-rest-api-example
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.
I just wondering what is the technique of creating a single page website by using javascript without using framework like ember js / angular js.
For example in php like they can get
example.com?view=homepage
Can easily get the view and load/display homepage and load homepage's content.
What if in javascript if want to load another page/content?Any technique for building it?
I just building with a simple function like
$("#otherpage").hide();
$("#homepage").show();
I don't know is it the best way to develop a javascript single website page with this way?Or any technique that you all can suggest, cause I need learn from basic, need use javascript to explore and create a single app page without php.
Thanks lot
If it was that easy, do you really think Ember, Spine and Angular would be that widely used?
Snarky comment aside, building a page that refreshes like what you've done, while simple and rather easy to modify, falls very short on quite a few things:
For sites larger than a couple of pages, your HTML markup will become MASSIVE. Not just that, but you'll have to run every single piece of code on every page...per page. Say hi to insane overhead, both on bandwidth and on server-side processing, even with caching.
If you want to dynamically update part of a page, you'll need to use AJAX anyway. Why would it suck to write stuff using an MVC approach from the get-go, rendering data as you go along with AJAX, rather than brute-feeding the entire DOM?
What is the problem with Angular, anyway? Widely used, bug-free, unit-tested, built by reliable people, and if a bug does go through, you can be sure that the community will fix it quicker than you could
If the last comment didn't dissuade you from building your own to replace an already-existing platform, I would strongly recommend you build your JS to be fed data (JSON or otherwise) from your server and to dynamically update the page. You might not want the full-blown MVC approach, but at least the MV part of it. This will also allow modularity.