Примеры angular: Введение в AngularJS. Примеры

Большие сайты на AngularJS

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

Что такое AngularJS и где он используется?

AngularJS (Angular, Ангулар) — это JS фреймворк для frontend-разработчиков, с помощью которого можно создавать одностраничные веб-приложения (Single Page Application). На первый взгляд такие приложения не отличаются от обычных веб-страниц. Тогда как определить, что перед нами веб-приложение? Если когда приходит письмо, появляются новые записи в ленте друзей или мы подтверждаем отправку формы страницу не приходится перегружать, чтобы увидеть обновления, то перед нами пример приложения на AngularJS или другом JS фреймворке. Например, современная версия почтовой службы от Google — это веб-приложение:

Однако AngularJS разработчики используют фреймворк не только для создания веб-сайтов социального направления и аналогов Google Docs. Сфера применения AngularJS гораздо шире, о чем свидетельствуют примеры ниже. Разработка веб-приложений с использованием AngularJS становится все более и более популярной, о чем свидетельствует стремительный рост количества сайтов, использующих этот фреймворк, зафиксированный компанией BuiltWith:

Ниже мы собрали примеры AngularJS из самых разных сфер деятельности.

Большие сайты на AngularJS

The Guardian

Сайт британской газеты существует уже шесть лет и по состоянию на сентябрь 2015 года занимает третье место по посещаемости среди национальных новостных изданий, которые доступны онлайн. Пользовательский интерфейс веб-сайта представляет собой AngularJS приложение, написанное в соответствии с ES 2015, последним стандартом JavaScript:

Чтобы создать бесконечную прокрутку результатов поиска, разработчики The Guardian использовали возможности Angular вместе с расширениями RxJS для реактивного программирования, которое ориентировано на работу с изменениями.

Также AngularJS используется в Grid, системе управления изображениями издания. В ней хранится более 3 миллионов изображений и около 20 тысяч добавляется ежедневно. Как и многие другие компании, поддерживающие развитие полезных проектов с открытым исходным кодом, издание The Guardian сделало систему Grid доступной на Github:

Что касается перехода на AngularJS 2.0 (дата релиза бета-версии: 15 декабря 2015 года), то, не смотря на его сложности, senior-разработчик издания The Guardian отмечает, что новая версия Angular соответствует текущим тенденциям развития интернет-технологий.

PayPal

Компания PayPal предоставляет услуги электронных платежей в 203 странах и регионах и работает с 26 валютами. AngularJS разработчики компании использовали фреймворк в системе оформления и оплаты заказа (PayPal Checkout), которая состоит из:

1. Родительской страницы
2. Страницы проверки платежа
3. Сайдбара
4. Страницы добавления новой кредитной карты

Weather.com

Американский кабельный и спутниковый канал The Weather Channel обзавелся собственным веб-сайтом еще в далеком 1996 году. Сегодня, согласно данным SimilarWeb, weather.com — самый посещаемый погодный сайт в мире.

В 2014 году сайт канала мигрировал на Drupal, систему управления сайтом, которая использует компоненты Symfony2. На weather.com используется большое количество виджетов, которые нужно загружать как для настольной, так и для мобильной версии сайта. Получение данных для виджетов реализовано с помощью модулей AngularJS, которые расположены в отдельной директории.

YouTube для PS3

Youtube — видеохостинг, принадлежащий компании Google, стоимость которого оценивают в 70 миллиардов долларов США. У сервиса один миллиард пользователей, что составляет треть пользователей Интернета в мире. YouTube доступен на большом количестве устройств, в том числе на консолях от компании Sony. Приложение для PS3 написано с использованием JS-фреймворка AngularJS:

VEVO

На сайте музыкального сервиса собрано 150 тысяч видеоклипов, распространяющихся с согласия правообладателей. VEVO получает 12 миллиардов просмотров ежемесячно. При этом для создания фронт-энда сайта использовался JavaScript-фреймворк AngularJS:

Lego.com

К запуску мини-серии Rebels, посвященной миру «Звездных войн», датская компания Lego, основанная еще в 1932 году, заказала создание интерактивного конструктора постеров:

Разработчики решения использовали технику парного программирования, при которой двое людей («ведущий» и «штурман») используют одно рабочее место. «Ведущий» решает проблему в деталях, а «штурман» следит за процессом написания кода и сосредоточен над общей картиной. Через равные промежутки времени они меняются ролями. Используя фреймворк AngularJS, сборщик JS-проектов Browserify и плагин LESS им удалоcь создать быстрое и легковесное решение для продвижения нового продукта компании.

Upwork и Freelancer

Обе фриланс-биржи достаточно популярны:

1. Количество фрилансеров: 10 миллионов для Upwork и 18 миллионов для Freelancer.
2. Среднее количество доступных проектов: 3,6 миллиона для Upwork и 4,4 для Freelancer.

