What are the key differences between AngularJS and jQuery AngularJS and jQuery

What are the key differences between AngularJS and jQuery?

AngularJS Extends HTML AngularJS extends HTML with ng-directives . The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view. AngularJS Example <!DOCTYPE html> <html> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> <script src=""></script> </body> </html> Example explained: AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application . The ng-model directive binds the value of the input field to the application variable name . The ng-bind directive binds the innerHTML of the <p> element to the application variable name . You can use data-ng- , instead of ng- , if you want to make your page HTML5 valid. AngularJS Directives As you have already seen, AngularJS directives are HTML attributes with an ng prefix. The ng-init directive initialize AngularJS application variables. AngularJS Example <div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p>

</div> AngularJS Controllers AngularJS applications are controlled by controllers . The ng-controller directive defines the controller. The controller code will execute when the page loads. AngularJS Example <div ng-app="" ng-controller="personController">