Подтвердить что ты не робот

Angular JS и ненавязчивый JavaScript

Я просто изучаю MVC и Angular, и мне любопытен код, например следующий (взятый из 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);
        });
    };
}

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

4b9b3361

Ответ 1

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

Сторонники "ненавязчивого JavaScript" утверждают, что цель разметки заключается в описании структуры документа, а не в его программном поведении и что объединение этих двух факторов отрицательно влияет на ремонтопригодность.

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

Как лучше всего подходит веб-сайт Angular,

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

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

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

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

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

Ответ 2

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