Учебник AngularJS: Всеобъемлющее руководство, часть 1

Original author: Todd Motto
  • Translation
  • Tutorial

Содержание


1 Введение в AngularJS
2 Engineering concepts in JavaScript frameworks
3 Modules
4 Understanding $scope
5 Controllers
6 Services and Factories
7 Templating with the Angular core
8 Directives (Core)
9 Directives (Custom)
10 Filters (Core)
11 Filters (Custom)
12 Dynamic routing with $routeProvider
13 Form Validation
14 Server communication with $http and $resource

1 Введение в AngularJS


Angular – MVW-фреймворк для разработки качественных клиентских веб-приложений на JavaScript. Он создан и поддерживается в Google и предлагает взглянуть на будущее веба, на то, какие новые возможности и стандарты он готовит для нас.

MVW означает Model-View-Whatever (модель – вид – что угодно), то есть гибкость в выборе шаблонов проектирования при разработке приложений. Мы можем выбрать модели MVC (Model-View-Controller) или MVVM (Model-View-ViewModel).

Этот обучающий материал задумывался как отправная точка для изучения AngularJS, его концепций и API, чтобы помочь вам создавать великолепные веб-приложения современным способом.

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

Инженерные концепции в фрейморках JavaScript


Позиция AngularJS по работе с данными и другими инженерными концепциями отличается от таких фреймворков, как Backbone.js and Ember.js. Мы довольствуемся уже известным нам HTML, а Angular самостоятельно его улучшает. Angular обновляет DOM при любых изменениях Модели, которая живёт себе в чистых Объектах JavaScript с целью связи с данными. Когда обновляется Модель, Angular обновляет Объекты, которые содержат актуальную информацию о состоянии приложения.

2.1 MVC и MVVM


Если вы привыкли делать статичные сайты, вам знаком процесс создания HTML вручную, кусочек за кусочком, когда вы вписываете в страницу нужные данные и повторяете сходные части HTML снова и снова. Это могут быть столбцы решётки, структура для навигации, список ссылок или картинок, и т.п. Когда меняется одна маленькая деталь, приходится обновлять весь шаблон, и все последующие его использования. Также приходится копировать одинаковые куски кода для каждого элемента навигации.

Держитесь за кресло – в Angular существует разделение обязанностей и динамический HTML. А это значит, что наши данные живут в Модели, наш HTML живёт в виде маленького шаблона, который будет преобразован в Вид, а Контроллер мы используем для соединения двух этих понятий, обеспечивая поддержку изменений Модели и Вида. То есть, навигация может выводиться динамически, создаваясь из одного элемента списка, и автоматически повторяться для каждого пункта из Модели. Это упрощённая концепция, позже мы ещё поговорим о шаблонах.

Разница между MVC и MVVM в том, что MVVM специально предназначен для разработки интерфейсов. Вид состоит из слоя презентации, ВидМодель содержит логику презентации, а Модель содержит бизнес-логику и данные. MVVM была разработана для облегчения двусторонней связи данных, на чём и процветают фреймворки типа AngularJS. Мы сосредоточимся на пути MVVM, так как в последние годы Angular склоняется именно туда.

2.2 Двусторонняя связь данных


Двусторонняя связь данных – очень простая концепция, предоставляющая синхронизацию между слоями Модели и Вида. Изменения Модели передаются в Вид, а изменения Вида автоматически отражаются в Модели. Таким образом, Модель становится актуальным источником данных о состоянии приложения.

Angular использует простые Объекты JavaScript для синхронизации Модели и Вида, в результате чего обновлять любой из них легко и приятно. Angular преобразовывает данные в JSON и лучше всего общается методом REST. При помощи такого подхода проще строить фронтенд-приложения, потому что всё состояние приложения хранится в браузере, а не передаётся с сервера по кусочкам, и нет опасения, что состояние будет испорчено или потеряно.

