We Keep Coding

How is AngularJS different from jQuery

I only know one js library and that is jQuery.
But my other coders in the group are changing AngularJS as their default library in new project.
I don't know anything about it. How is it different from jQuery?
I already have a set of functions done for similar tasks in jQuery. Can I still use jQuery stuff with AngularJS?

While Angular 1 was a framework, Angular 2 is a platform. (ref)
To developers, Angular2 provides some features beyond showing data on screen. For example, using angular2 cli tool can help you "pre-compile" your code and generate necessary javascript code (tree-shaking) to shrink the download size down to 35Kish.
Angular2 emulated Shadow DOM. (ref)
This opens a door for server rendering that can address SEO issue and work with Nativescript etc that don't work on browsers.
The official document site
Day one keynote from ng-conf 2016
Resource links
Original:
Basically, jQuery is a great tool for you to manipulate and control DOM elements.
If you only focus on DOM elements and no Data CRUD, like building a website not web application, jQuery is the one of the top tools. (You can use AngularJS for this purpose as well.)
AngularJS is a framework. It has following features
Two way data binding
MVW pattern (MVC-ish)
Template
Custom-directive (reusable components, custom markup)
REST-friendly
Deep Linking (set up a link for any dynamic page)
Form Validation
Server Communication
Localization
Dependency injection
Full testing environment (both unit, e2e)
check this presentation and this great introduction
Don't forget to read the official developer guide
Or learn it from these awesome video tutorials
If you want to watch more tutorial video, check out this post, Collection of best 60+ AngularJS tutorials.
You can use jQuery with AngularJS without any issue.
In fact, AngularJS uses jQuery lite in it, which is a great tool.
From FAQ
Does Angular use the jQuery library?
Yes, Angular can use jQuery if it's present in your app when the
application is being bootstrapped. If jQuery is not present in your
script path, Angular falls back to its own implementation of the
subset of jQuery that we call jQLite.
However, don't try to use jQuery to modify the DOM in AngularJS controllers, do it in your directives.
Update:
Angular2 is released. Here is a great list of resource for starters

I want to add something regarding AngularJS difference with jQuery from a developer's perspective.
In AngularJS you have to have a very structured view and approach on what you want to accomplish. It is scarcely following a linear fashion to complete a task, but rather, the exchanges between various objects take care of the requests and actions, which, then, is necessary as angular is an MVC-Based framework. It also requires an at least general blueprint of the finalized application, since coding depends much on how you want the interactions to be completed.
jQuery is like a free poetry, you write lines and keep some relations and momentum appropriate for your task to be accomplished.
Though, in Angular JS, you should follow some rules as well as keeping the momentum and relations proper, maybe it is more like classical Spencerian sonnet (a famous classical poet) whose poem is structural and tied to many rules.
Compared against AngularJS, jQuery is more like a collection of codes and functions (which is, as already mentioned, great for DOM manipulation and fast-effect achievement), while AngularJS is a real framework which gives the developer the ability to build an enterprise web-application with a lot of data-binding and exchange within a superbly organized-routing and management.
Furthermore, AngularJS has no dependency on jQuery to complete its task. It has two very superb features which are not found in jQuery in any sense:
1- Angular JS teaches you how to CODE and accomplish a goal, not just accomplish a goal by any means. Worth to mention that AngularJS fully utilizes the core and heart of Javascripts and paves the way for you to incorporate in your app, the techniques such as DI (dependency-injection). To work with angularJS you should (or must) learn more elevated techniques of coding with Javascript.
2- Angular JS is fully independent to handle directives and structure your app; you might then simply claim that jQuery can do the same (independence), but, indeed, AngularJS, as several times mentioned within the above lines, has independence in the most excellent possible structurally MVC-Based way.
A last note is that, there is no war of Names, since it is far disturbing to be biased, or subjective. jQuery's magnitude and greatness has been proved, but their usages and limitations( of any framework or software) are the concerns of the discussion and similar debates around.
Update:
Using AngularJS is decisive as it is expensive in terms of implementation, but founds a strong base for future expansion, transformation and maintenance of the application. AngularJS is for the New World of Web. It is targeted toward building applications which are characterized by their least resource consumption (loading only necessary resources from the server), fast response time and high degree of maintainability and extendability wrapped around a structured system.

