I'm just getting into learning MVC and Angular and I'm curious about code such as the following (taken from angularjs)
<html ng-app>
<head>
<script src=".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()?
I'm just getting into learning MVC and Angular and I'm curious about code such as the following (taken from angularjs)
<html ng-app>
<head>
<script src="https://ajax.googleapis./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()?
- 10 AngularJS is not unobtrusive. – SLaks Commented Jan 3, 2014 at 15:20
- 1 You could always try this: egghead.io/lessons/angularjs-with-no-custom-markup Though... It'd be a pain... – calebboyd Commented Jan 3, 2014 at 15:21
- @SLaks Yeah, I could gather that much. I'm just curious what makes this 'OK'. Is it because obtrusiveness is essential for MV* to work, or this is the best that exists at the moment? – wootscootinboogie Commented Jan 3, 2014 at 15:22
- 7 I think this is a reasonable question. I disagree with the close. – superluminary Commented Apr 28, 2014 at 13:35
- 8 I agree, great question. Please re-open. – tjb1982 Commented May 28, 2014 at 11:56
2 Answers
Reset to default 8Unobtrusive 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 bining 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.
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.