Введение в AngularJS и простейший пример приложения

| Среда, 5 июня, 2013

Метки: AngularJS, Javascript Комментарии: 0

AngularJS является структурированной средой для разработки динамических веб-приложений. C данным фреймворком HTML можно использовать как собственный шаблонный язык и расширять его синтаксис так, чтобы написание приложений становилось как можно проще и лаконичнее. Стандарный набор инструментов среды, позволяет избежать написания в приложении большого объема кода, используя связывание данных и внедрение зависимости. И это все происходит на стороне браузера в Javascript, что делает AngularJS идеальным партнером для любой серверной технологии.

Angular – это то, чем мог бы быть HTML, если бы на HTML разрабатывали приложения. HTML – замечательный декларативный язык для статических документов. Но, он не содержит ничего для создания приложений, и как результат разработка веб-приложения сводится к упражнению "что я должен сделать, чтобы обмануть браузер и сделать то, что я хочу".

В основном, статические документы становятся динамическими, используя два подхода:

Использование библиотеки: Набор функций облегчает написание приложений. Код приложения при необходимости вызывает функции библиотеки. (Пример: jQuery.)
Использование фреймворка: Это применение конкретной реализации веб-приложения, когда ваш код отвечает за детали. Здесь наоборот фреймворк это основа и он вызывает код приложения, который выполняет специфичную работу. (Пример: knockout, ember.)

Полноценное решение на стороне клиента

Angular не является каким-то одним элементом мозаики в построении клиентского веб-приложения. Он управляет всем кодом, который написан для DOM-элементов и AJAX-вызовов, и содержит этот код в хорошо организованной структуре. Это делает Angular чрезвычайно уверенным в том, как должны быть построены приложениия, выполняющие такие операции, как создание, чтение, обновление и удаление данных (CRUD). Но не смотря на эту уверенность, он настолько гибок, что шаблон постороения приложений может быть изменен по желанию разработчика. Вот стартовый набор инструментов, который предоставляет Angular:

Инструменты и техники для построения CRUD-приложений: связывание данных, базовые директивы, валидация форм, маршрутизация, глубокие ссылки, повторно используемые компоненты, внедрение зависимости.
Тестируемость: модульное тестирование (unit testing), тестирование end-to-end, фиктивные объекты (mocks), вспомогательные средства тестирования.
Базовое приложение с примером организации директорий и сценариями тестирования, в качестве стартовой точки разработки приложения.

Где Angular не рекомендуется использовать

Angular упрощает разработку приложения, предоставляя разработчику более высокий уровень абстракции. А любая абстракция жертвует гибкостью. Проще говоря, не любое приложение подходит Angular. Angular был создан в основном для CRUD-приложений. К счастью CRUD-приложения составляют 90% от всех веб-приложений. Чтобы понять подходит ли Angular для конкретного приложения, лучше объясним, когда приложению не нужен Angular.

Игры или редакторы с богатым пользовательским интерфейсом - это примеры, где идет очень интенсивная работа с DOM-элементами. Этот вид приложений сильно отличается от CRUD-приложений, и соответственно, не очень подходит для Angular. В таких случаях нужно что-то близкое к голому металлу, наверно jQuery окажется более удачным выбором.

Простейший пример приложения с Angular

Рассмотрим простое CRUD-приложение, которое содержит форму. Значения формы отслеживаются и используются для вычисления общего результата, который форматируется к определенному виду. Вот некоторые общие ключевые моменты, с которыми разработчик столкнется:

Связывание модели данных с пользовательским интерфейсом.
Чтение и проверка данных введенных пользователем.
Вычисление новых значений на основе данных модели.
Форматирование вывода в нужном формате.

index.html

<!doctype html>
   <html ng-app>
      <head>
         <script src="http://code.angularjs.org/1.0.6/angular.min.js">
         </script>
         <script src="script.js"></script>
      </head>
      <body>
         <div ng-controller="InvoiceCntl">
         <b>Invoice:</b>
         <br>
         <br>
         <table>
            <tr><td>Quantity</td><td>Cost</td></tr>
            <tr>
               <td>
                  <input type="number" ng-pattern="/\d+/" 
                           step="1" min="0" ng-model="qty" required >
               </td>
               <td><input type="number" ng-model="cost" required></td>
            </tr>
         </table>
         <hr>
         <b>Total:</b> {{qty * cost | currency}}
         </div>
      </body>
   </html>

script.js

function InvoiceCntl($scope) {
   $scope.qty = 1;
   $scope.cost = 19.95;
}

End-to-end тест

it('should show of angular binding', function() {
   expect(binding('qty * cost')).toEqual('$19.95');
   input('qty').enter('2');
   input('cost').enter('5.00');
   expect(binding('qty * cost')).toEqual('$10.00');
});

Разберемся с тем, что происходит в примере выше. В теге <Html> с помощью директивы ng-app мы указали, что документ является приложением Angular. Также директива ng-app заставляет среду Angular автоматически выполнить инициализацию приложения.

<html ng-app>

Загружаем Angular с помощью тега <script>:

Через атрибуты ng-model в тегах <input> Angular автоматически устанавливает двухстороннее связывание данных c элементами интерфейса. Там же демонстрируется простая проверка вводимых значений.

Quantity: <input type="number" ng-pattern="/\d+/" 
                       step="1" min="0" ng-model="qty" required >
Cost: <input type="number" ng-model="cost" required >

Элементы ввода выглядят хорошо, но рассмотрим следующие нюансы:

Когда страница загружается, Angular связывает имена элементов input (qty и cost) с переменными с аналогичными именами. Можно представлять эти переменные, как "модель" в патерне MVC (Model-View-Controller).
Элементы <input> обладают особой возможностью. Когда пользователь вводит недопустимое значение, они окрашиваются в красный цвет. Это поведение упрощает реализацию проверки полей ввода форм в большинстве CRUD-приложений.

И наконец, мистические {{ двойные фигурные скобки }}:

Total: {{qty * cost | currency}}

Это разметка Angular для связывания данных. Она сосотоит из комбинации выражения и фильтра: {{ expression | filter }}. В Angular фильтры используются для форматирования выводимых данных.

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

Заметим, что мы добились нужного поведения приложения без вызовов методов из Angular и без специфичной реализации поведения как для фреймворка. Браузер "понял" из разметки, что нужно сделать. Angular избавил от необходимости написания вызовов библиотеки/фреймворка.

Введение в AngularJS и простейший пример приложения

Полноценное решение на стороне клиента

Где Angular не рекомендуется использовать

Простейший пример приложения с Angular

Комментарии

Популярные метки

Читают сейчас