AngularJS :
AngularJS is for developing heavy web applications. AngularJS can use jQuery if it’s present in the web-app when the application is being bootstrapped. If it's not present in the script path, then AngularJS falls back to its own implementation of the subset of jQuery.
JQuery :
jQuery is a small, fast, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler. jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
Read more details here: angularjs-vs-jquery

I think this is a very good chart describing the differences in short. A quick glance at it shows most of the differences.
One thing I would like to add is that, AngularJS can be made to follow the MVVM design pattern while jQuery does not follow any of the standard Object Oriented patterns.

They work at different levels.
The simplest way to view the difference, from a beginner perspective is that jQuery is essentially an abstract of JavaScript, so the way we design a page for JavaScript is pretty much how we will do it for jQuery. Start with the DOM then build a behavior layer on top of that. Not so with Angular.Js. The process really begins from the ground up, so the end result is the desired view.
With jQuery you do dom-manipulations, with Angular.Js you create whole web-applications.
jQuery was built to abstract away the various browser idiosyncracies, and work with the DOM without having to add IE6 checks and so on. Over time, it developed a nice, robust API which allowed us to do a lot of things, but at its core, it is meant for dealing with the DOM, finding elements, changing UI, and so on. Think of it as working directly with nuts and bolts.
Angular.Js was built as a layer on top of jQuery, to add MVC concepts to front end engineering. Instead of giving you APIs to work with DOM, Angular.Js gives you data-binding, templating, custom components (similar to jQuery UI, but declarative instead of triggering through JS) and a whole lot more. Think of it as working at a higher level, with components that you can hook together, instead of directly at the nuts and bolts level.
Additionally, Angular.Js gives you structures and concepts that apply to various projects, like Controllers, Services, and Directives. jQuery itself can be used in multiple (gazillion) ways to do the same thing. Thankfully, that is way less with Angular.Js, which makes it easier to get into and out of projects. It offers a sane way for multiple people to contribute to the same project, without having to relearn a system from scratch.
A short comparison can be this-
jQuery
Can be easily used by those who have proper knowledge on CSS selectors
It is a library used for DOM Manipulations
Has nothing to do with models
Easily manipulate the contents of a webpage
Apply styles to make UI more attractive
Easy DOM traversal
Effects and animation
Simple to make AJAX calls and
Utilities usability
don't have a two-way binding feature
becomes complex and difficult to maintain when the size of a project increases
Sometimes you have to write more code to achieve the same functionality as in Angular.Js
Angular.Js
It is an MVVM Framework
Used for creating SPA (Single Page Applications)
It has key features like routing, directives, two-way data binding, models, dependency injection, unit tests etc
is modular
Maintainable, when project size increases
is Fast
Two-Way data binding
REST friendly
MVC-based Pattern
Deep Linking
Templating
Build-in form Validation
Dependency Injection
Localization
Full Testing Environment
Server Communication
And much more
Think this helps.
More can be found-
jQuery vs. AngularJS: A Comparison and Migration Walkthrough
"Thinking in AngularJS" if I have a jQuery background?
What are the key differences between jQuery and AngularJS?
jQuery Vs AngularJS – A Good Comparison
What is the difference between jQuery and AngularJS?