При этом и Upwork, и Freelancer используют AngularJS:

jetBlue

Популярная американская лоукост авиакомпания, самолетами которой ежегодно летает 35 миллионов людей. jetBlue совершает около 900 перелетов ежедневно и доставляет пассажиров в 95 городов США, стран Карибского бассейна и Латинской Америки. На текущей версии сайта jetBlue используется AngularJS:

iStock Photo

Микросток с royalty-free фотографиями, иллюстрациями, аудио и видео принадлежит компании Getty Images. AngularJS используется на главной странице сервиса:

Localytics

Сервис бизнес-аналитики для разработчиков и владельцев приложений помогает планировать маркетинговые кампании. Его услугами пользуется 6000 организаций, в том числе Microsoft, The New York Times, Zipcar, HBO и The Weather Channel, о котором мы писали выше.

Разработчики хотели перенести сервис на JS фреймворк, который предлагает больше возможностей «из коробки». Им пришелся по душе набор плагинов (suite) AngularJS UI который помогает решать распространенные проблемы, связанные с пользовательским интерфейсом. При этом использование AngularJS позволило сократить количество строчек кода по сравнению с предыдущим фреймворком:

Топ-сайты на AngularJS, приведенные выше, свидетельствуют о том, что этот JS фреймворк подходит для создания решений в разных сферах, от видеохостингов и развлекательных порталов до сервисов бизнес-аналитики и сайтов транспортных компаний.

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

пример использования NGRX / Хабр

Эта статья является продолжением поста «Angular: понятное введение в NGRX»

Пример NGRX

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

План действий:

1. Установка библиотеки
2. Создание структуры папок для хранилища
3. Создание хранилища и начальных значений
4. Создание действий (Actions)
5. Создание редукторов (Reducers)
6. Создание эффектов (Effects)
7. Создание селекторов (Selectors)
8. Конечная настройка
9. Использование хранилища в компонентах

Итак, давайте сделаем это…

Установка библиотеки

Мы собираемся использовать Angle Cli для создания проекта, а затем мы добавим библиотеки ngrx.

Создадим проект:

ng new angular-ngrx --style=scss

Добавим необходимые библиотеки NGRX:

npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save

Мы устанавливаем почти все библиотеки экосистемы ngrx. Большинство из них достаточно ясно описывают их назначение: ядро, хранилище, эффекты, но есть пара, для которой вы можете задаться вопросом, для чего они нужны?

• store-devtools — Мощный инструмент для отладки.
• router-store — Сохраняет состояние роутера angular в хранилище.

Структура папок для хранилища

Начнем с обсуждения файловой структуры хранилища. Эта файловая структура и вся конфигурация хранилища должна существовать в основном модуле вашего приложения, но в нашем примере она отсутствует, поэтому хранилище будет существовать в основном модуле нашего приложения (шаги практически одинаковые, если вы делаете это в основном модуле).

Структура папок является представлением фактической композиции хранилища. У вас будет основная папка с названием «store» и пять подпапок, которые представляют каждого из ключевых игроков магазина: «Actions», «Effects», «Redurs», «Selectors» и «State».

Создание хранилища и начальных значений

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

Мы создали два интерфейса для определения пользователя и конфигурации. У нас также есть один для ответа HTTP пользователя, это просто массив IUser.

Начнем с состояния пользователя (store/state/user.state.ts):

Что мы здесь делаем:

1. Мы создаем и экспортируем интерфейс со структурой пользовательской среды.
2. Мы делаем то же самое с начальным пользовательским состоянием, которое реализует недавно созданный интерфейс.

Для состояния конфигурации мы делаем то же самое (store/states/config.state.ts):

Наконец, нам нужно сгенерировать состояние приложения (store/states/app.state.ts):

1. Состояние приложения содержит состояние пользователя и конфигурации, а также состояние маршрутизатора.
2. Потом задаем начальное состояние приложения.
3. Наконец, экспортирует функцию, чтобы получить начальное состояние (мы будем использовать его позже).

Создание Действий

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

Нам нужно создать действия для пользователей и настройки. Начнем с действий пользователя (store / actions / user.actions.ts):

Давайте немного пройдемся по коду:

1. Мы экспортируем Enum, содержащий определение для типов действий. Таким образом, мы избегаем использования и повторения строк для использования типов действий, процесс, который может легко порождаться ошибками.
2. Потом мы создаем и экспортируем класс для каждого из ваших действий. Все они должны реализовать интерфейс Action из ngrx. Наконец, мы устанавливаем тип в одно из значений перечислений, и если вам нужно полезное содержимое для действия, вы добавляете его в конструктор класса.
3. Наконец, мы экспортируем тип, содержащий наши классы действий. Это обеспечит нам проверку типов, которую мы можем использовать, например, в наших редукторах.

