AngularJS: Введение и пример Hello World

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

Причина этому проста – AngularJS завлекает.

Если у вас есть опыт использования JQuery  и вы попытаетесь изучить Angular, вы будете просто впечатлены фреймворком. Просто поразительно, как много вы можете сделать всего лишь несколькими строчками кода AngularJS. Мы помним фреймворк JQuery делал тоже самое, когда только появилась на свет в далеком 2006 году. Разработчки привыкли писать сотни или даже тысячи строк кода на чистом JavaScript только для того, что бы заставить требуемую логику работать на различных браузерах. JQuery изменила эту парадигму с помощью селекторов, кастомных событий и анимации.

С развитием веба, развиваются и веб-технологии. Браузеры становятся все быстрее и быстрее изо дня в день. Сейчас просто нету смысла рендерить полностью HTML страницу на серверной стороне – браузер делает это точно также. С повсеместным применением AJAX все больше и больше страниц генерируются динамически. Началась новая волна одностраничных приложений (SPA – Single Page Applications) – которая ведет к увеличению использования различных front-end фреймворков, таких как Backbone, Knockout, Ember, Angular.

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

Итак двайте погрузимся в мир AngularJS.

Введение в AngularJS

AngularJS если можно так сказать – супергероический JavaScript MVW фреймворк. Он помогает создавать одностраничные приложения. Его цель  - добавить в браузерные приложения поддержку MVC (Model – View - Controller), что сделает и процесс разработки и процесс отладки проще.

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

MVW – Model View Whatever

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

Для Angular на самом деле безразлично какую вариацию паттерна вы будете использовать в своем приложении, поэтому данный паттерн можно назвать MVW – или Model-View-Whatever (whatever – что угодно). Основная концепция MVW – все определения связаны с именованым Модулем. Позже Модули могут объединятся в завершенную форму веб приложений. Модули могут зависеть друг от друга, таки образом включение модуля в ваше приложение потребует включения и других зависимых модулей. AngularJS предоставляет богатый набор API для объявления модулей и связывания их вместе посредством dependency injection (внедрение зависимостей – паттерн объединения отдельных модулей системы в одно целое). Мы увидим это более подробно в последующих статьях.

Простейший пример, AngularJS

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

Для написания примера на Angular, все что нам нужно – это подключить библиотеку Angular JS в наш HTML документ.

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

Отлично, теперь определим нашу таблицу как показано ниже.

<!DOCTYPE html> <html ng-app> <head>     <title>Hello World, AngularJS - ViralPatel.net</title>     <script type="text/javascript"         src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body>           Write some text in textbox:     <input type="text" ng-model="sometext" />     <h1>Hello {{ sometext }}</h1>       </body> </html>

Если вы хотите поменять что то и поэкспериментировать с кодом, это можно следать в JSFiddle: http://jsfiddle.net/viralpatel/vFcZ7/

Просто напишите какой-нибудь текст в демо и посмотрите как меняется значение после слова “Hello”.

Обратите внимание что мы не написали ни строчки JavaScript кода, а пример все равно работает. Мистика! Давайте теперь попробуем разобрать пример строчка за строчкой. Мы поместили в HTML документ несколько тегов относящихся к Angular.

ng-app

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

Если вы используете IE7 – добавьте конструкцию вида id=”ngapp”. Например:

<html ng-app id="ng-app">

Если вы используете такой синтакс, вам кроме этого следует добавить xml-неймспейс в html. Это сделает ваш IE счастливым.

<html xmlns:ng="http://angularjs.org">

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

Мы задали аттрибут ng-model в текстбоксе как ng-model=”sometext”. ng-model привязывает состояние текстбокса к значению модели. В нашем случае мы определили модель sometext. Значение этой модели привязано к состоянию текстбокса с помощью аттрибута ng-model. Таким образом, когда значение в текстбоксе изменится, Angular автоматически обновит значение в модели sometext. Это называется двухсторонней привязкой данных. Аналогичным образом, если мы изменим значение в модели, Angular обновит в соответствии с нашими изменениями значение текстбокса. Двухсторонняя привязка данных – ключевая магия Angular. Это просто работает. Вы узнаете о данной функциональности более подробно как только мы начнем усложнять наш пример.

