Menu
I'm just getting into learning MVC and Angular and I'm curious about code such as the following (taken from angularjs.org)
<html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> <script src="Scripts/Todo.js" type="text/javascript"></script> <link rel="stylesheet" href="todo.css"> </head> <body> <h2> Todo</h2> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()"> archive</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder=""> <input class="btn-primary" type="submit" value="add"> </form> </div> </body> Todo.js
function TodoCtrl($scope) { $scope.todos = [ { text: 'learn angular', done: true }, { text: 'build an angular app', done: false}]; $scope.addTodo = function () { $scope.todos.push({ text: $scope.todoText, done: false }); $scope.todoText = ''; }; $scope.remaining = function () { var count = 0; angular.forEach($scope.todos, function (todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.archive = function () { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function (todo) { if (!todo.done) $scope.todos.push(todo); }); }; } If the tenets of unobtrusive javascript say that we need to separate behavior from presentation, why is it OK and best practice for angular to have code like ng-click=archive()?
342
In short, unobtrusive JavaScript is a way of writing JavaScript so that your site visitors are not shut out of your site for one of these reasons—even if your JavaScript is not working correctly for them, they should still be able to use your site, albeit at a more basic level.
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
There are several benefits of using Unobtrusive JavaScript. Separation of concerns i.e the HTML markup is now clean without any traces of javascript. Page load time is better. It is also easy to update the code as all the Javascript logic is present in a separate file.
Unobtrusive JavaScript is a general term that conveys a general set of guidelines or margins to the term REST. REST is nothing but the Representational State Transfer. We can explain Unobtrusive JavaScript as- it is not your particular JavaScript code that you generally use in your markup page.
Unobtrusive javascript is an older concept that doesn't carry the same importance as it once did. From Wikipedia,
Adherents to "Unobtrusive JavaScript" argue that the purpose of markup is to describe a document's structure, not its programmatic behavior and that combining the two negatively impacts a site's maintainability.
Usability is not relevant because no one looks at your DOM code except your development team. Inline event handlers are easier to maintain once you embrace the Angular philosophy. Though, you could always use $watch to keep your HTML cleaner.
As the Angular website best puts it,
AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Search engines may have a slightly harder time indexing your site but we have RSS, Sitemaps and AJAX Crawling to get around that.
Graceful Degradation is no longer relevant, unless your building apps for a non-smart phone market. Almost all users are on a browser that supports modern javascript (with shims).
Accessibility and Angular don't conflict. Just make sure to use ARIA tags and proper markup. Angular makes it easier to write testable code and has built in exception handling.
Separation of Concerns is an issue if you are polluting the global scope with functions. Angular makes it easier to maintain javascript code separately without impacting other files or code.
150
I came to the same conclusion as I learn angular. I don't mind html attributes for data, but we have been trying not to do onclick or any other events on html tags for a long time. Evaluated expressions make me even more squeamish. like ng-model-setter="set($value)" . This feels like it belongs in javascript, not out in the markup.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
