Home›
Do you understand that with Angular you read and write to the model... never to the page? (a.k.a. Forget about jQuery)
  v2.0 Posted at 20/12/2016 5:43 AM by Tiago Araujo

​The most common mistake that developers make when moving from jQuery to Angular is that they continue to think about updating the page.

understand-jquery.png
Figure: In jQuery, you design a page and then use jQuery to perform interactions with the page e.g. reading and setting the values of input boxes, updating the content of divs or handling button events
understand-badcode.png
Figure: Bad Example - using jQuery on Angular views will lead to worlds of pain

A fundamental principal of Angular is that you build a Model in JavaScript (or TypeScript) and then on your view you just databind your UI elements to the model. Any changes that are made are made to the model and the view updates automatically.

In Angular, you do not interact with the page you update the model, and the page is just displaying a view of the model.

understand-goodcode.png
Figure: Good Example - In both AngularJs & Angular 2.0 jQuery is not required on the view. The view binds to properties on a JavaScript model

Further reading: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background

Tell a Friend about this

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments:

    Note: Social Media login for Yotpo is not working in IE or Safari, please use Chrome. We are waiting for Yotpo to fix it.