И это все… создавать действия просто. Давайте посмотрим, как выглядят действия конфигурации (store/actions/config.actions.ts):

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

Отлично, мы уже определили состояние и действия… давайте создадим редукторы!

Создание Редукторов

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

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

Нам понадобится редуктор для пользователей и другой для конфигурации, но нам также понадобится генерировать редукторы приложений, давайте начнем с рассмотрения редукторов пользователей (store/redurs/user.reducers.ts):

Давайте обсудим реализацию:

1. Объявление редуктора получает состояние и, в этом случае, действия пользователя и возвращает IUserState.
2. Используя оператор switch, мы генерируем наблюдения для каждого возможного типа действия.
3. Каждый случай возвращает новый объект, который является результатом слияния старого состояния и нового значения.
4. Все редукторы имеют результат по умолчанию, который просто возвращает состояние без каких-либо изменений.

И это все. Вы не найдете ничего другого в редукторе. Давайте взглянем на редукторы конфигурации (state/redurs/config.reducers.ts):

Наконец, давайте посмотрим на редукторы приложений (store):

Здесь мы добавляем все редукторы на карту редукторов действий приложения. Мы используем карту редуктора действий для дополнительной проверки типов. Позже мы собираемся предоставить это приложение редукторы для модуля store.

Добавим Эффекты

Обязательно прочтите определение «Эффекты», которое мы обсуждали в предыдущей статье.

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

Начнем с пользовательских эффектов (store/effects/user.effects.ts):

Много что происходит в этом файле. Давайте попробуем объяснить их:

1. Мы объявляем наши пользовательские эффекты с помощью инъекционного декоратора.
2. Мы объявляем наши эффекты, используя декоратор эффектов, предоставленный ngrx/Effects.
3. Используя действия, предоставленные ngrx / Effects, мы собираемся запустить конвейер нашего оператора для этого эффекта.
4. Следующим шагом является установка типа действия эффекта с помощью оператора ofType.
5. Следующие части представляют собой операторы rxjs, которые мы используем для получения того, что нам нужно (у нас уже есть ссылка на документацию по rxjs в этой статье).
6. Наконец, в последнем операторе Effect отправит еще одно действие.
7. В конструкторе мы внедряем сервисы, которые мы собираемся использовать, действия для ngrx / Effects, и в этом случае также хранилище (учтите, что это демо, и мы получаем выбранного пользователя из списка пользователей в наше хранилище).

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

Рассмотрим эффекты конфигурации (store/effects/config.effects.ts):

Теперь пришло время поговорить о селекторах…

Создание Селекторов

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

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

Как всегда, давайте сначала посмотрим на пользовательские селекторы (store/selectors/user.selectors.ts):

Это действительно понятно, потому что мы не делаем никаких трансформаций данных в наших селекторах, а просто возвращаем срез хранилища, на который ссылается селектор, используя функцию createSelector из ngrx/store.

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

Давайте посмотрим на конфигурационные селекторы (store/selectors/config.selectors.ts):

Итоговая настройка

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

Давайте дополним модуль приложения:

Что мы здесь сделали:

1. Мы импортируем наши редукторы и предоставляем их в forRoot модуля хранилища.
2. Мы импортируем наши эффекты и предоставляем их внутри массива в модуль forRoot эффектов.
3. Мы устанавливаем конфигурацию для модуля состояния маршрутизатора, предоставляющего маршрутизатор stateKey.
4. И мы добавляем инструменты разработчика магазина, если среда не является производственной.

Первые два шага необходимы, в то время как шаги 3 и 4 я настоятельно рекомендую, но они не являются обязательными.

Теперь мы наконец сделали… мы можем использовать наше хранилище в компонентах!

Использование хранилища в некоторых компонентах

Мы приближаемся к концу! Давайте посмотрим, как использовать наше хранилище…

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

1. Мы добавляем хранилище в наш app.component.
2. Мы устанавливаем для свойства компонента значение селектора в конфигурации, потому что хотим отобразить часть этой информации в HTML.
3. В onInit мы отправляем действие, чтобы получить конфигурацию.

Вот и все… Мы уже кодируем эффект, который будет управлять этим действием, и редуктор, который будет обрабатывать этот эффект. Как только Хранилище перейдет в новое состояние, селектор изменит значение нашего свойства.

Как это связывать с HTML:

Как только у config$ будет значение, мы увидим его в HTML.

Теперь посмотрим список пользователей (containers/users/users.component.ts):

1. Подобно тому, как мы управляем конфигурацией, мы собираемся получить список пользователей. Сначала мы внедряем хранилище в компонент пользователя.
2. На onInit мы отправляем действие, чтобы получить пользователей.
3. Мы создаем свойство для компонента и присваиваем ему список пользователей, используя селектор списка пользователей.

