Вы здесь: Главная > JavaScript > Angular

Angular

AngularJS — это клиентский фреймворк JavaScript с открытым исходным кодом, который использует HTML в качестве языка шаблонов. Он примечателен своей философией, согласно которой декларативное программирование лучше императивного программирования для подключения пользовательских интерфейсов и создания модульных компонентов.

Angular — это MVC, но он работает совершенно иначе, чем Backbone.

Шаблоны и представления в Angular аналогичны и представляют собой обычный HTML-код с небольшим добавлением сахара. На самом деле, вы можете создать (очень) простое приложение Angular без единой строки JavaScript:

<input ng-model="name">

<h1>Hello {{ name }}</h1>

Атрибут ng-model в input элементе связывает значение входных данных с моделью, называемой “name”. Angular создаёт эту модель для нас; её не нужно объявлять где-либо ещё. Затем в h1 мы привязываемся к значению модели “name”. Когда вы обновите input, h1 тоже обновится.

Когда вы хотите создать что-то полезное в Angular, вы используете контроллер, который является просто функцией JavaScript:

var AppCtrl = function ($scope) {
    $scope.name = "Yoda";
};

Контроллер имеет область действия, которая является областью DOM, к которой он имеет доступ. Предоставление контроллеру области действия выглядит следующим образом:

<div ng-controller="AppCtrl">
    <input ng-model="name">
     <h1>Hello {{ name }}</h1>
</div>

Модель существует в области видимости контроллера, поэтому в приведённом выше примере для модели “name” по умолчанию было бы установлено значение “Yoda”, но input будет обновляться модель и h1 по мере ввода.

Вы заметите $scope переменную, которую контроллер принимает в качестве аргумента, но, похоже, она берётся из ниоткуда. Это внедряется в контроллер с помощью системы, называемой внедрением зависимостей. Это сложная область, но это полезный инструмент для создания модульных приложений.

Angular ни от чего не зависит на странице, и поэтому размер файла обычно меньше, чем у Backbone. Если вы беспокоитесь о проверке вашего HTML, то Angular поддерживает использование атрибутов данных вместо ng атрибутов, использованных выше. Например, data-ng-controller.

Страницы в тему:

  • Предыдущая страница: Backbone

Добавить комментарий