0

Thinking in AngularJS” if I have a jQuery background? explains Angularjs approach over jQuery approach, for DOM manipulation, very well.

From the above explanation, am still not clear on the point that talks on AngularJS approach, which says, Don't design your page, and then change it with DOM manipulations

By repeating the main part of the answer(above),

jQuery approach:

For a design/view (part of it, shown below):

<ul class="messages" id="log">
</ul>

you manipulate(shown below) it's DOM, to make the page dynamic,

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
})

but more importantly, manipulate by manually referencing and updating it's DOM node, which is a side effect. That means, change in design/view (ul to say div) will change the DOM manipulation logic(to $('div#log')). AngularJS approach can help here.

AngularJS approach:

View may look like:

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

and controller code (shown below), does not manually reference DOM node and makes the web page dynamic. AngularJS controller uses model($scope) for it.

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
})

This(above) is the main advantage of using Angular over jQuery/Javascript

So,

Using AngularJS approach, we assign a directive(ngRepeat) to an existing view/design(li). Controller code manipulates view(li) via model($scope), by not referencing the DOM node.

Question:

with respect to first part in the answer, how AngularJS stops to design page(view) first and then change DOM using controller via model?

overexchange
  • 15,768
  • 30
  • 152
  • 347
  • That is a broad question. Start with reading, [AngularJS Developer Guide - Conceptual Overview](https://docs.angularjs.org/guide/concepts). – georgeawg Sep 03 '17 at 17:14
  • AngularJS [separates concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) into [MVC model-view-controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller). Design the Model first. The DOM is the "skin" for the Model. – georgeawg Sep 03 '17 at 17:17
  • @georgeawg what is wrong in designing webpage first? Subsequently, Models can be derived accordingly, based on fields in each webpage – overexchange Sep 03 '17 at 19:43
  • Angular doesn't mean "Don't design your page". "Don't design your page, and then change it with DOM manipulations" says "Don't use DOM manipulations in Angular". Angular is responsible for DOM manipulation. You have to design view, attach model to it and then operate on model. Angular will take care of DOM manipulation when model changes. – LukLed Sep 03 '17 at 22:02
  • @LukLed Following Angular framework makes you to attach model to a view and then operate on model. Correct!!! Am not getting, when that answer says, *But in AngularJS, you must start from the ground up with your architecture in mind. Instead of starting by thinking "I have this piece of the DOM and I want to make it do X", you have to start with what you want to accomplish, then go about designing your application, and then finally go about designing your view.*. What is that architecture in mind that I would need before designing the page? – overexchange Sep 03 '17 at 22:07

0 Answers0