HTML выглядит так:

Мы отображаем список пользователей в компоненте презентации, посылая список и связывая выбранного пользователя с функцией навигации, которую можно увидеть в компоненте пользовательского контейнера выше.

Давайте посмотрим на компонент пользовательского контейнера:

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

Если вы отлаживаете приложение, вы можете увидеть инструменты разработчика, которые довольно просты в использовании… но в этой статье мы изучили достаточно, и я надеюсь, что вы без труда разберетесь с этими инструментами.

Заключение

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

Я очень надеюсь, что статья поможет тебе понять шаблон действий и рекомендую вам скачать его и немного поиграть с кодом.

Что такое Angular? — Блог ITVDN

Miško рассказал о том, как возникла идея создать фреймворк в интервью 2013 года:

“Мы хотели понять, можно ли упростить работу веб-дизайнеров, а не только разработчиков. Смогут ли они добавить еще больше HTML в свой код, чтобы превратить обычную статическую форму во что-то более стоящее, что можно отправить по емейлу. Идея заключалась в следующем: будь у вас небольшой бизнес, продающий пиццу или что-либо другое, то вы могли бы добавить простую систему заказа, используя необходимые теги, и они действительно отправляли бы письмо на сервер.»

Поскольку домен angular.com был занят – собственно, как и сейчас – создатели фреймворка переименовали Angular в GetAngular и выпустили небольшой сайт, на котором можно было узнать о всех фичах фреймворка.

Домашняя страница Angular по состоянию на декабрь 2009 года (из Internet Archive). 

Скоро Miško начал работать в Google, а в 2010 году занялся проектом Google Feedback. Miško убедил своего менеджера, Brad Green, переписать проект, используя его Angular. Оптимизация сроков и кода, которые показала команда в работе, помогли убедить Google в силе Angular.

Brad Green и Miško Hevery показывают, как много времени и сил удалось сэкономить на проекте, используя Angular. Это скриншот презентации на конференции ng-conf 2014 keynote, которую стоит посмотреть, если вы хотите знать всё о происхождении Angular.

Вскоре после успеха Google Feedback та же команда переписала open-source библиотеку и в мае 2011 года была выпущена версия Angular 1.0. В течение нескольких лет Angular стремительно набирал популярность, и сегодня Google заявляет, что более 1,5 миллиона разработчиков используют Angular.

Что делает Angular?

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

Angular также представляет ряд конвенций о подходах к разработке приложений. Это может быть очень полезно для больших команд, которые должны работать вместе на одном проекте. Angular — это одна из немногих библиотек JavaScript, которые обеспечивают обширный style guide с большим количеством наглядных примеров того, как вы можете писать свой код, используя этот фреймворк.

Когда использовать Angular?

Технически вы можете использовать Angular где угодно, но лучше всего он работает в нестандартных приложениях с данными. Если вы ознакомитесь с различными приложениями Angular, собранными на madewithangular.com, вы увидите реальные приложения, которые собирают данные из форм и работают с ними.

Angular работает не только с формами. Разработчики создали множество игр при помощи Angular и такие сумасшедшие вещи, как приложения с дополненной реальностью. Однако, большинство туториалов и документации по Angular все равно содержат информацию о создании некоторых form-based приложений. Например, вы встраиваете документацию Angular в приложение, где вы создали героев и их список через форму.

Окончательный результат демо-приложения Tour of Heroes из Angular документации.

Angular хорош в form-based приложениях, он подходит для больших и сложных приложений. Angular — не самый простой и не самый маленький фреймворк JavaScript. Следовательно, если вы создаёте нечто небольшое, вам лучше подобрать для работы фреймворк попроще, например, jQuery. Angular хорошо подойдёт для разработчиков приложений в средних и больших командах. Если вы разрабатываете приложение самостоятельно, может показаться, что шаблонного кода и конвенций разработки в Angular намного больше, чем вам нужно.

Angular также хорошо подходит для приложений, которые должны работать в нескольких средах разработки. Если приложение должно работать на веб, а также на Windows или Maс, вы можете придерживаться одного из многочисленных туториалов для запуска Angular-приложений с популярным Electron project.

Если же у вас приложение, которое нужно запустить на веб, iOS или Android, можете использовать NativeScript для рендеринга вашего приложения в мобильной среде. В некоторых случаях вы даже можете распространять код через эти платформы, экономя ценное время разработки.

Кто поддерживает Angular?

Angular Core Team состоит из большого количества людей во всем мире и из сообщества Angular. При этом большая часть разработок Angular изо дня в день осуществляется сотрудниками Google. Примерно 20 сотрудников Google входят в Angular Core Team и все ТОП-разработчики проекта Angular являются сотрудниками Google.

