Databases
StackOverflow2013
Postsdbo
POAngular and Semantic Markup/Separation of Concerns
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngular and Semantic Markup/Separation of Concerns
    text
    copied!<p>Perhaps this isn't a good place to ask this, but I'll try to make it as objective and answerable as possible. </p> <p>I've been playing with Angular.js and really liking it, but I have a question about its philosophy. Here's a snippet of code from the Angular site for a controller.</p> <pre><code> &lt;div ng-controller="TodoCtrl"&gt; &lt;span&gt;{{remaining()}} of {{todos.length}} remaining&lt;/span&gt; [ &lt;a href="" ng-click="archive()"&gt;archive&lt;/a&gt; ] &lt;ul class="unstyled"&gt; &lt;li ng-repeat="todo in todos"&gt; &lt;input type="checkbox" ng-model="todo.done"&gt; &lt;span class="done-{{todo.done}}"&gt;{{todo.text}}&lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; &lt;form ng-submit="addTodo()"&gt; &lt;input type="text" ng-model="todoText" size="30" placeholder="add new todo here"&gt; &lt;input class="btn-primary" type="submit" value="add"&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p>This is basically <code>HTML</code> with Angular directives sprinkled in. The one that I find potentially susupect is this: <code>&lt;a href="" ng-click="archive()"&gt;archive&lt;/a&gt;</code>.</p> <p>When Jeffrey Zeldman wrote <a href="http://www.zeldman.com/dwws/" rel="noreferrer">Designing With Web Standards</a>, it became a best practice to separate markup (HTML), presentation (CSS), and interaction (JS) into different files for maintainability.</p> <p>My question is, how does Angular not violate that? I'm actually really enjoying it, and finding it quite powerful, but what is the difference between binding a click event to an <code>a</code> element like that in the markup, and writing this vestige of pre-web-standards code:</p> <pre><code>&lt;a href='#' onClick='showAlert()'&gt;Click here&lt;/a&gt; &lt;script&gt; var showAlert = function(){ alert('hey'); } &lt;/script&gt; </code></pre> <p>Helpful answers might refer to documentation in addition to personal experience with using the framework.</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