AngularJS: Введение и Hello World

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

Если вы — счастливый обладатель опыта программирования jQuery, вас может очаровать новая технология. Если нет, то вкратце можно описать полезность этой технологии следующими словами: при использовании Angular JS вы пишете меньше строк, чем если бы писали на jQuery. Аналогично этому, в момент появления jQuery вы писали на нём намного меньше строк кода, чем на чистом JavaScript. Кроме этого, каждая новая технология приносит новые парадигмы. В случае с jQuery это были селекторы, пользовательские события, анимация и т.п.

Появление новой парадигмы SPA (Single Page Applications) связано со скоростью работы интернет и браузеров. Браузер интернета — одно из самых ресурсопотребляющих приложений на любой современной клиентской платформе. Появление большого количества фреймворков для поддержки разработки приложений, выполняющихся в браузере, было неизбежно.

Программирование Angular JS приложений может вызвать массу вопросов. Чтобы ответить хотя бы на часть из них, я попробую написать несколько заметок, которые модно называть «статьями».

Введение во фреймворк

Angular JS, как было сказано выше, это JavaScript MVW framework. Он предназначен для разработки SPA (одностраничных приложений). Цель такого подхода – привнесение возможности построения архитектуры приложений MVC или MVVM прямо в среду браузера. Браузер, являясь одной из самых мощных средств отображения, получает с AngularJS возможности, которые позволяют создавать программы с очень сложным поведением.

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

MVW – Model-View-Whatever

Чтобы посильнее запутать всех приходящих в профессию, AngularJS подвергает сомнению концепцию MVC, MVP и MVVM. Кратко о них. Существует несколько общепринятых архитектурных шаблонов, позволяющих реализовать разделение определения, представления информации в программе от пользовательского взаимодействия с ней. Центральная идея этих шаблонов в возможности повторного использования кода и разграничение зон ответственности в проектах. Наиболее широко известные шаблоны — это MVC (Model-View-Controller). Его идея в том, что модель описывает структуру оперируемых данных, представление отвечает за их отображение, а контроллер за взаимодействие представления и модели.

Похожий на MVC, другой архитектурный подход — MVP или Model-View-Presenter. Существенно не отличаясь от контроллера в MVC, presenter или дирижёр осуществляет оркестрацию между моделью и представлением, выполняя роль посредника. В MVP отличие в том, что вся логика, отвечающая за представление данных, отдана посреднику (presenter). Это был переход к тому, что модель данных полностью отделяется от логики. И после уже появляются новые архитектуры приложений в виде MVVM, например.

Программистам, привыкшим работать в MVC, модель MVVM может показаться «рыхлой». Но её главная задача — в понятном разделении ответственности между слоями реализации приложения, обеспечение полной независимости в описании моделей данных и представления и, как следствие, возможности разрабатывать их независимо друг от друга.

Angular не накладывает напрямую никаких ограничений на выбор архитектурного шаблона приложения. Это называется у Google MVW или Model-View-Whatever. Маркетинговая шелуха, на самом-то деле. Главный посыл названия MVW в том, что, как и во всякой развитой программной технологии, можно реализовать архитектуру приложения как угодно. Главное — чёткое и понятное взаимодействие модели и представления. Остальное — попытка маркетологов Google “вписать” себя в анналы программистской истории. Не более.

Итак. Все определения осуществляются с именованными МОДУЛЯМИ. Модули затем могут быть обьединены в форму конкретного веб-приложения. Модули могут зависеть друг от друга. Поэтому включение одного конкретного Модуля в приложение запросто может инкапсулировать включение дополнительной функциональности от Модулей, от которых зависит включаемый Модуль. Angular JS предоставляет вам широкий набор различных API для определения этих Модулей и организации связей между ними с контролем зависимостей.

Hello World, AngularJS

Предварительно теории достаточно. Давайте покопаемся в реальном коде. Одно сделанное дело дороже тысячи слов.

Чтобы создать простейшее приложение в Angular JS, нам следует включить Angular JavaScript в создаваемый HTML документ.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

И теперь давайте определим простейшее приложение как конкретный файл:

<!DOCTYPE html>
<html ng-app>
<head>
        <title>Привет, мир. AngularJS</title>
        <script type="text/javascript"
                src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

</head>
<body>

        <p>Напишите, кому привет:</p>
        <input type="text" ng-model="LastName" />

        <h1>Привет, {{ LastName }}!</h1>

</body>
</html>

Просто напишите имя в текстовое поле и вы увидите результат работы программы.

Обратите внимание, что не было написано ни одной строчки JavaScript кода, и программа, тем не менее, работает на вставленных декларативно тегах и атрибутах в нашем html документе.

ng-app

Первое, на что следует обратить внимание, это атрибут ng-app внутри <html> тега. Этот атрибут сообщает, что Angular будет функционировать в этой части страницы. В нашем случае получается, что так будет во всём документе. Если вы захотите использовать Angular только в части страницы, то вы определите ng-app атрибует в каком-нибудь <div> или другом теге.

ng-model и двунаправленное связывание данных

Мы определили атрибут ng-model в текстовом поле как:

ng-model=”LastName”

Это позволяет организовать связывание состояния текстового поля ввода со значением модели приложения. В нашем случае, мы определили модель с именем LastName. Эта модель связана со значением текстового поля ввода используя атрибут ng-model. Такое связывание работает таким образом, что изменение значения текстового поля автоматически приводит к немедленному изменению значения в модели. Одновременно, если поменять значение модели LastName, произойдёт соответствующее изменение в тектовом поле. Такое связывание называется «двунаправленным связыванием» и логически объясняется просто – если меняется значение на одном конце связи, одновременно меняется значение и на другом конце.

{{ LastName }}

Обратите внимание, что мы оборачиваем значение модели в двойные фигурные скобки. Таким образом мы сообщаем Angular о необходимости связывания значений модели LastName в этом месте.

Так, любое изменение модели LastName приведёт к изменению текста внутри тега <h1>.

Обратите внимание, что мы не реагируем на текстовое поле. Мы берём значение из модели. Мы можем использовать теперь модель столько раз, сколько нам необходимо, и при этом не написали ещё ни одной строчки кода.

ng-show / ng-hide

Давайте расширим понимание работы модели и взаимодействий через двунаправленое связывание. Для этого обратимся ещё к двум декларативным конструкциям Angular ng-show и ng-hide. Оба этих типа атрибута работают противоположным друг для друга образом. ng-show показывает элемент(тег) html, если значение связывания можно интерпретировать как логическое true. ng-hide работает наоборот:

<!DOCTYPE html>
<html ng-app>
<head>
        <title>Привет, мир. AngularJS</title>
        <script type="text/javascript"
                src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

</head>
<body>

        Напишите, кому привет:
        <input type="text" ng-model="LastName" />

        <h1 ng-hide="LastName">Пока некому передавать приветы</h1>
        <h1 ng-show="LastName">Привет, {{ LastName }}!</h1>

</body>
</html>

Здесь мы многократно осуществляем связывание различных элементов страницы с моделью “LastName”. Поэкспериментируйте, если желаете, сами на https://jsfiddle.net

Пока это всё

Дамы и господа. Пока это всё. Я постарался максимально понятно объяснить одну из ключевых концепций AngularJS, попутно позиционируя сам этот фреймворк, давая небольшие теоретические пояснения.

Двигаясь последовательно от темы к теме, мне хотелось бы предоставить возможность входа в разработку современных приложений с использованием AngularJS. Насколько это будет возможно, покажет время. Спасибо за внимание.