| Среда, 5 июня, 2013
Метки: AngularJS, Javascript Комментарии: 0
AngularJS является структурированной средой для разработки динамических веб-приложений. C данным фреймворком HTML можно использовать как собственный шаблонный язык и расширять его синтаксис так, чтобы написание приложений становилось как можно проще и лаконичнее. Стандарный набор инструментов среды, позволяет избежать написания в приложении большого объема кода, используя связывание данных и внедрение зависимости. И это все происходит на стороне браузера в Javascript, что делает AngularJS идеальным партнером для любой серверной технологии.
Angular – это то, чем мог бы быть HTML, если бы на HTML разрабатывали приложения. HTML – замечательный декларативный язык для статических документов. Но, он не содержит ничего для создания приложений, и как результат разработка веб-приложения сводится к упражнению "что я должен сделать, чтобы обмануть браузер и сделать то, что я хочу".
В основном, статические документы становятся динамическими, используя два подхода:
Angular не является каким-то одним элементом мозаики в построении клиентского веб-приложения. Он управляет всем кодом, который написан для DOM-элементов и AJAX-вызовов, и содержит этот код в хорошо организованной структуре. Это делает Angular чрезвычайно уверенным в том, как должны быть построены приложениия, выполняющие такие операции, как создание, чтение, обновление и удаление данных (CRUD). Но не смотря на эту уверенность, он настолько гибок, что шаблон постороения приложений может быть изменен по желанию разработчика. Вот стартовый набор инструментов, который предоставляет Angular:
Angular упрощает разработку приложения, предоставляя разработчику более высокий уровень абстракции. А любая абстракция жертвует гибкостью. Проще говоря, не любое приложение подходит Angular. Angular был создан в основном для CRUD-приложений. К счастью CRUD-приложения составляют 90% от всех веб-приложений. Чтобы понять подходит ли Angular для конкретного приложения, лучше объясним, когда приложению не нужен Angular.
Игры или редакторы с богатым пользовательским интерфейсом - это примеры, где идет очень интенсивная работа с DOM-элементами. Этот вид приложений сильно отличается от CRUD-приложений, и соответственно, не очень подходит для Angular. В таких случаях нужно что-то близкое к голому металлу, наверно jQuery окажется более удачным выбором.
Рассмотрим простое 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 >
Элементы ввода выглядят хорошо, но рассмотрим следующие нюансы:
И наконец, мистические {{ двойные фигурные скобки }}:
Total: {{qty * cost | currency}}
Это разметка Angular для связывания данных. Она сосотоит из комбинации выражения и фильтра: {{ expression | filter }}. В Angular фильтры используются для форматирования выводимых данных.
В приведенном примере, выражение в двойных фигурных скобках указывает Angular взять данные из элементов формы, перемножить их представить полученный результат в виде валюты.
Заметим, что мы добились нужного поведения приложения без вызовов методов из Angular и без специфичной реализации поведения как для фреймворка. Браузер "понял" из разметки, что нужно сделать. Angular избавил от необходимости написания вызовов библиотеки/фреймворка.
Copyright © CodeHint.ru 2013-2025 (v2.4.7 - работает на Angular Universal)Калькулятор инвест-портфеля