Двухсторонняя привязка данных AngularJS – наиболее значимая особенность фреймворка, которая уменьшает количество кода, которое требуется написать для реализации подобной функциональности.

{{ sometext }}

Обратите внимание как мы выделяем использование нашей модели с помощью двойных фигурных скобок. Этот синтаксис говорит фреймворку привязать значение модели sometext к месту определения {{ sometext }}.

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

ng-show / ng-hide

Теперь давайте пойдем немного дальше и внесем в пример небольшое изменение – добавим еще один аттрибут Angular – ng-show. В коде представленом ниже мы добавили аттрибут ng-show=”sometext” в тег h1.

<script type="text/javascript"

        src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

Это единственное изменение, и вот что мы получили.

<!DOCTYPE html>

<html ng-app>

<head>

    <title>Hello World, AngularJS - ViralPatel.net</title>

    <script type="text/javascript"

        src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

</head>

<body>

     

    Write some text in textbox:

    <input type="text" ng-model="sometext" />

    <h1 ng-show="sometext">Hello {{ sometext }}</h1>

     

</body>

</html>

Если вы хотите поэкпериментировать с обновленным кодом, это можно сделать  в JSFiddle: http://jsfiddle.net/viralpatel/ppgsS/

В данном примере, текст Hello не появится до тех пор пока в текстбоксе не будет введен текст. Мы добавили только один маленький аттрибут в тег h1 и посмотрите как изменилась функциональность!

Аттрибут ng-show показывает элемент, в зависимости от значения булевого выражения. Подобно ng-show другой  аттрибут ng-hide – делает все также, но в точности наоборот. 

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

AngularJS Filters

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

{{ expression | filter }}

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

{{ expression | filter1 | filter2 }}

По умолчанию AngularJS предоставляет небольшой набор встроеных фильтров которые мы может использовать в нашем приложении. Также можно определить свой собственный фильтр. Для начала давайте посмотрим как работают встроенные фильтры.

Фильтры uppercase and lowercase

Как можно догадаться из имени, фильтры переводят выражение в верхний и нижний регистры соответствено. Давайте рассмотрим небольшой пример. Для этого внесем небольшие изменения в наш пример – добавим использование фильтра uppercase.

<!DOCTYPE html>

<html ng-app>

<head>

    <title>Hello World, AngularJS - ViralPatel.net</title>

    <script type="text/javascript"

        src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

  

</head>

<body>

      

    Write some text in textbox:

    <input type="text" ng-model="sometext" />

  

    <h1>Hello {{ sometext }}</h1>

    <h4>Uppercase: {{ sometext | uppercase }}</h4>

    <h4>Lowercase: {{ sometext | lowercase }}</h4>

      

</body>

</html>

Если вы хотите изменить что то или посмотреть как это работает обратитесь к коду доступному в JSFiddle: http://jsfiddle.net/viralpatel/nZ5sH/

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

Кроме рассмотренных выше фильтров, Angular имеет в своем арсенале следующие фильтры:

date

{{ date_expression | date[:format] }}

Форматирует дату в строку заданного формата. Обратитесь к документации Angular  за подробностями форматирования.

number

Использование:

{{ number_expression | number[:fractionSize] }}

Преобразует число в строку заданного формата. Если значение не число - возвращает пустую строку.

Кроме того существуют другие фильтры, такие как json, limitTo, filter, orderBy. Мы вскользь коснемся их использования в последующих статьях. Сейчас же за подробностями обращайтесь к документации Angular по фильтрам.

Вот и все

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

В данной публикации мы познакомились с самыми простейшими возможностями AngularJS и рассмотрели как подготовить окружение нашей страницы для работы с Angular. Кроме того мы рассмотрели различные аттрибуты, такие как ng-app, ng-model, ng-show и т.д. и рассмотрели как ими пользоваться. После этого мы познакомились с фильтрами и рассмотрели их работу на примере фильтров uppercase и lowercase.

http://viralpatel.net/blogs/angularjs-introduction-hello-world-tutorial/