Jquery :-
jQuery is a lightweight and feature-rich JavaScript Library that helps web developers
by simplifying the usage of client-side scripting for web applications using JavaScript.
It extensively simplifies using JavaScript on a website and it’s lightweight as well as fast.
So, using jQuery, we can:
easily manipulate the contents of a webpage
apply styles to make UI more attractive
easy DOM traversal
effects and animation
simple to make AJAX calls and
utilities and much more…
AngularJS :-
AngularJS is a product by none other the Search Engine Giant Google and it’s an open source
MVC-based framework(considered to be the best and only next generation framework). AngularJS
is a great tool for building highly rich client-side web applications.
As being a framework, it dictates us to follow some rules and a structured approach. It’s
not just a JavaScript library but a framework that is perfectly designed (framework tools
are designed to work together in a truly interconnected way).
In comparison of features jQuery Vs AngularJS, AngularJS simply offers more features:
Two-Way data binding
REST friendly
MVC-based Pattern
Deep Linking
Template
Form Validation
Dependency Injection
Localization
Full Testing Environment
Server Communication

SproutCore: SC.TableView alternatives

I am working on a project based on SproutCore 1.8. My app has to display lots of data in a sophisticated table view. In fact, the table view will be one of the central elements of the app's interface. Also, I will probably need an outline/tree view, allowing me to display hierarchical data in a table view-like interface component.
I initially tried using SC.TableView, but this seems to be deprecated as of v1.6 of the SproutCore framework. I got a console output suggesting to use a community tableview, but didn't find that much.
I found some hints in the SC Google Groups suggesting that one should consider using SlickGrid and that someone wrote a small SproutCore wrapper around SlickGrid which you could plug into your SproutCore app. I have to admit, I didn't try this yet.
However, as my app is not a big experiment and I am not really willing to put much effort into standard UI components that I expect being readily available in a sophisticated UI framework, I would like to ask whether there is any solution that is reliable and works 'out of the box' in the SproutCore framework?

However, as my app is not a big experiment and I am not really willing to put much effort into standard UI components that I expect being readily available in a sophisticated UI framework, I would like to ask whether there is any solution that is reliable and works 'out of the box' in the SproutCore framework?
Unfortunately, the short answer is no. Sproutcore is a good framework with a lot of advantageous, but the honest truth is there is no good table view that works out of the box.
Your best option is to use SlickGrig as suggested on the google groups. If that external library meets all of your needs, its not too difficult to get it working with SC. You would create an SC.View. Implement the didAppendToDocument method and in it initialize slick grid according to its instructions. From there, use SC.Event.add to listen for events on the slick grid dom, and in your handlers invoke your app logic. Be sure to wrap in an SC.run(function(){...}) so you get a runloop. So basically, you are writing a view which proxies a slick grid instance. The biggest challenges you will face are browser computability issues, keeping SC representation of the data in sync with SG's internal representation (for sorting and whatnot), and if you intend to leverage a lot of SG's functionality, it can be a bit of code.
Another option would be to roll your own grid. But that's a lot more work.
Really, if the SG path seems too difficult, practically speaking, you are better off going with a framework which has a grid.

which is the most suitable javascript widget libraries for a measurement reporting web application?

I am starting a new web application for reporting measurements to engineers. The main components I need are:
grids
charts
maps
I have investigated the following javascript solutions:
ext js
dojo
jquery
Dojo seems to be a good all-in-one solution but I am wondering why it is not widely used?
Which widget libraries are suggested for each one of these components(grids. maps, charts) ?

