2014-01-03 2 views
21

Я просто получаю в изучение MVC и Угловое и мне любопытно кода, как следующее (из angularjs.org)Угловая JS и Ненавязчивый JavaScript

<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); 
     }); 
    }; 
} 

Если постулаты ненавязчивый JavaScript говорят, что мы должны отделить поведение от представления, почему это нормально и лучшая практика для угловой иметь код, как ng-click=archive()?

+7

AngularJS не является ненавязчивым. – SLaks

+1

Вы всегда можете попробовать это: https://egghead.io/lessons/angularjs-with-no-custom-markup Хотя ... Было бы больно ... – calebboyd

+0

@SLaks Да, я мог бы это собрать. Мне просто интересно, что делает это «ОК». Это потому, что навязчивость необходима для работы MV *, или это лучшее, что существует на данный момент? – wootscootinboogie

ответ

8

Ненавязчивый javascript - это более старое понятие, которое не имеет такой же важности, как и когда-то. Из Wikipedia,

Приверженцев к «Ненавязчивый JavaScript» утверждают, что цель разметки заключается в описании структурирования документа, а не его поведения программного и что объединение два негативно влияет на сайте ремонтопригодности.

Юзабилити не имеет значения, потому что никто не смотрит на свой код DOM, кроме вашей команды разработчиков. Обработчики событий Inline легче поддерживать, как только вы охватите философию углов. Тем не менее, вы всегда можете использовать $watch, чтобы сохранить свой HTML-фильтр.

Как Угловой сайт лучше всего выразился,

AngularJS позволяет расширить словарный запас HTML для вашего приложения. Результирующая среда необычайно выразительна, удобочитаема, и быстро развивается.

Поисковые системы могут иметь немного сложнее индексировать ваш сайт, но у нас есть RSS, Sitemaps и AJAX Crawling, чтобы обойти это.

Изящная деградация больше неактуальна, если только ваши строительные приложения не предназначены для рынка смартфонов. Почти все пользователи находятся в браузере, который поддерживает современный javascript (с прокладками).

Доступность и угловые не конфликтуют. Просто убедитесь, что используете теги ARIA и правильную разметку. Угловая упрощает запись тестового кода и построена в exception handling.

Разделение проблем является проблемой, если вы загрязняете глобальный охват функциями. Угловое упрощает сохранение кода JavaScript независимо от влияния других файлов или кода.

2

Я пришел к тому же выводу, что и учу угловатым. Я не против html-атрибутов для данных, но мы стараемся не делать onclick или любые другие события в html-тегах в течение длительного времени. Оцененные выражения делают меня еще более брезгливым. как ng-model-setter = "set ($ value)". Это похоже на то, что оно принадлежит javascript, а не в разметке.

+1

В конце концов, это действительно имеет значение? –

+1

Я думаю, что мышление по этому вопросу – Ropstah

+0

Зависит от того, насколько поддерживаемым вы хотите, чтобы ваш код был. Если вы попытаетесь поместить всю логику в файл javascript (файл приложения) и только сделать привязку данных, тогда вы знаете, где вы можете искать ошибки в коде. Если вы смешиваете сеттеры в разметке и в javascript, код _may_ будет сложнее поддерживать. Одним из замечательных источников того, как сделать веб-приложения с угловым, может быть один: https://github.com/johnpapa/angular-styleguide – Trond

Смежные вопросы