Angular and jQuery are both libraries/frameworks written in Javascript. Asking for me to compare Angular to Javascript is like asking for a comparison between bread and flour.
However, the browser APIs for DOM manipulation are implemented with a fundamentally different idea to Angular, so I'm going to assume that this is what your assignment is expecting you to identify.
The key point to focus on is that the paradigm is fundamentally different. Angular takes a declarative approach, whereas both the DOM and jQuery are imperative.
Declarative
A style of building the structure and elements of computer programs, that expresses the logic of a computation without describing its control flow. [1]
A declarative language is one in which you describe what you want, not how it should be done. This is very much Angular's approach with directives.
Imperative
[A style] in which algorithms are implemented in terms of explicit steps. [1]
When we write code using the DOM APIs or jQuery, we have to detail the "how" of the process.
Let's take data binding as an example. We want to bind a value from a text input, into a label.
With the DOM
<input type='text' id='bind-input'>
<label id='bind-output'></label>
And our Javascript:
window.addEventListener('load', function() {
var input = document.getElement('bind-input'),
output = document.getElement('bind-output');
input.addEventListener('change', function() {
output.innerText = input.value;
});
});
We have to very specifically explain what we need the browser to do. We have to listen to certain events, make sure that the DOM is loaded, keep track of our element's IDs, all just to update our label whenever our input changes.
With jQuery
<input type='text' id='bind-input'>
<label id='bind-output'></label>
We still need some Javascript:
$(document).ready(function() {
var $input = $('#bind-input'),
$output = $('#bind-output');
$input.on('change', function() {
$output.html($input.value());
});
});
As you can see, this is pretty similar to the DOM approach. We have to explain to the browser exactly what we want it to do.
With Angular
<input type='text' ng-model='bound'>
<label ng-bind='bound'></label>
We don't even need to write any code for this to work with Angular! (Obviously we'd need an empty controller somewhere, but you get the idea).
The declarative approach is primarily a way for us to abstract away from the implementation details. Angular directives make it very easy to wrap up these common behaviours into small reusable components than can be applied to our HTML in a declarative way.