It typically depends on the nature of your application - is it intranet/enterprise or consumer?
High traffic, global websites have a different set of requirements compared to enterprise/intranet based apps, specially from a performance and footprint angle.
Assuming yours is an enterprise/non-consumer-market app, both extjs and Dojo will do well given that you want datagrids and charts
THey are similar in their approach to widgets (separation of data and view, encapsulation, widget classes, inheritance etc).
I suggest looking at the dojo nightly tests and extjs demos to ensure the library you choose has the features you need. Dojo nightly and demos: http://archive.dojotoolkit.org/nightly/dojotoolkit/
extjs: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/
extjs is commercially licensed (so it is somewhat more polished) whereas Dojo is full open-source driven by community effort.
Dojo is actively being evolved though and dojo 1.7 has some nice enhancements like AMD
While there is lot of documentation for Dojo, you should be ready to look at multiple places to get answers - dojocampus, docs, nightly tests, widget source code, and of course, stackoverflow :-) - I have found it fun to learn the whole system and also contribute back to the community, the good thing is the widget system is extensible with many extension points, so you can override and customize what you want.
We use Dojo extensively in many departments in my large enterprise company and it has proved to be a good overall solution. Dojo is also backed and supported by IBM. Also, Sitepen offers commercial support for Dojo and has key dojo committers on its team.
JQuery is great for doing DOM manipulations, transitions etc and is lightweight and fast. Jquery UI offers widgets and there are lot of plugins available - but you will need to figure out the licensing model as plugins are typically separately licensed and also be willing to thoroughly test and modify them/create new plugins/widgets to ensure they fit your need.

http://square.github.com/crossfilter/
Maybe this one? It just went open source some weeks ago.

Another free JavaScript libraries you could use :
Paper.js
Raphael.js
Both of them should provide enough functionnalities for your needs.

How to write a modular JavaScript application?

I am planning to rewrite an existing Silverlight application using HTML, JavaScript and CSS. This will be a rich internet application connecting to a server only for data (JSON based web services) - so there will be no server-side presentation framework such as JSP or ASP.NET. The application consists of about 8 screens, most of them in a tabbed layout. The question is...
What is the best way to write such an application in a modular fashion? I would like to write the individual screens as standalone modules communicating with each other only via events. I would also like to use some sort of an MVC framework to decouple the presentation layer from the model.
Any thoughts on which frameworks I should look at? Have you had a good experience using them? I am starting to look at Backbone.js, JavaScriptMVC and SproutCore. Am I missing anything that is worth considering?
Thanks in advance for your time.
P.S. If you'd like to see the application that I am trying to rewrite, an online demo is available here - it is a realistic trading application built for learning and comparing technologies.

I haven't yet had a chance to try SproutCore, but I hear good things about it and want to look into it at some point. I would recommend trying out at least Backbone and Sproutcore to see which of the two fits your needs and your programming style better.
I do a lot of work with Backbone, and what your suggesting sounds like it would be a very easy fit with backbone. I follow an event-driven architecture with my backbone apps and I find it works very well. it keeps code clean and separated, and allows me to add functionality easily by binding to events that my objects raise.
there are a lot of great tutorials and screencasts for backbone out there, too. here a few of them that should hopefully give you some of the information you need (including my own blog posts):
http://lostechies.com/derickbailey/category/backbone/
http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/ (introduce event-driven apps in backbone)
http://joeybeninghove.com/2011/08/16/backbone-screencast-introduction-views/
http://peepcode.com/products/backbone-js ($)
http://tekpub.com/view/mvc3/6 ($ and specific to ASP.NET MVC integration)
again, don't just pick one and never look back. it's worth your time to at least do some simple trial applications in backbone and sproutcore, if not additional frameworks.
hope that helps.

With Sproutcore, you can create so-called frameworks so separate your application. Every SC project has a frameworks directory, you just add a directory for your custom frameworks, and include the frameworks in your buildfile.
It's not a bad idea with SC to at least separate your Model layer into its own framework, for loose coupling and testing purposes (SC is heavily MVC). It might make sense to separate your screens into their own frameworks, depending on how beefy they are. One of the benefits of this approach is you can reuse your frameworks in other projects if needed.
SC also includes a robust Statechart mechanism, so using custom events is quite natural, and because of the statecharts its relatively easy to insure that the events are handled only when the app is in the right state.

Have you tried the Relay framework? Your write your individual screens as standalone modules and use relay's event system to link them together.
http://relay.github.com

ExtJS or SmartClient?

