7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Создание веб-приложения с нуля на AngularJS

Scroll to top
Read Time: 17 mins

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

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

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


Начинаем

Для начала нам понадобится каркас приложения AngularJS, в котором уже есть все необходимые JavaScript и CSS для создания приложения TV Show Premieres. Двигаемся дальше и загружаем этот каркас по кнопке «Загрузить исходные файлы».

После того, как вы загрузили файлы, вы должны получить такую структуру каталогов, как показано ниже:

figure1-skeleton-directory-structure

Если посмотреть на структуру каталогов и включенные файлы, вы увидите, что мы будем использовать Twitter Bootstrap, чтобы сделать наше веб-приложение немного красивее, но этот учебник не будет подробно разбирать Twitter Bootstrap (подробнее о Twitter Bootstrap). Кроме того, в этом руководстве не будет рассказывается, как настроить новое приложение AngularJS, поскольку вышеупомянутая статья AngularJS уже итак подробно описывает это.

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

figure2-basic-web-pagefigure2-basic-web-pagefigure2-basic-web-page

Загрузка наших данных

Первое, что нам нужно, чтобы создать наше приложение TV Show, - это информация о телешоу. Мы будем использовать API, предоставляемый Trakt.tv. Прежде чем мы сможем начать работу, вам понадобится ключ API, вы можете зарегистрироваться и получить его на их веб-сайте.

Зачем использовать этот API? Нужно ли мне регистрироваться? Мы используем этот API, поэтому наше приложение будет использовать реальные данные и фактически будет весьма полезным после завершения. Кроме того, с помощью этого API нам не нужно делать какую-либо реализацию на стороне сервера в этом учебнике и полностью сосредоточиться на AngularJS. Дополнительная пара минут для регистрации API будет стоить того.

Теперь, когда у вас есть собственный API-ключ, мы можем использовать API-интерфейс Trakt, чтобы получить информацию о телешоу. Мы собираемся использовать один из доступных вызовов API для этого учебника, более подробная информация об этом доступна в api docs. Этот вызов API предоставит нам все телевизионные шоу-премьеры в течение заданного периода времени.

Откройте mainController.js и измените его в соответствии с приведенным ниже кодом:

Если вы посмотрите в файле index.html для следующей строки:

Вы увидите, что метод ng-init вызывает функцию init, это означает, что функция init() внутри нашего mainController вызывается после загрузки страницы.

Если вы прочитали документацию API для метода calendar/premieres, вы увидите, что он принимает три параметра: ваш ключ API, дату начала (например, 20130616) и количество дней.

Чтобы предоставить все три параметра, нам сначала нужно получить сегодняшнюю дату с использованием метода JavaScript Date() и отформатировать ее к формату даты, указанного в API, для создания строки apiDate. Теперь, когда у нас есть все, что нам нужно, мы можем сделать вызов $http.jsonp для метода API. Это позволит нашему веб-приложению вызывать URL-адрес, который не входит в наш собственный домен, и получать некоторые данные JSON. Убедитесь, что ?callback=JSON_CALLBACK добавлен в URI запроса, чтобы вызываемая функция .success была вызвана в ответ.

В нашей функции .success мы просто выводим полученные данные в консоль. Откройте index.html в своем браузере и откройте консоль JavaScript, вы увидите следующее:

figure3-javascript-consolefigure3-javascript-consolefigure3-javascript-console

Это демонстрирует, что мы успешно выполняем вызов API Trakt, аутентифицируясь с помощью нашего ключа API и получая некоторые данные JSON. Теперь, когда у нас есть данные нашего ТВ-шоу, мы можем перейти к следующему этапу.


Отображение наших данных

Обработка объектов JSON

Прежде чем мы сможем отобразить наши данные, нам необходимо обработать и сохранить их. Поскольку API возвращает эпизоды премьеры, сгруппированные по дате, мы хотим удалить эту группу и просто создать единый массив со всеми эпизодами премьеры и связанными с ними данными. Измените mainController.js следующим образом:

Вышеприведенный код хорошо прокомментирован и должен быть предельно понятен, давайте взглянем на эти изменения. Во-первых, мы объявляем переменную области scope $scope.results как массив, который будет содержать наши обработанные результаты. Затем мы используем метод angular.forEach (который похож на метод $.each jQuery для тех, кто его знает), чтобы перебирать каждую группу дат и сохранить дату в локальной переменной date.

Затем мы создаем еще один цикл, который проходит через каждый из телевизионных шоу в пределах этой группы дат, добавляет локально сохраненную дату в объект tvshow и затем, наконец, добавляет каждый объект tvshow к массиву $scope.results. Со всем этим, наш массив $scope.results будет выглядеть следующим образом:

figure4-formatted-tvshow-json-objectsfigure4-formatted-tvshow-json-objectsfigure4-formatted-tvshow-json-objects

Создание списка HTML