Следует отметить, что, несмотря на контроль Google над Angular, сам фреймворк по-прежнему много в чём зависит от усилий сообщества. Более двух тысяч человек внесли свой вклад в open-source репозиторий Angular, в общем доступе есть бесчисленные туториалы и guides, многочисленные компании предлагают обучение и набор инструментов для разработчиков.

Если контроль над проектом принадлежит одной компании, это неплохо, так как снижает конфликтные вопросы при принятия нестандартных решений.

Какую версию Angular мне лучше использовать?

На данный момент существует две популярные версии Angular. Версия 1 доступна на https://angularjs.org/  и является обновлённой версией того Angular, что был представлен Miško и его командой в 2011 году. Другая популярная версия теперь называется просто Angular и доступна на https://angular.io/. Современный Angular – это полностью переделанная версия для новых браузеров, рабочих процессов и платформ разработки.

Почти во всех случаях вам следует придерживаться последней версии Angular. В ближайшем будущем команда Angular будет стремиться поддерживать Angular 1, но нет никаких оснований полагать, что они будут поддерживать и более старые версии. Более того, Angular 1 не допускает использования библиотеки вне браузера, поэтому вы не можете воспользоваться такими библиотеками, как NativeScript для создания мобильных приложений.

Как выглядит Angular-приложение?

Теперь, когда вы имеете некоторое представление об Angular, давайте углубимся в код. Начнём с небольшого приложения “hello world”. Все приложения Angular начинаются с НТМL-страницы, которая выглядит следующим образом.

В реальном приложении тег < script > внутри тега < head > может быть немного сложным, но в высокоуровневых приложениях он такой же, как и другие веб-приложениях – вы загружаете кусок JavaScript-кода в HTML-документ, и приложение работает.  

Есть одна уникальная вещь в выше приведённом примере – элемент < my-app >. Вы не используете этот элемент регулярно в веб-приложении. Цель Angular – постоянно расширять словарь НТМL, позволяя вам определять собственные теги.

Такие пользовательские теги называют компонентами, и вы можете определять их поведение в коде. Вот простейшая реализация элемента < my-app >:

Есть несколько моментов, которые вам нужно знать, чтобы понять, что происходит в данном фрагменте кода. Первое – это код на TypeScript, а не на JavaScript. TypeScript может показаться вам пугающим, если вы не встречались с ним раньше, но его основы понять нетрудно.

TypeScript – надстройка над JavaScript, то есть весь синтаксис JavaScript доступен на TypeScript. Кстати, весь приведённый выше синтаксис – import, export, @Component и остальные – это или нынешние фичи JavaScript, или те, что появятся в ближайшем будущем. Так что, когда вы учите TypeScript, вы изучаете будущее JavaScript. TypeScript, к тому же, отличается превосходной документацией, к которой вы можете обратиться в любое время.

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

Давайте еще раз посмотрим на TypeScript-код, определяющий компонент < my-app >:

В Angular вы используете тег @Component, который известен как декоратор, чтобы отметить классы, которые учитывают элементы, которые могут быть использованы в вашей HTML-разметке. У вас есть возможность передавать свойства @Component для описания элемента. 

• Свойство selector определяет имя тега при вводе в HTML. Использование селектора < my-app > показывает Angular, что делать, когда он видит тег < my-app > в HTML.
• Свойство template контролирует, что HTML должен делать, когда используется компонент. Пример использования template: «< h2 >Hello World< /h2 >», тут видно, как Angular определяет, какие действия применять при < my-app > и почему это приложение представляет базовый тег < h2 > при предварительном просмотре в браузере. 

Отображение базового примера “Hello World” в браузере.

Зачем мне использовать Angular?

Angular- не самый простой в мире фреймворк, и понадобится время, чтобы понять те концепции, на которых он построен. Но когда вы возьметесь за Angular, то сможете делать действительно крутые приложения, обходясь небольшим количеством кода. Например, вы хотите добавить привязку данных к предыдущему примеру. Для этого используется очень простой синтаксис.

Хотите построить форму для запуска приложения? Хотите, чтобы эта форма имела валидацию данных и двустороннюю привязку? Для этого есть простой гайд. Ваше приложение слишком большое и вы хотите структурировать его? И для этого тоже создан гайд. Попали в модульное тестирование и хотите знать, как проверить код?

Такая возможность тоже есть. Хотите добавить такие профессиональные виджеты, как диаграммы и графики? Kendo UI и похожие фреймворки упрощают добавление этих высококачественных компонентов пользовательского интерфейса.

