StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Imperative → declarative</h2> <p>In jQuery, <em>selectors</em> are used to find <a href="http://en.wikipedia.org/wiki/Document_Object_Model" rel="nofollow noreferrer">DOM</a> elements and then bind/register event handlers to them. When an event triggers, that (imperative) code executes to update/change the DOM.</p> <p>In AngularJS, you want to think about <strong>views</strong> rather than DOM elements. Views are (declarative) HTML that contain AngularJS <strong>directives</strong>. Directives set up the event handlers behind the scenes for us and give us dynamic databinding. Selectors are rarely used, so the need for IDs (and some types of classes) is greatly diminished. Views are tied to <strong>models</strong> (via scopes). Views are a projection of the model. Events change models (that is, data, scope properties), and the views that project those models update "automatically."</p> <p>In AngularJS, think about models, rather than jQuery-selected DOM elements that hold your data. Think about views as projections of those models, rather than registering callbacks to manipulate what the user sees.</p> <h2>Separation of concerns</h2> <p>jQuery employs <a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript" rel="nofollow noreferrer">unobtrusive JavaScript</a> - behavior (JavaScript) is separated from the structure (HTML).</p> <p>AngularJS uses <strong>controllers</strong> and directives (each of which can have their own controller, and/or compile and linking functions) to remove behavior from the view/structure (HTML). Angular also has <strong>services</strong> and <strong>filters</strong> to help separate/organize your application.</p> <p>See also <a href="https://stackoverflow.com/a/14346528/215945">https://stackoverflow.com/a/14346528/215945</a></p> <h2>Application design</h2> <p>One approach to designing an AngularJS application:</p> <ol> <li>Think about your models. Create services or your own JavaScript objects for those models.</li> <li>Think about how you want to present your models -- your views. Create HTML templates for each view, using the necessary directives to get dynamic databinding.</li> <li>Attach a controller to each view (using ng-view and routing, or ng-controller). Have the controller find/get only whatever model data the view needs to do its job. Make controllers as thin as possible.</li> </ol> <h2>Prototypal inheritance</h2> <p>You can do a lot with jQuery without knowing about how JavaScript prototypal inheritance works. When developing AngularJS applications, you will avoid some common pitfalls if you have a good understanding of JavaScript inheritance. Recommended reading: <a href="https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs">What are the nuances of scope prototypal / prototypical inheritance in AngularJS?</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload