Basicamente, jQuery é uma biblioteca Javascript, que simplifica o Javascript para atividades comuns no dia-a-dia do desenvolvimento. Excelente para manipular o DOM com muito menos código que o JS puro.
Exemplo de jQuery:
Selecionando o <div id="meudiv"></div>
Javascript: document.getElementByID('meudiv')
jQuery: $('#meudiv')
Já AngularJS é um framework, que trabalha com dados, focando na interação usuário <-> aplicativo. Tem os seguintes pontos principais:
Data Binding de mão dupla. Exemplo.
Você define um tipo de dados (chamado Model) e quaisquer alterações nestes ocorrem em toda aplicação, onde os mesmos aparecerem.Padrão de desenvolvimento [MVV] [MVVM](http://en.wikipedia.org/wiki/Model_View_ViewModel) (semelhante ao MVC).
Template engine integrada
Ex.: Você recebe de um servidor um objeto JSON com vários itens e os atribui à um Model chamadoPessoas
no Angular. Esse é o nosso objeto que atrelamos ao model através de um controller do Angular:pessoas = [ {nome: 'Romulo', sobrenome: 'Zoch', caracteristica: 'Lindo'}, {nome: 'João', sobrenome: 'Do caminhão', caracteristica: 'feio'} ]
Para listar todos os itens do objeto/model, você pode, por exemplo, fazer o seguinte:
<li ng-repeat="pessoa in pessoas" ng-model="pessoas">
{{pessoa.nome}} é {{pessoa.caracteristica}} e seu sobrenome é
{{pessoa.sobrenome}}
</li>
E o AngularJS vai exibir o seguinte:
- **Diretrivas `customizadas`** (como componentes reutilizáveis, criação de 'html' personalizado). Você pode, por exemplo, criar um elemento `texto`, que irá renderizar um snippet completo que você definir, "faz de conta": `texto` - **Pronto para trabalhar com API's [REST](http://pt.wikipedia.org/wiki/REST)** (que, normalmente, entregam o conteúdo em [JSON](http://pt.wikipedia.org/wiki/JSON)) - **Validação de Form Client-side** - **Comunicação com o servidor** - **Localization Ready** (pronto p/ tradução multi-línguas) - **Injeção de dependencias** (não é bem uma feature, mas é uma diferença em relação ao jQuery, que não tem isso) - **TDD** [(Desenvolvimento direcionado à testes)](http://pt.wikipedia.org/wiki/Test_Driven_Development)
- Romulo é lindo e seu sobrenome é Zoch
- João é feio e seu sobrenome é Do caminhão
Obs.: Vale lembrar que o próprio AngularJS USA jQuery. Ele vem com uma versão Lite do jQuery integrada. Você pode, inclusive, usar jQuery dentro do Angular ( Embora não seja indicado alterar o DOM via jQuery dentro de uma aplicação Angular, pois isso deve ser feito via diretivas customizadas).
Algumas informações bem bacanas de cada um você encontra na Wikipedia. As informações estão bem simples e gerais: Angular e jQuery