Связываем мы эти значения через выражения Angular, которые доступны в виде управляющих шаблонов. Также мы можем связывать Модели через атрибут под названием ng-model. Angular использует свои атрибуты для разных API, которые обращаются к ядру Angular.

2.3 Инъекция зависимостей (Dependency Injection, DI)


DI – шаблон разработки программ, который определяет, как компоненты связываются со своими зависимостями. Инъекция — это передача зависимости к зависимому Объекту, и эти зависимости часто называют Сервисами.

В AngularJS мы хитрым образом используем аргументы функции для объявления нужных зависимостей, а Angular передаёт их нам. Если мы забудем передать зависимость, но сошлёмся на неё там, где она нужна нам, Сервис будет не определен и в результате произойдёт ошибка компиляции внутри Angular. Но не волнуйтесь, angular выбрасывает свои ошибки и они очень просты в отладке.

2.4 Приложения на одну страницу (Single Page Application, SPA), управление состоянием и Ajax (HTTP)


В приложении на одну страницу (SPA) либо весь необходимый код (HTML, CSS and JavaScript) вызывается за одну загрузку страницы, либо нужные ресурсы подключаются динамически и добавляются к странице по необходимости, обычно в ответ на действия пользователя. Страница не перезагружается во время работы, не передаёт управление другой странице, хотя современные технологии из HTML5 позволяют одному приложению работать на нескольких логических страницах. Взаимодействие с SPA часто происходит при помощи фонового общения с сервером.

В более старых приложениях, когда состояние программы хранилось на сервере, случались различия между тем, что видит пользователь и тем, что хранилось на сервере. Также ощущалась нехватка состояния приложения в модели, так как все данные хранились в шаблонах HTML и динамичными не являлись. Сервер подготавливал статичный темплейт, пользователь вводил туда информацию и браузер отправлял её обратно, после чего происходила перезагрузка страницы и бэкенд обновлял состояние. Любое несохранённое состояние терялось, и браузеру нужно было скачивать все данные после обновления страниц заново.

Времена изменились, браузер хранит состояние приложение, сложная логика и фреймворки приобрели популярность. AngularJS хранит состояние в браузере и передаёт изменения при необходимости через Ajax (HTTP) с использованием методом GET, POST, PUT и DELETE. Красота в том, что сервер может быть независим от фротенда, а фронтенд – от сервера. Те же самые сервера могут работать с мобильными приложениями с совершенно другим фронтендом. Это даёт нам гибкость, так как на бэкенде мы работаем с JSON-данными любым удобным нам способом на любом серверном ЯП.

2.5 Структура приложения


У Angular есть разные API, но структура приложения обычно одна и та же, поэтому почти все приложения строятся сходным образом и разработчики могут включаться в проект без усилий. Также это даёт предсказуемые API и процессы отладки, что уменьшает время разработки и быстрое прототипирование. Angular построен вокруг возможности тестирования («testability»), чтобы быть наиболее простым как в разработке, так и в тестировании.

Давайте изучать.

3 Модули


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

3.1 Сеттеры (setters).



У приложения есть один модуль app.

angular.module('app', []);


Вторым аргументом идёт [] – обычно этот массив содержит зависимости модуля, которые нам нужно подключить. Модули могут зависеть от других модулей, которые в свою очередь тоже могут иметь зависимости. В нашем случае массив пустой.

3.2 Геттеры (Getters)


Для создания Controllers, Directives, Services и других возможностей нам надо сослаться на существующий модуль. В синтаксисе есть незаметное различие – мы не используем второй аргумент.

angular.module('app');


3.3 Работа модулей

Модули могут храниться и вызываться и через переменную. Вот пример хранения модуля в переменной.

var app = angular.module('app', []);


Теперь мы можем использовать переменную app для построения приложения.

3.4 HTML бутстрап


Для описания того, где приложение находится в DOM, а обычно это элемент <html>, нам надо связать атрибут ng-app с модулем. Так мы сообщаем Angular, куда подгрузить наше приложение.