I would like your opinion about these two frameworks. I like a lot the features of ExtJS, but recently I saw SmartClient and it seems to be great too, and free (its Client side features) for commercial projects. I tried a little of SmartClient and it seems to be easier than ExtJS, and it has a better documentation tnan ExtJS.
BUT.. I didn't work with any of these frameworks and maybe I'm wrong. That's why I would like the opinion of people who has worked with them.
And BTW.. how does the license of ExtJS work? you've to but one license for each developer and then you're able to develop and sell every app you want or you have to buy a license for each app you sell?
Thanks in advance for your help.

This has been pretty well covered on SO. Specifically here and here.
Ext JS is licensed per developer not per app.
I'm an Ext JS developer so I'm partial to Ext, but I have no opinion of SmartClient good or bad. If licensing is the most important criterion SmartClient might be better for you. If you want to weight the technical merits see the links above, or even better evaluate them both based on your own needs.

I use SmartClient and am quite happy with it and the support provided by Isomorphic. The U/I widgets aren't the nicest out there, but you can see that they've been around for some time by the richness of their API.
It's also quite easy to roll out your own custom controls when the built-in ones don't suit your needs. For example, we integrated Raphael pie chart SVG drawings inside custom Isomorphic canvas classes. We also integrated Mondrian/JPivot analytical technologies which are legacy JSP pages, using Smartclient's HtmlFlow control. It's quite powerful what can be achieved.
One thing I regret about Smartclient versus other technologies such as jQuery, is a clearer separation between the work a web designer does versus the work a developer/programmer does.
With Smartclient, it's mostly done thru code, even the layout of components. There's no HTML per say. They've separated very well the skinning (css), but that's about it. Everything else needs to be done by a developer/programmer thru Javascript code. Smartclient is good for single-page apps.
I can't speak for ExtJS as I haven't used it real production environments, but in the end I think it all boils down to the licensing model and programing/design model you want to be using.

I have used both, and I would recommend Ext for the following reasons:
Layout flow is much easier, especially with the design tools.
The UI Builder from Isomorphic lacks the usability that the tool from Ext offers
The Javascript performance was better with Ext
CSS is easier to use with the Ext framework
Editing CSS/Themes/Skins in SmartGWT/SmartClient is major surgery (very tedious and time consuming)
Widgets are similar but "prettier" in Ext
Forum administrators on both sites can be "snippy", however premium support did not change
this on the Isomorphic site. They are rude and condescending even when you pay.
Ext has a dedicated MVC framework. The Isomorphic framework does not.
SmartClient charting DOES NOT support negative number values

Before starting new GUI for our new project arrival, I made some research.
Here are my findings (remove spaces from "http: // "; bcoz stackoverflow is preventing me to do so :)):
Prototype framework favorable links:
http://en.wikipedia.org/wiki/List_of_Ajax_frameworks
http://www.javabeat.net/articles/12-comparison-of-ajax-frameworks-prototype-gwt-dwr-and-1.html
http://www.devx.com/AJAXRoundup/Article/33209
Dojo framework favorable links:
http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison
jQuery framework favorable links:
http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised
Test speed of different RIA frameworks:
http://mootools.net/slickspeed/#
More comparasions:
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
http://jqueryvsmootools.com/#conclusion
Out of all these findings I started using SmartClient 5. Initially we faced some issues but as SmartClient matures I find it interesting in many terms:
1. APIs doc help and examples
2. Flexible controls
3. Forum
Today I am working on SmartClient 8 and few on my GUIs are in production running successfully. Actually the great help with SmartClient is that you find every thing at one place. No need to dug many other sites that is hard to do for any other open source RIA framework.
So my choice is no doubt SmartClient.
Thanks
Shailendra (shaILU)

I would prefer Jquery UI. Which is supported well by community. By combining plugins you can get similar -if not better- screens provided by extJS and SmartClient.