Теперь у нас есть некоторые данные, которые мы хотим отобразить в виде списка на нашей странице. Мы можем создать некоторый HTML код с помощью ng-repeat для динамического создания элементов списка на основе данных из $scope.results. Добавьте следующий код HTML в неупорядоченный список, который имеет класс episode-list в index.html:

Этот HTML-код просто создает единый элемент списка с ng-repeat. ng-repeat="tvshow in results" указывает ангуляру, чтобы тот повторил этот элемент списка для каждого объекта из массива $scope.results. Помните, что нам не нужно включать область $scope, так как мы находимся внутри элемента с указанным контроллером (подробнее об этом см. предыдущий учебник).

Внутри элемента li мы можем ссылаться на tvshow как переменную, которая будет хранить все данные объектов для каждого из телевизионных шоу в пределах $scope.results. Ниже приведен пример одного из объектов в пределах $scope.results, поэтому вы можете легко увидеть, как ссылаться на каждый отдельный фрагмент данных:

Например, в элементе li мы можем получить заголовок шоу, ссылаясь на tvshow.show.title и обернув его в двойные фигурные скобки: {{}}. При таком понимании должно быть легко увидеть, какая информация будет отображаться для каждого элемента списка. Благодаря CSS, включенному в каркас приложения, если вы сохраните эти изменения и откройте index.html в своем браузере, вы должны увидеть красиво отформатированный список телевизионных шоу с соответствующей информацией и изображениями. Это показано на рисунке ниже:

figure5-formatted-show-listfigure5-formatted-show-listfigure5-formatted-show-list

Условные классы

Вы может и не заметили:

... который прикреплен к одному из элементов span в разделе рейтингов в вышеприведенном HTML. ng-class позволяет условно применять классы к элементам HTML. Это особенно будет полезно здесь, так как тогда мы можем применить другой стиль к элементу span процентного диапазона в зависимости от того, высокий или нет процент показов у ТВ-шоу.

В приведенном выше примере HTML мы хотим применить класс label-success, который является классом Bootstrap Twitter, который будет определять диапазон, чтобы иметь зеленый фон и белый текст. Мы хотим применить этот класс только к элементу, если процентная доля рейтинга больше или равна 50. Мы можем сделать это просто с помощью tvshow.episode.ratings.percentage >= 50. Просмотрите список отформатированных телешоу в вашем браузере, если какой-либо из процентов соответствует этому условию, они должны отображаться зеленым цветом.


Создание фильтра поиска

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

Связывание элементов HTML с областью видимости

Во-первых, нам нужно объявить переменную $scope.filterText в mainController.js следующим образом:

Теперь нам нужно добавить текстовый ввод, чтобы пользователь мог ввести поисковый запрос. Затем нам необходимо привязать это поле к вновь объявленной переменной. Добавьте следующий HTML-код в div, который имеет класс search-box в index.html.

Здесь мы использовали ng-model для привязки этого ввода к переменной $scope.filterText, которую мы объявили в нашей области. Теперь эта переменная всегда будет равна тому, что вводится в этот поле поиска.

Выполнение фильтрации с ng-repeat

Теперь, когда у нас есть текст для фильтрации, нам нужно добавить функцию фильтрации в ng-repeat. Благодаря встроенной функциональности фильтра AngularJS нам не нужно писать JavaScript для этого, просто измените свой ng-repeat следующим образом:

Это так просто! Мы сообщаем AngularJS - прежде чем выводить данные с помощью ng-repeat, что нам нужно применить фильтр на основе переменной filterText. Откройте index.html в браузере и выполните поиск. Предполагая, что вы искали что-то, что существует, вы должны увидеть выбор результатов.


Создание пользовательского фильтра по жанру

Итак, наши пользователи теперь могут искать то, что они хотят посмотреть, что гораздо лучше, чем просто статический список телешоу. Но мы можем немного изменить наши функции фильтрации и создать собственный фильтр, который позволит пользователю выбрать определенный жанр. Когда выбран определенный жанр, ng-repeat должен показывать только телевизионные шоу с выбранным жанром.

Прежде всего, добавьте следующий HTML-код под полем filterText в index.html, которое мы добавили ранее.

Из вышеприведенного HTML вы можете видеть, что мы создали элемент выбора, связанный с переменной модели genreFilter. Используя ng-options, мы можем динамически заполнять этот select с помощью массива с именем availableGenres.

Прежде всего, мы должны объявить эти переменные области. Обновите файл mainController.js следующим образом:

Очевидно, что теперь мы объявили как genreFilter, так и availableGenres, которые мы видели в нашем HTML. Мы также добавили некоторый JavaScript, который заполнит наш массив availableGenres. В рамках функции init(), в то время как мы обрабатываем данные JSON, возвращенные из API, мы теперь делаем некоторую дополнительную обработку и добавляем жанры, которые еще не находятся в массиве availableGenres, к этому массиву. Затем он будет заполнять селект любыми доступными жанрами.