<html ng-app="app">
  <head></head>
  <body></body>
</html>


Если мы грузим файлы с JavaScript асинхронно, нам надо подгрузить приложение вручную через angular.bootstrap(document.documentElement, ['app']);.

4 Разбираемся со $scope


Одно из основных понятий в программировании – область видимости. В Angular область видимости – это один из главных объектов, который делает возможным циклы двусторонней связи данных и сохраняет состояние приложения. $scope – довольно хитрый объект, который не только имеет доступ к данным и значениям, но и предоставляет эти данные в DOM, когда Angular рендерит наше приложение.

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

$scope используется только внутри Контроллеров. Там мы привязываем данные Контроллера к Виду. Вот пример того, как мы объявляем данные в Контроллере:

$scope.someValue = 'Hello';


Чтобы это отобразилось в DOM, мы должны присоединить Контроллер к HTML и сообщить Angular, куда вставлять значение.

<div ng-controller="AppCtrl">
  {{ someValue }}
</div>


Перед вами концепция области видимости Angular, подчиняющаяся некоторым правилам JavaScript в плане лексических областей видимости. Снаружи элемента, к которому присоединён Контроллер, данные находятся вне области видимости – так же, как переменная вышла бы за область видимости, если б мы сослались на неё снаружи её области видимости.

Мы можем привязать любые типы JavaScript $scope. Таким образом мы берём данные от сервиса, общающегося с сервером, и передаём их во View, слой презентации.

Чем больше мы создадим Контроллеров и связей с данными, тем больше появляется областей видимости. Разобраться в их иерархии ничего не стоит – здесь нам поможет переменная $rootScope