Пользуясь Angular, не рассчитывайте на простоту фреймворка, но будьте уверены в его невероятной надёжности и хорошей документации. Этот фреймворк прошёл не одно боевое испытание и заслужено используется миллионами разработчиков для написания крутых приложений. Сообщество Angular – огромное, и все хелпы легко найти в Google, Stack Overflow и по всему интернету. Ищите разработчика? Тысячи Angular девелоперов откликнутся на ваш запрос. Есть даже специальные рекрутинговые сайты.

Я уже упоминал о том, что Angular – мультиплатформенный? Вернемся к нашему примеру Hello World. У вас уже есть начало для iOS и Android приложения – просто переключите элемент HTML на компонент, который NativeScript может отобразить в мобильной среде, как , например. Вот так примерно будет выглядеть код.

А вот как этот код работает в нативных iOS и Android приложениях.

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

Если вы ищите больше информации о том, что может предложить Angular, начинайте изучать туториалы по быстрому старту работы с Angular и начинайте кодить. Если вы хотите использовать Angular для разработки мобильных приложений, посмотрите, как использовать его с NativeScript. Вы изучите один из самых популярных фреймворков JavaScript, когда будете знакомиться со столь популярным миром мобильной разработки.

Оригинал статьи: http://linkis.com/telerik.com/7vemI

10 полезных функций Angular, которые вы упускали

Если вы регулярно пишете приложения на Angular и потратили на это не одну сотню часов, вы, скорее всего, знаете об этих функциях. Но, всё же, чтобы убедиться — прочтите 🙂

Прежде чем мы перейдем к функциям Angular, стоит упомянуть один очень полезный инструмент. Bit (Github) позволяет с легкостью работать над Angular-компонентами вместе и делиться ими. От души рекомендую его для поддержания консистентного интерфейса, ускорения разработки и минимизации количества ошибок в коде.

Пример: Круговые загрузчики для Angular с bit.dev

1. Title

Тег title — это HTML-элемент, определяющий заголовок веб-страницы. Заголовки отображаются на странице результатов поиска (SERP) в виде кликабельного заглавия результата. Они очень важны для юзабилити, SEO и продвижения в соц. сетях.

Приложения на Angular берут заголовок из тега … в index.html. По умолчанию, переход между компонентами в Angular этот заголовок не меняет.

Знаете ли вы, что заголовок можно задать отдельно из каждого компонента?

В Angular есть сервис Title в angular/platform-browser. Можно легко внедрить его в другие компоненты и использовать метод setTitle, чтобы переопределить заголовок.

import { Title } from "@angular/platform-browser"@Component({
   ...
})
export class LoginComponent implements OnInit {
   constructor(private title: Title) {}    ngOnInit() {
       title.setTitle("Login")
   }
}

При переходе к LoginComponent в приложении, заголовок окна браузера изменится на “Login”.

То же самое можно сделать в любом компоненте и, соответственно, по мере навигации внутри приложения заголовок будет меняться, реагируя на действия пользователя.

2. Meta

Метатеги Angular-приложения тоже берут из файла index.html. А чтобы задавать их из компонентов, пригодится сервис Meta из angular/platform-browser.

И снова: применение метатегов полезно с точки зрения SEO и продвижения страницы в соц. сетях, они содержат информацию о веб-странице, которая используется поисковыми системами для правильного ранжирования и корректного отображения в результатах поиска.

Чтобы использовать компонент метатегов, импортируйте Meta из angular/platform-browser и внедрите в нужный компонент.

import { Meta } from "@angular/platform-browser"@Component({
    ...
})
export class BlogComponent implements OnInit {
    constructor(private meta: Meta) {}    ngOnInit() {
        meta.updateTag({name: "title", content: ""})
        meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
        meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
        meta.updateTag({name: "site", content: "My Site"})
    }
}

Теперь BlogComponent сможет корректно отображаться в Twitter, Facebook и т.д. При этом выводя описания, заголовки и изображения в правильном, читабельном виде.
Об это тоже слышали? Тогда вот кое-что поинтереснее.

3. Переопределение интерполяции шаблонов

Стандартный интерполятор в шаблонах — {{}}. Если вписать переменную между {{ и }}, её значение отобразится в итоговом DOM.

Знаете ли вы, что есть возможность переопределить стандартные разделители инкапсуляции на какие угодно символы? Это просто. Необходимо лишь указать новые значения в свойстве интерполяции в декораторе Component.

@Component({
   interpolation: ["((","))"]
})
export class AppComponent {}

Интерполяция используемая в шаблоне AppComponent изменилась на (()), а {{}} больше не работает.

@Component({
   template: `
       <div>
           ((data))
       </div>
   `,
   interpolation: ["((","))"]
})
export class AppComponent {
   data: any = "dataVar"
}

В браузере вы увидите, что строка «dataVar» будет отображена на месте ((data)).

4. Location