Если вы откроете index.html в своем браузере, вы увидите, что раскрывающийся список жанров выбирается, как показано ниже:

figure6-genre-select-drop-downfigure6-genre-select-drop-downfigure6-genre-select-drop-down

Когда пользователь выбирает жанр, переменная $scope.genreFilter будет обновлена до выбранного значения.

Создание настраиваемого фильтра

Поскольку мы хотим фильтровать определенную часть объектов ТВ-шоу, мы собираемся создать функцию пользовательского фильтра и применить его вместе с фильтром AngularJS в ng-repeat.

В самом низу mainController.js, после всего остального кода, добавьте следующий JavaScript:

Вышеупомянутый JavaScript объявляет пользовательский фильтр для нашего приложения с именем isGenre. Функция внутри фильтра принимает два параметра, input и genre. input предоставляется по умолчанию (что мы увидим в одно мгновение) и все данные, которые обрабатывает ng-repeat. genre - это значение, которое нам нужно передать. Все что делает этот фильтр, так это принимает указанный жанр и проверяет, есть ли у каждого из объектов ТВ-шоу внутри input указанный жанр, прикрепленный к ним. Если объект имеет указанный жанр, он добавляет его в массив out, который затем будет возвращен в ng-repeat. Если это не совсем понятно, не беспокойтесь! Скоро все станет ясно.

Применение пользовательского фильтра

Теперь, когда у нас есть наш клиентский фильтр, мы можем добавить этот дополнительный фильтр в наш ng-repeat. Измените ng-repeat в index.html следующим образом:

Это просто связывает другой фильтр с результатом ng-repeat. Теперь вывод будет обработан обоими фильтрами до того, как он будет отображаться на экране. Как вы видите, мы указали наш пользовательский фильтр как isGenre: а затем мы передаем переменную scope genreFilter в качестве параметра, а именно мы предоставляем нашему клиенту фильтр с переменной genre, о которой мы говорили ранее. Помните, что AngularJS также предоставляет в наш фильтр данные, которые ng-repeat обрабатывает с переменной input.

ОК, наш пользовательский фильтр жанра завершен. Откройте index.html в браузере и проверьте новые функции. Используя этот фильтр, пользователь может легко отфильтровать жанры, которые им не интересны.


Вызов функций из области

Возможно, вы заметили, что в каждом списке телешоу также показан жанр. Для некоторых дополнительных функций мы разрешаем пользователю нажимать на эти жанры, которые затем автоматически применяют фильтр для жанра, на который они нажали. Прежде всего, нам нужно создать функцию области, которую может вызвать ng-click. Добавьте следующий код в mainController в файле mainController.js:

В приведенном выше коде эта функция принимает значение жанра, а затем устанавливает $scope.genreFilter в указанное значение. Когда это произойдет, значение поля выбора фильтра жанра будет обновляться, и фильтр будет применен к результату ng-repeat. Чтобы вызвать эту функцию при нажатии элементов span жанра, добавьте ng-click в элементы жанра span в index.html следующим образом:

ng-click вызывает нашу ранее созданную функцию setGenreFilter и указывает жанр. Откройте index.html и попробуйте!


Пользовательская сортировка с помощью AngularJS

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

Добавьте следующий HTML-код в раскрывающемся списке жанра:

При добавлении этого кода у нас есть еще два выбора. Один, чтобы выбрать способ упорядочивания данных, а другой - выбрать направление, в котором нужно упорядочить данные. Теперь нам нужно создать функцию внутри нашего контроллера, чтобы выполнить сравнение порядка. Добавьте следующий JavaScript в нашу функцию setGenreFilter:

Нам также необходимо объявить некоторые дополнительные переменные области видимости:

Если теперь вы открываете index.html в своем браузере, вы должны увидеть добавленные выпадающие списки, заполненные Air Date, которые уже выбраны в качестве поля сортировки по умолчанию. Это показано на рисунке ниже:

figure7-order-drop-downsfigure7-order-drop-downsfigure7-order-drop-downs

Наконец, как мы уже сделали с нашими другими фильтрами, нам нужно добавить это в наш ng-repeat, обновите его следующим образом:

В дополнение к другим фильтрам мы теперь применяем сортировку по нашим данным. Мы сообщаем порядок, используя нашу функцию customOrder, и мы также передаем нашу переменную scopeReverse scope. Откройте index.html в браузере и просмотрите сортировку в действии.


Вывод

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

После прочтения этого урока вы должны теперь понимать и использовать следующие принципы:

  • Использование ng-repeat для отображения информации на экране.
  • Связывание с полями ввода, позволяющее пользователям искать и фильтровать вывод ng-repeat.
  • Объединение фильтров на ng-repeat для выполнения нескольких функций фильтрации.
  • Пользовательская сортировка данных.
  • Использование событий, таких как ng-click для ответа на взаимодействие пользователя.
  • Использование ng-class для условного применения стилей к элементам страницы.

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.