Часть 2
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 29

    +10
    Интересно услышать мнение новичков о этом переводе. У меня есть подозрение, что не знай я angular, у меня бы осталась одна каша в голове от прочтения этой статьи. Написать об двустороннем связывании, одной из основных фишек фреймворка, и директиве ng-model без единого примера не очень информативно.
    На мой взгляд, при изучении angular просто необходимы примеры, желательно со ссылкой на jsfiddle, так как концепция очень отличается от других технологий.
    Хотя цикл переводов будет несомненно полезен и интересен. Надеюсь в последующих публикациях почерпну для себя что-то новое.
      +2
      Я новичок в Angular и насколько я понял $scope не предоставляет, как можно подумать из статьи, ссылки на DOM объекты, а взаимодействует только с данными. Когда я только начал разбираться с Angular первые же мои грабли были именно эти! Как позже оказалось получить сам DOM объект можно через директивы. Самое сложное при изучении выкинуть из головы jQuery подход.
        +3
        А я с опытом выработал правило, что никакого DOM объекта получать не нужно, и если я пытаюсь это сделать, то где-то свернул не туда. Выкинуть из головы jQuery подход, — первое что необходимо сделать работая с angular.
          +1
          Вы абсолютно правы. DOM нужен для каких-то уберспецифичных вещей, и такие вещи лучше инкапсулировать в директивы.
      +2
      Очень хорошо, если такое руководство будет на Хабре. Как подметили выше — без примеров сложновато. Пример helloworld был бы очень кстати, чтобы новичок сразу въехал что к чему. Но, это перевод…

      Сам сейчас занимаюсь написанием CRM на AngularJS в связке с Ruby, получается очень элегантно и функционально. В такой связке очень удобно разделяется front- и back-end. Пугает другое — с появлением все новых и новых модулей в приложении, кол-во подключенных библиотек уже зашкаливает за 20 штук. И это только начало. Боюсь представить, в какого неповоротливого монстра может превратиться js-файл после склейки в продакшене… И вторая проблема — видимость для поисковых роботов. Понятное дело, что для CRM-системы это не важно. Но как делать доступные для индексации сайты на базе Angular? Без использования того же prerender.io или дублирования шаблонов на стороне сервера.

      Немного критики по переводу: почему bootstrap — присобачивание?
        +1
        Но как делать доступные для индексации сайты на базе Angular?

        Я использую для этого PhantomJs. Выходит просто и быстро без дублирования кода и сторонних сервисов. Планирую написать статью в ближайшее время на эту тему.
          0
          Правильно ли я понял, что здесь требуется установка на сервер? Проблема заключается в том, что, как правило, «обычные сайты» хостятся на «обычных хостингах», на самых обычных тарифах (не выделенный/виртуальный сервер) и мало кто из хостеров захочет ставить что-то у себя. Из-за этого многие плюшки так и остаются мечтами.

          Но узнать подробнее о PhantomJs было бы очень интересно, жду с нетерпением статьи. :)
            0
            Во-первых, PhantomJs работает на большинстве самых обычных хостингов (shared hosting), за исключением наверно бесплатных или самых дешевых. На моем опыте он запускался без проблем на 4-х из 5-ти.
            Во-вторых, для себя я решил что лучше установить его на своем vps хостинге, к которому все ваши приложения могут обращаться для рендера своих страниц. С использованием кэша все выходит быстро и просто.
              0
              Prerender.io
                +1
                  0
                  Как я понял, расценки актуальны в том случае, если использовать их сервера. А если разворачивать на своем, то библиотека бесплатна. Или ошибаюсь?
                    0
                    Да, можно поднять сервер и запустить свой сервис.
                    We host this as a service at prerender.io but we also open sourced it
          0
          Ваш вариант?
            0
            Может быть… загрузка? «Если мы подгружаем файлы с JavaScript асинхронно, нам надо загрузить приложение вручную...» Ну, или связать, инициализировать. В том смысле, что не обязательно ведь дословно пытаться перевести, главное суть.
            Просто само по себе слово «присобачить» (по крайней мере у меня) вызывает ассоциации с каким-то гаражным автосервисом, где при свете лампочки, с помощью отвертки и тестера чинят инжектор.
              +1
              Поменял на «подгрузить». «Связать» используется в контексте data binding.
        • UFO just landed and posted this here
            +2
            +1, кстати. Плюс к тому, я вот Angular пока не умею, и из этой статьи почти ничего мне для себя вынести не удалось. Если там и остальные главы такие же, то караул.
              –1
              ngBook, к сожалению, платная. А рекомендация всем быстренько выучить английский неосуществима.
              • UFO just landed and posted this here
                  0
                  Я не про то, что её никто не может себе позволить. Я про то, что я не могу её перевести и выложить на хабре.
              +2
              В 2 раза больше кода, в 2 раза меньше текста надо для изучения чего-то, т.к. практика важнее.
                0
                А как насчет поддержки кода? Вроде как ang2.0 полностью переписан и ничего общего не имеет с текущей версией…
                  0
                  Цитата с angularjs.blogspot.se:
                  What about Migrating from 1.3 to 2.0?

                  Our goal with Angular 2 is to make the best possible set of tools for building web apps not constrained by maintaining backwards compatibility with existing APIs. Once we have an initial version of Angular 2, we'll start to work on a migration path for Angular 1 apps.

                  We know that you have invested a lot of time learning how to build web apps with Angular. Since we are preserving most of the core concepts, this knowledge will help you be proficient in Angular 2 much faster.
                  • UFO just landed and posted this here
                    0
                    Я новичок в angular и нифига не понял и из этц статьи. Даже не понял как сделать hello world((.
                    Посмотрим на вторую часть.
                      0
                      А можно ссылку на оригинал?
                        0
                        В статьях с меткой «перевод» ссылка на оригинал находится в конце статьи, рядом с именем Автора поста на хабре.
                          0
                          Нашла, спасибо. Очень уже мелко.
                      • UFO just landed and posted this here

                        Only users with full accounts can post comments. Log in, please.