В момента доста често срещана практика, когато уеб приложения взаимодействат помежду си чрез приложния програмен интерфейс. Например, когато си купите билет за кино онлайн, на сайта се обръща към дистанционното API за проверка на информацията за кредитната ви карта. В този урок ще ви покажа как, използвайки angularjs, за да HTTP заявки към отдалечен API и процес JSON отговори, актуализиране на гледката.
В резултат на това, ние трябва да го получите:
код на проекта е достъпно на GitHub. а също така можете да видите демонстрация работи на CodePen.
Структурата на проекта
Ние ще използваме следната структура на файлове и папки в проекта:
index.html файл ще съдържа основния екран на приложението. По принцип, всичко е стандарт тук, но нека да разгледаме по-подробно:
Както можете да видите, ние сме използвали директива ПГ-модел, да се свържат полето за въвеждане (тук потребителят ще въведете името на филма) с търсене на модел (който ще обявим в контролера). Ние също така се използва за директива ПГ-промяната, така че всеки път, когато промените съдържанието на полето за въвеждане на е причинена от промяна функция () в контролера. Тази функция ще бъде отговорен за започване на взаимодействие с дистанционно API. Блокове основната информация и свързаните с тях резултати ще бъдат използвани за показване на информация за актуалния списък на филм и свързаните с филми. Информацията ще бъде показана в шаблоните, които ще бъдат получени, събрани и вкарани в представянето с помощта на ПГ-включва директива.
API повикване за извличане на данни
Нека да разгледаме най-app.js файла - сърцето на нашата молба. Минаваме обхвата на $ и $ HTTP като параметри на дизайнера на контролера. По този начин, ние заявяваме, зависимостта от предмета и обхвата на услугата HTTP.
Когато страницата се зарежда само търсене модел е неопределено. Ето защо, ние задайте стойността на «Шерлок Холмс» подразбиране и се позовава на четенето, който взаимодейства с API и гарантира, че гледката ще се инициализира.
На следващо място, ние определяме начина на промяна. Тя ще се изтегли на резултатите, когато стойността в полето за търсене ще се промени. Искаме резултатът се зарежда само след 800 милисекунди, след като потребителят спре да въвежда. Това ще предотврати ненужни API повиквания на вашата кандидатура. Ние също искаме да видим резултатите веднага, докато пишете (без да натискате бутона за въвеждане или бутона за търсене).
А сега да разгледаме функцията на вземе. Тази функция прави повикването API и дръжки JSON-отговор. Ние ще използваме нашата молба OMDb API - безплатна услуга, която ви позволява да получите информация за филми. Ако се чудите как работи API, можете да прочетете пълната документация от линка по-горе.
Успехът на манипулатори, които запазваме резултатите в детайли и свързаните с тях модели, съответно.
На следващо място, погледнете функцията за актуализация. Тя се нарича, когато потребителят кликне върху заглавието на филма, свързани с представянето. Това отнема обект (който съдържа информация за избрания филм), филм, посочен в заглавието като стойността на полето за търсене и метода на промяна позоваване, и по този начин, нашата заявка получава информация за този филм.
И накрая, за ваше удобство сме добавили изберете функция, която се нарича, когато потребителят позиционира курсора в полето за въвеждане.
Обработване на отговора
Сега нека да погледнем частични / основната info.html файл.
Използваме NG-ако директива да се покаже съобщение «Зареждане на резултати. "Ако данните все още не е зареден, а след това ние проверяваме израз details.Response === True, за да се гарантира, че API е намерил един мач и се върна на резултата.
Ако резултатът е, ние използваме директива ПГ-SRC, за да проверите стойността на details.Poster и или качите изображение, което е в тази област, или изображение се използва по подразбиране, ако изображението не е на разположение.
След това, ние се покажат други данни за филма, включително четирите връзките в долната част на страницата с външни уебсайтове, където потребителят може да получите повече информация за филма. Показваме тези връзки, използващи директива ПГ-HREF, тъй употреба ъглови израз в HREF атрибут, а ако потребителят кликне върху линка, преди ъглови заместител на стойностите на изразяване, всичко се счупи.
Сега погледнете частични /, свързани-results.html файл.
Тук отново използваме ПГ-ако директивата, за да се провери дали отговорът дойде. Освен това, с помощта на директива ПГ-повторение, минаваме на елементи имоти търсене, свързани с модел, който включва (наред с други неща) списък с подобни резултати от търсенето.
ние също icpolzuem ПГ клик директива да се обадя метод актуализация контролер, като кликнете върху заглавието на филма. Както бе споменато по-горе, тази функция избира и показва информация за новия филм.
Довършителни работи
И тук е резултат!
Моля, имайте предвид, че скрих съответните резултати в интегрираната демото поради липса на пространство. За да ги видите, просто погледнете демото CodePen (във всеки случай, това е добра идея, тъй като демонстрацията там по-бързо).
заключение
В този урок ви показах как да използвате angularjs, да отправи искане към отдалечен API, както и начина на използване на данни задължителен, да уведомява незабавно гледката от резултатите. Развитие на проекта - е чудесен начин да научите езика или някаква особеност на рамката, така че аз ви насърчавам да се клонира хранилището и да се подобри приложението.
Намерени грешка? Orphus: Ctrl + Enter
Свързани статии