jquery - Comparing JavaScript vs AngularJS? -

i know javascript programming language while angularjs mvc based framework used javascript.

but have assignment supposed compare:

• javascript vs jquery syntax,
• and javascript vs angularjs syntax.

now, javascript vs jquery part, compared them showing comparison between dom methods , jquery equivalent method , how functions minimized , how can access different elements , few lines of code using jquery instead of javascript.

but in case of angularjs vs javascript, how supposed compare syntax since angularjs framework?

is possible compare 2 things can done in both javascript , angularjs pretty easy done using angularjs ? because far understood, javascript , angularjs 2 separate things.

i newbie in web development , have started developing 3 weeks ago in html5, pardon me mistake.

angular , jquery both libraries/frameworks written in javascript. asking me compare angular javascript asking comparison between bread , flour.

however, browser apis dom manipulation implemented fundamentally different idea angular, i'm going assume assignment expecting identify.

the key point focus on paradigm fundamentally different. angular takes declarative approach, whereas both dom , jquery imperative.

declarative

a style of building structure , elements of computer programs, expresses logic of computation without describing control flow. [1]

a declarative language 1 in describe want, not how should done. angular's approach directives.

imperative

[a style] in algorithms implemented in terms of explicit steps. [1]

when write code using dom apis or jquery, have detail "how" of process.

let's take data binding example. want bind value text input, label.

with 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 explain need browser do. have listen events, make sure dom loaded, keep track of our element's ids, update our label whenever our input changes.

with jquery

<input type='text' id='bind-input'> <label id='bind-output'></label> 

we still need javascript:

$(document).ready(function() {   var $input = $('#bind-input'),       $output = $('#bind-output');    $input.on('change', function() {     $output.html($input.value());   }); }); 

as can see, pretty similar dom approach. have explain browser exactly want do.

with angular

<input type='text' ng-model='bound'> <label ng-bind='bound'></label> 

we don't need write code work angular! (obviously we'd need empty controller somewhere, idea).

the declarative approach way abstract away implementation details. angular directives make easy wrap these common behaviours small reusable components can applied our html in declarative way.