hodak/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Zadania

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.
Zadanie 1.

Połącz Railsy z Angularem

Proponowane kroki:

Zainstaluj gem https://github.com/hiravgandhi/angularjs-rails
Aktywuj angulara dodając //= require angularjs w app/assets/javascripts/application.js
Dodaj nazwę modułu do atrybutu <html> w app/views/layouts/application.html.erb używając dyrektywy ng-app
Dodaj plik app.js oraz 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?

Zadanie 2

Utwórz controller PaymentsCtrl


Utwórz plik JavaScript payments_ctrl.js,
utwórz controller PaymentsCtrl,
przypisz jakąś zmienną do $scope'u i wyświetl ją w widoku.

Pamiętaj o użyciu dyrektywy ng-controller.
Zadanie 3

Wyświetlenie danych z controllera

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.
Zadanie 4

Obsługa formularza

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
Zadanie 5 - bonusowe

Automatyczne wyliczanie balansu użytkownika

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.