I have this website (in Hebrew): http://www.iping.co.il (if you could have a look at it maybe with google translate and see what it does it could be great but not a must).
It basically a website that shows your IP, and gives you a set of tools (like ping, whois check, open port checks...).
I've built it a while back and I was using jQuery and jQuery UI to do all the work (like opening dialogs, call the server, change the DOM, show a progress bar...).
Now I'm working on rebuilding it - I'm rebuilding using ASP.NET MVC 5, HTML5 and Bootstrap3. I figured it's a great little website to test new things I've been reading about lately. And one of those things I would like to try and implement (after reading much about) is AngularJS.
As far as I know, AngularJS is not meant to change the DOM directly, but use directives and 2 way bindings to do so.
I have a lot of code, and plugins that I use that uses jQuery and jQuery UI to (for example the dialogs, the progress bar and so on... things that I haven't figured out how to do with AngularJS). It seems that if I use the jQueryUI progress bar and update it from from AngularJS that I'm breaking some rules here and that it's probably dirty and not the way it should be written.
So my question is, what is the correct way to work when and build a rich UI when using AngularJS? is jQuery and jQueryUI even still relevant? if so, is there a correct way to use them (maybe DI somehow?)?
I've searched and found something called AngularJS UI - but it's not as rich as jQueryUI.
Thank you
Using plugins within directives is fairly simple in concept.
<div my-directive></div>
Following is a very minimialistic directive with just enough code to initialize a plugin. The returned function is equivalent to link in a more defined directive
angular.module('myApp').directive('myDirective',function(/* dependencies*/){
/* element is a jQuery object when jQuery is included in page before angular.js*/
return function(scope,element,attrs){
/* can use attributes or scope to pass options to plugin if needed*/
element.someJqueryPlugin();
}
});
This would be equivalent to writing in jQuery only:
$(function(){
$('[my-directive]').someJqueryPlugin();
});
If you want to use AngularJS and Bootstrap I suggest you take a look at these directives:
http://angular-ui.github.io/bootstrap/
Once you load the modules, you can set up say a progress bar this way:
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>
You shouldn't even need to include JQuery if you only need the Bootstrap components.
Related
I'm trying to do it using a custom directive for that element and manipulate in the link function but I don't know how to proceed. Can we do it using pure javascript or any other library except jquery since people say 'no jquery in angular apps please' for some reason.
Found out Javascript has some inbuilt functions like .onscroll, .scrollY, .scroll which can be used to achieve the aforementioned functionality. I think a search into javascript in-built functions will get most of the stuff done before moving onto jquery.
I am under a scenario where I have to build a portal container in HTML5 and Javascript. This container will be provided with 'n' number of widget URLs and container is responsible to load them through Ajax in DIVs (not in iFrame).
Now the question is how to make the definitions of JavaScript functions of each widget, separate? For example, I have two DIVs on the container page, Widget1_DIV and Widget2_DIV. HTML, JS and CSS of Widget1 will be placed in Widget1_DIV and similarly for Widget2.
Now suppose both the widgets have a JS function with same name, 'foo', which will conflict once they are embedded in same DOM. I want to know that will RequireJS helps in avoiding the conflict or the right solution to make both widget's DIVs modular?
Thanks
Did you consider using any JS Framework? I recommend you AngularJS because of its functionality, MVC approach and flexibility. I know, that this requires a lot of work on the beginning of project life-cycle, but later certainly you observe advantages and robust page structure.
In addition, Angular JS allows you to preserve separated project structure:
- WidgetName
| - javascriptfile.js
| - widgetpage.html
| - javascriptfile_test.js
See more: https://angularjs.org/
Of course you don't need to use this specific framework, there are a lot of other fantastic tools: Knockout, Backbone, ... .
How about using a dashboard framework for that. This should make things easier.
For ex.:
http://dashing.io/
Right now, I am taking a look at Angularjs after spending sometime playing with twitter's bootstrap. I really like bootstrap because it's easy, sleek and very mobile-friendly. Now for angularjs, I see people recommending it instead of Jquery and going as far as in saying that, DO NOT USE JQUERY AT ALL and do everything on angularjs.
This question and answers helped to shape some of my beliefs and why I should move to angularjs than jquery.
How do I “think in AngularJS” if I have a jQuery background?
Accepted answer to this question ( which is very well-detailed!) goes like this on its overall summary:
Don't even use jQuery. Don't even include it. It will hold you back.
And when you come to a problem that you think you know how to solve in
jQuery already, before you reach for the $, try to think about how to
do it within the confines the AngularJS. If you don't know, ask! 19
times out of 20, the best way to do it doesn't need jQuery and to try
to solve it with jQuery results in more work for you.
Even the FAQs from angularjs website says not to use it Angularjs FAQs.
DOM Manipulation
Stop trying to use jQuery to modify the DOM in
controllers. Really. That includes adding elements, removing elements,
retrieving their contents, showing and hiding them. Use built-in
directives, or write your own where necessary, to do your DOM
manipulation. See below about duplicating functionality.
If you're struggling to break the habit, consider removing jQuery from
your app. Really. Angular has the $http service and powerful
directives that make it almost always unnecessary. Angular's bundled
jQLite has a handful of the features most commonly used in writing
Angular directives, especially binding to events.
The concept of angularjs seems tempting. In fact, who would not like abstracting away DOM manipulation logic? However, bootstrap makes it so much easy when you are designing web-pages but since bootstrap uses jquery, bootstrap and angularjs together means that the code and overall web-page is still dependent on jquery. Is this mixer completely undesirable? If so then, what is the best way to keep hanging to bootstrap while using angularjs? Simply saying, I don't care so much about jquery but I like bootstrap.
I might be talking in circles here so I will try to reword what I am saying in a single sentence.
What is the best way to use angularjs and bootstrap together without creating spaghetti code where one place is so jquery-based and next angularjs-based?Or is the idea of using bootstrap and angularjs together is conceptually against what angularjs was meant for?
When trying to integrate jQuery things in to Angular, the best approach is to wrap it in a directive. This is what Angular-Strap originally did, but the recent version upgrade to 2.0 completely removed those dependencies and does it all in Angular (and it is a much better product for having done so.) This is the same method that Angular-UI took from day 1 and that continues today.
When you do something like this, the biggest hurdle is trying to keep things "Angular-ized" when working with the DOM. The examples that both Angular-Strap and Angular-UI can provide if you look at the underlying code are very good and should give you the right direction.
we have a big ExtJS (still ExtJs 2) application, which provides windows explorer like functionality on a Java EE server.
We now evaluate implementing a new functionality; we could base this functionality on a jQuery plug in.
Is it recommended to use jQuery and ExtJs in one application?
Or will I have to deal with side effects occurring?
You will not have to deal with any side effect. The only problems I ever ran into when I did this is if I tried to operate on elements that Extjs relied on being left alone. Just make sure that when you start operating using jQuery that you're working inside a div that extjs doesn't plan to mess with. The best way to do this is to inherit from Ext.Component and then operate inside the div it provides. Ext doesn't do anything inside this div so you should be ok. You can also tap into the resize functionality if you need to, though this is not really necessary.
My company does so with no problems on a fairly large Apache/Catalyst site. We do use jQuery() rather than $() due to some old Prototype stuff on our site.
More: Blueprint CSS Extjs and JQuery in the same page, best way to make them coexist without conflict
keep jQuery within the jQuery namespace http://api.jquery.com/jQuery.noConflict/
Use it like so: $.noConflict();
jQuery only adds a single object (jQuery) to the window's context so you won't have any conflicts.
PROBLEM: Some third party libraries for jquery may rely on static webpage organization. As ExtJS components can be added to webpage dynamically - they will have no functions from third party libraries.
SOLUTION: You will have to run this library's script after component is added (use afterrender event, for example). Then you can call these functions on this ext component.
I'm about to implement a blog, and I'm pretty sure I want to go with jQuery, because I really like it.
However, when I last did jQuery, I just did plain HTML/CSS and then improved the user experience with what jQuery has to offer. Meanwhile, jQuery UI has been released, and it looks like a full-fledged user interface framework like Ext JS.
Can I benefit from jQuery UI with a rather simple website like this, or is it more geared towards web applications like GMail?
jQuery UI is quite large and seems to have lots and lots of CSS in their skins. I'm a bit worried that I would have to write/adjust tons of CSS to make the blog look like I want it to. If I did plain HTML/CSS, I would have fine-grained control over the appereance.
Edit: I'll stress again that I'm specifically wondering whether jQuery UI is intended for and useful for a simple website like a blog. It is no doubt useful for more sophisticated web applications.
Edit 2: Thanks for all your answers, too bad I couldn't accept more than one. By now I realised that jQuery UI is not like I expected a full-fledged web application framework, but rather a bunch of useful utilities on top of jQuery. I think I'll use it, if only for Draggable, Droppable and Selectable.
You don't necessarily need to write loads of CSS if you don't like the supplied styles.
The jQuery UI ThemeRoller is a very good web-based GUI for customising the look of the widgets. It then allows you to download your own customised (and minified) .css and .js files containing just the widgets you need.
I suggest that you should have a play with that first and see if you can make the demo widgets look how you'd like them before making any decision.
You can have both... I have! Where I am using widgets (datepicker) etc, I use jquery ui, besides visit : http://jqueryui.com/themeroller/ and you can customize the colours quite easily. The UI themes are recommended strongly if you use the widgets as the widgets rely on the css defined therein to move things around, for display and selection, handling rezise of widgets.
You can always build your site using html + css then add the ui theme later, as you said it will increase the user experience greatly... besides we always end up using 1 or 2 features then extend or find other suitable plugins.
As always, the answer is 'it depends'.
More specifically though, it depends on what kind of a UI you're planning on. If you find yourself coding functionality that's already there in jq UI go ahead and use it. They've got a handy theme roller plugin which will allow you to customize the skin to perfectly match the look of your site, so that is a non issue.
You might also want to include it all through a CDN (offered by google or MS) so that your site doesn't get slow downloading the (relatively) heavy initial payload.