Jeśli nie masz postawionej naszej warsztatowej aplikacji Railsowej, możesz użyć JSFiddle, które przygotowaliśmy tylko dla AngularJS-a: https://jsfiddle.net/sjxjofn8/ i przeskoczyć od razu do zadania 3.
Proponowane kroki:
- Zainstaluj gem https://github.com/hiravgandhi/angularjs-rails
- Aktywuj angulara dodając
//= require angularjswapp/assets/javascripts/application.js - Dodaj nazwę modułu do atrybutu
<html>wapp/views/layouts/application.html.erbużywając dyrektywyng-app - Dodaj plik
app.jsoraz aktywuj moduł szama:angular.module("szama", []). Dlaczego przekazujemy pustą tablicę jako drugi argument? - Upewnij się, że wyrażenie
{{ 2 + 2 }}zostanie poprawnie zewaluowane. Jeśli nie działa, sprawdź czy konsola przeglądarki wyrzuca jakiś błąd?
- Utwórz plik JavaScript
payments_ctrl.js, - utwórz controller
PaymentsCtrl, - przypisz jakąś zmienną do
$scope'ui wyświetl ją w widoku.
Pamiętaj o użyciu dyrektywy ng-controller.
Zapisz informacje o użytkownikach i płatnościach w controllerze:
// payments_ctrl.js
$scope.users = {
1: { name: "Jon", balance: 3.0 },
2: { name: "Hodor", balance: -3.0 },
};
$scope.payments = [
{
title: "Pizza",
creator_id: 1,
balance_changes: [
{ user_id: 1, change: -10.0 },
{ user_id: 2, change: -15.0 },
{ user_id: 1, change: 25.0 },
],
},
{
title: "Bagiety",
creator_id: 2,
balance_changes: [
{ user_id: 1, change: -12.0 },
{ user_id: 2, change: -14.0 },
{ user_id: 2, change: 26.0 },
]
},
];Użyj dyrektywy ng-repeat, aby wyświetlić te dane w takiej samej formie, w jakiej aktualnie pokazują się w widoku wygenerowanym po stronie Railsowej.
Dodaj i obsłuż formularz odpowiedzialny za dodawanie nowej płatności.
Nowa płatność musi zostać dodana do $scope.payments, a balans wszystkich użytkowników zaangażowanych w daną płatność powinien zostać zaktualizowany. Poprawne zachowanie: https://v.usetapes.com/5kqEjviAWV
Informacje o aktualnym balansie użytkownika zapisujemy i trzymamy osobno w tablicy $scope.users.
Chcielibyśmy, żeby aktualny balans użytkownika był wyliczany automatycznie na podstawie wszystkich balance_changes, które znajdują się w $scope.payments. Dzięki temu będziemy mogli pozbyć się dodatkowego kodu odpowiedzialnego za aktualizację balansu po dodaniu nowego paymentu przez $scope.addNewPayment().
Hint: dodaj nową funkcję $scope.userBalance(userID) i wywołuj ją dla każdego użytkownika w ng-repeat.