Мы можем получить текущий URL страницы, открытой в браузере, используя сервис Location. В зависимости от того, какой LocationStrategy используется, Location будет сохраняться либо по пути в URL (/example/page/), либо по части URL после решётки (#test/page/).

С помощью Location мы можем перейти к URL-адресу, перейти вперед в истории, вернуться назад, изменить текущий URL-адрес, или заменить верхний элемент в истории.

Здесь поможет сервис Location из CommonModule.

import { Location } from "@angular/common"@Component({
   ...
})
export class AppComponent {
   constructor(private location: Location) {}    navigateTo(url) {
       this.location.go(url)
   }    goBack() {
       location.back()
   }    goForward() {
       location.forward()
   }
}

5. Document

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

DOCUMENT как раз и служит этой цели. DOCUMENT — это DI-токен, представляющий основной контекст рендеринга. В браузере это DOM Document. Он обеспечивает операции с DOM независимо от среды выполнения.

Примечание: Document может быть недоступен в Application Context, если контексты Application и Rendering не совпадают (например, при запуске приложения в Web Worker).

Допустим, у нас есть какой-то HTML элемент:

<canvas></canvas>

Чтобы получить canvas HTMLElement внедряем DOCUMENT:

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}
}

Получаем HTMLElement canvas используя getElementById()

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}    renderCanvas() {
       this._doc.getElementById("canvas")
   }
}

Предупреждение: используйте DOCUMENT осторожно! Взаимодействие с DOM напрямую опасно и увеличивает риск XSS.

6. Декоратор @Attribute

В основном, в Angular приложении, используют декораторы Component, Module и Directive.

Однако, ещё есть декоратор Attribute, позволяющий передавать статическую строку без лишних затрат производительности, минуя проверку изменений.

Значения декоратора Attribute проверяются только один раз. Используется аналогично декоратору Input:

@Component({
   ...
})
export class BlogComponent {
   constructor(@Attribute("type") private type: string ) {}
}

7. HttpInterceptor

HttpInterceptor — очень мощная функция в Angular, позволяющая перехватывать запросы HttpRequest и обрабатывать их.

Большинство перехватчиков преобразуют исходящий запрос, прежде чем передать его следующему перехватчику в цепочке, вызывая next.handle(transformedReq).

В редких случаях, перехватчики могут полностью обработать запрос самостоятельно, а не делегировать оставшуюся часть цепочки дальше. Такое поведение разрешено.

HttpInterceptor чаще всего используется в:

• Аутентификации
• Кэшировании
• Fake backend
• Трансформации URL
• Подмене заголовков

Для использования этого перехватчика, необходимо создать сервис и реализовать интерфейс HttpInterceptor.

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
   constructor() {}    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       ...
   }
}

Вставляем его в основной модуль:

@NgModule({
   ...
   providers: [
       {
           provide: HTTP_INTERCEPTORS,
           useClass: MockBackendInterceptor,
           multi: true
       }
   ]
   ...
})
export class AppModule {}

8. AppInitializer

Иногда, при запуске Angular-приложения, необходимо инициализировать какой-либо конкретный фрагмент кода. Например, загрузить настройки, загрузить кэш, загрузить какие-либо конфигурации или произвести проверки. Токен AppInitialzer создан специально для этого.
APP_INITIALIZER: функция, исполняемая сразу же по факту запуска приложения.
Допустим, нам нужно запускать некую функцию runSettings при старте Angular-приложения:

function runSettingsOnInit() {
   ...
}

Для этого перейдем к основному модулю AppModule и добавим её в раздел провайдеров декоратора NgModule:

@NgModule({
   providers: [
       { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
   ]
})

9. Bootstrap Listener

По аналогии с AppInitialzer, в Angular есть функция позволяющая отслеживать загрузку какого-либо компонента. Это APP_BOOTSTRAP_LISTENER.

Все коллбеки, возвращаемые этим токеном, будут вызываться для каждого загружаемого компонента.

Применить эту функцию отслеживания начальной загрузки компонентов можно во многих случаях. Например, модуль Router использует её для уничтожения и создания компонентов на основе навигации по маршруту.

Для использования APP_BOOTSTRAP_LISTENER, необходимо добавить его в раздел провайдеров в AppModule с функцией обратного вызова:

@NgModule({
   {
       provide: APP_BOOTSTRAP_LISTENER, multi: true,
       useExisting: runOnBootstrap
   }
   ...
})
export class AppModule {}

10. NgPlural

Плюрализация — головная боль программистов. Задача грамматической корректировки словоформ в зависимости от употребления единственного / множественного числа возникает постоянно. Некоторые сайты просто используют для этого окончание (s). Например:

1 component(s) removed
3 component(s) removed

То есть читатель сам должен понять, какое число подразумевается 🙂

Angular предлагает решить эту проблему более цивилизованно, с помощью директивы NgPlural.

NgPlural добавляет или удаляет подветви DOM на основании числового значения. Для плюрализации — то, что нужно.

Чтобы использовать эту директиву необходимо задать атрибут [ngPlural] контейнеру элемента в виде выражения-переключателя. Внутренние элементы с атрибутом [ngPluralCase] отобразятся в зависимости от заданных условий:

<p [ngPlural]="components">
   <ng-template ngPluralCase="=1">1 component removed</ng-template>   
   <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>   
</p>

Теперь можно выбросить “(s)”. Директива NgPlural поможет вывести правильную словоформу в зависимости от значения. Итог:

// if 1 component
1 component removed

// if 5 components
5 components removed

Введение в AngularJS

Что такое AngularJS

Последнее обновление: 26.04.2017

AngularJS представляет собой opensource JavaScript-фреймворк, использующий шаблон MVC. Собственно использование MVC является его одной из отличительных особенностей.

Для описания интерфейса используется декларативное программирование, а бизнес-логика отделена от кода интерфейса, что позволяет улучшить тестируемость и
расширяемость приложений.

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

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

Официальный сайт фреймворка: http://angularjs.org/.
Там вы можете найти сами исходные файлы, обучающие материалы и другие сопроводительные материалы относительно библиотеки.

На момент написания данного руководства последней версией фреймворка была версия 1.6.4.

Начало работы c AngularJS

Посмотрим, что же представляет собой AngularJS. Для этого нам потребуется файлы самого фреймворка, поэтому загрузим саму библиотеку по ссылке, указанной выше:

Также можно использовать ссылку на библиотеку из сети CDN компании Google: https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js.

При загрузке zip-пакета мы найдем в нем кроме самой библиотеки (angular.js) еще ряд дополнительных файлов и их минимизированные версии:

• angular-touch.js: предоставляет поддержку событий сенсорного экрана

• angular-animate.js: предоставляет функциональность анимации

• angular-aria.js: предоставляет поддержку aria-атрибутов (accesible rich internet application)

• angular-mocks.js: предоставляет mock-объекты для юнит-тестирования

• angular-route.js: обеспечивает механизм маршрутизации

• angular-sanitize.js: предоставляет функционал для управления потенциально опасным контентом (javascript, html)

• angular-cookies.js: обеспечивает функционал для управления куками

• angular-loader.js: используется для загрузки angularjs-скриптов

• angular-messages.js: предоставляет функционал для вывода сообщений

• angular-resource.js: обеспечивает функциональность для работы с ресурсами

• Папка i18n: содержит js-файлы для разных локалей

Из всех загруженных скриптов в архиве нас будет интересовать прежде всего файл angular.min.js

Теперь собственно создадим приложение. Оно будет стандартным HelloWorld. Код html-страницы будет следующим:

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<label>Введите имя:</label>
<input type="text" ng-model="name" placeholder="Введите имя">

<h2>Добро пожаловать {{name}}!</h2>
     
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</body>
</html>

Первое, наверное, что бросается в глаза — это новые атрибуты, добавленные к стандартным тегам html (в данном случае ng-app и
ng-model). Эти атрибуты являются директивами фреймворка AngularJS. Благодаря их встраиванию фреймворк позволяет добавить элементам определенное поведение.

Конкретно в данном случае директива ng-app объявляет элемент <html> корневым для всего приложения, а
директива ng-model указывает модель «name», к которой будет привязано значение элемента input. И при изменении текста в элементе input, модель «name»
также будет динамически изменять свое значение.

Чуть ниже в элементе <h2>Добро пожаловать {{name}}!</h2> выводится значение этой модели.

И мы можем просто открыть данный файл в браузере и протестировать его работу.

Угловые выражения

AngularJS связывает данные с HTML с помощью Expressions .

Выражения AngularJS

Выражения AngularJS можно записывать в двойные фигурные скобки: {{ выражение }} .

Выражения AngularJS также можно записать внутри директивы: ng-bind = " expression " .

AngularJS разрешит выражение и вернет результат точно в том месте, где написано выражение.

Выражения AngularJS очень похожи на JavaScript
выражений: Они могут содержать литералы, операторы и переменные.

Пример {{5 + 5}} или {{firstName + «» + lastName}}

Пример

Попробуй сам »

Если вы удалите директиву ng-app , HTML отобразит
выражение как есть, не решая его:

Пример

Попробуй сам »

Вы можете писать выражения где угодно, AngularJS просто разрешит
выражение и вернуть результат.

Пример. Разрешить AngularJS изменять значение свойств CSS.

Измените цвет поля ввода ниже, изменив его значение:

Пример

<ввод ng-model = "myCol">