Як підключити до API бакенду, статті про програмування mkdev

У цій статті ми навчимося поєднувати нашу програму з простим API за допомогою бібліотеки Restangular. Restangular - це популярна альтернатива вбудованої в сам Angular.js бібліотеки для роботи з REST API. Про її переваги над стандартною бібліотекою добре розказано на сторінці проекту github: https://github.com/mgonto/restangular. Наприклад, вона підтримує всі HTTP методи і позбавлена різних неприємних багів, вбудованої в Angular.js бібліотеки.

Як API ми будемо використовувати невеликий веб-додаток, написаний на фреймворку Sinatra, який написаний на Ruby. Вам не потрібно писати код ruby. Щоб запустити API на вашій машині, потрібно виконати наступні дії:

Встановіть Ruby, якщо у вас його ще немає. У мережі безліч посібників з цієї теми, зокрема на офіційному сайті https://www.ruby-lang.org/en/
Завантажте програму git clone https://github.com/mkdev-me/sinatra-api-example
Зайдіть в папку з програмою та виконайте команду bundle install
Після цього виконайте rake db:create db:migrate
І, нарешті, запустіть програму командою ruby app.rb

Ми вже підключили Restangular на етапі налаштування нашої програми: ви можете побачити його у списку залежностей у файлі bower.json. Більше того, бібліотека вже завантажена як модуль, зверніть увагу на цей рядок у src/app/index.js :

Тому ми можемо перейти одразу до коду. В першу чергу нам необхідно задати базовий URL, використовуючи який Restangular будуватиме інші посилання. Для цього в бібліотеці є провайдер RestangularProvider, який ми можемо використовувати у блоці config у src/app/index.js :

Зверніть увагу на функцію then(). Вона виконується тількитоді, коли завершився запит на додавання транзакції. Подібний механізм називається promises, який є альтернативою звичному по jQuery механізму коллбеків. Відмінність promise в тому, що нам не потрібно тримати в пам'яті коли якийсь коллбек виконається. Angular.js таким чином гарантує, що якщо функція A завершила своє виконання, то функція B виконається (і тільки тоді, коли функція А дійсно успішно виконається).

У цьому випадку ми гарантуємо, що масив транзакцій оновиться лише після успішного збереження нової транзакції на сервері. Щоб скоротити кількість запитів до сервера, ми будемо тримати в пам'яті всі транзакції і оновлювати цей масив вручну, замість того, щоб кожен раз отримувати всі транзакції з сервера.

Більшість функцій Restangular повертають promise-об'єкти. Наприклад, getList() , який ми використовуємо для отримання транзакцій. Щоб отримати самі транзакції, ми можемо або використовувати then() , або метод $object , який відразу поверне нам усі транзакції.

Код контролера не зазнав великих змін:

Тепер усі нові транзакції будуть збережені у базі даних і після перезавантаження сторінки вони нікуди не пропадуть.

Ви, напевно, створили безліч тестових транзакцій, щоб подивитися як все працює. Тепер треба б їх якось позбутися. Коміт із змінами: a0629f.

Додайте та реалізуйте кнопку видалення транзакції.

Ми розповідаємо, як стати найкращим розробником, як підтримувати та ефективно застосовувати свої навички. Інформація про вакансії та акції ексклюзивна для більш ніж 8000 передплатників. Приєднуйся!

mkdev
Ментори
Спеціалізації
Статті

Про проект
Що таке менторство
Якпроходить навчання
Ціни
FAQ
Impressum

Обліковий запис
Записатись

Соц мережі