.then w kontrolerze angular

.then w kontrolerze angular
d0ck
d0ck
0

Mam taki kontroler:

Kopiuj
    angular.module('demo', [])
        .controller('Hello', function($scope, $http) {
            $http.get('http://localhost:8080/rest/cart').
            then(function(response) {
                $scope.items = response.data;
            });
            $scope.removeFromCart = function(productId) {
                $http.delete('/delete/' + productId)
                    .then(function (data) { ////////////////////////////
                        $http.get('/cart'); ///////////////////////////////
                    });
            };
        });

I o ile ze zmiennej items korzystam, żeby wyświetlić informacje o produkcie na stronie koszyka, tak z tych dwóch linijek obok których są slashe nie korzystam, bo po prostu jest button, który po naciśnięciu wywołuje funkcje removeFromCart wysyła się request DELETE, produkt jest usuwany z bazy i tyle, nic więcej mi nie trzeba. Ale usunąć tych linijek też nie mogę, bo wtedy w ogóle nic nie działa. Tak więc całokształt mi normalnie działa, ale czy mógłby się ktoś wypowiedzieć czy poz względem front-endu jest to "poprawnie" zrobione i co zrobić z tymi dwiema linijkami, skoro nie są mi potrzebne ?

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
shagrin
shagrin
shagrin
shagrin
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 6 lat
  • Lokalizacja:Norwegia, Stavanger
1

Co znaczy, że nie działa? Musi działać, skoro z .then() działa, może po prostu nie odświeżasz widoku po usunięciu danego elementu? Masz dwie opcje:
Po wysłaniu requestu DELETE usuń dany element ze $scope.items, lub pod otrzymaniu odpowiedzi, że DELETE się wykonało prawidłowo, wyślij jeszcze raz GET i zaktualizuj $scope.items.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
d0ck
d0ck
0

Dobra, trochę to pozmieniałem, aktualnie mam:

cartController w angularze:

Kopiuj
angular.module('demo', [])
    .controller('Hello', function($scope, $http) {
        $scope.refreshCart = function() {
        $http.get('http://localhost:8080/rest/cart')
            .success(function(response) {
                $scope.items = response.data;
            });
    };
        $scope.removeFromCart = function(productId) {
            $http.delete('/delete/' + productId)
                .success(function (data) {
                    $scope.refreshCart();
                });
        };
        $scope.addToCart = function(productId) {
            $http.put('/add/'+ productId)
                .then(function(response) {
                    $scope.refreshCart();
            });
        };
    });

Jeden plik widoku (tutaj wszystko działa):

Kopiuj
 <a href = "#" type="button" class="btn btn-info" th:attr="
                           ng-click='addToCart(' + ${product.id} + ')'" data-toggle="modal" data-target="#myModal">
                                Doodaj do koszyka</a>

I drugi plik widoku:

Kopiuj
<html lang="en" xmlns:th="http://www.thymeleaf.org" ng-app="demo">
<script src="http://localhost:8080/cartController.js"></script>
<body ng-controller="Hello">

(...)
 <tbody ng-repeat="item in items.cartItemList">
            <div class="row">
                    <h4 class="nomargin">{{item.product.name}}</h4>
                    <p>{{item.product.description}}</p>
            </div>
        <td data-th="Price">{{item.price}} PLN</td>
        <td data-th="Quantity">{{item.quantity}}</td>
        </tbody>
(...)

I problem polega na tym, że funkcja addToCart w pierwszym pliku wykonuje się, request jest wysyłany, ale zmienna item w drugim pliku jest cały czas pusta. Nie wiem gdzie jest błąd ;/

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
shagrin
shagrin
shagrin
shagrin
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 6 lat
  • Lokalizacja:Norwegia, Stavanger
0
  1. Przede wszystkim, czym są dwa pliki widoku? Jeśli masz dwa pliki HTML i w każdym z nich ng-app="demo", to masz dwie, niezależne aplikacje. Masz dwie opcje, zależy czy robisz SPA czy MPA. Przy SPA powinieneś mieć jeden główny HTML i używać routes do zmiany widoków, przy MPA dla tych różnych widoków powinieneś mieć oddzielne moduły, które w zależnościach mają jeden wspólny moduł "demo"
  2. Jakiej wersji AngularaJS używasz? Wygląda na starą, nie powinieneś używać .success() a .then().catch();
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
d0ck
d0ck
0
shagrin napisał(a):
  1. Przede wszystkim, czym są dwa pliki widoku? Jeśli masz dwa pliki HTML i w każdym z nich ng-app="demo", to masz dwie, niezależne aplikacje. Masz dwie opcje, zależy czy robisz SPA czy MPA. Przy SPA powinieneś mieć jeden główny HTML i używać routes do zmiany widoków, przy MPA dla tych różnych widoków powinieneś mieć oddzielne moduły, które w zależnościach mają jeden wspólny moduł "demo"

To są po prostu dwa pliki HTML. Tak każdy z nich ma ng-app="demo". To jak wtedy najprościej zrobić, że jeżeli w jednym pliku naciskam przycisk i wywołuję funkcję $scope.addToCart to w drugim mogę odwoływać się do zmiennej items ?

  1. Jakiej wersji AngularaJS używasz? Wygląda na starą, nie powinieneś używać .success() a .then().catch();

1.4.3, taka akurat była w oficjalnym tutorialu Springowym. Zdaję sobie sprawę, że muszę ją zaktualizować.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
shagrin
shagrin
shagrin
shagrin
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 6 lat
  • Lokalizacja:Norwegia, Stavanger
0

Tu masz przykład: http://blog.robertjesionek.com/angularjs-and-multi-page-applications/ W artykule jest też link do projektu na github.

Podnieś Angulara do wersji 1.6.8

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
d0ck
d0ck
0

Poczytałem trochę o co w tym chodzi i doszedłem do wniosku, że będą potrzebne 2 kontrolery i wymienię między nimi informacje za pomocą serwisu typu factory. Doszedłem do czegoś takiego:

Kopiuj
var app = angular.module('demo', [])

app.factory("items",function(){
    return {};
});

    app.controller('Hello', function($scope, $http, items) {
        $scope.items = items;
        $scope.refreshCart = function() {
            $http.get('http://localhost:8080/rest/cart')
                .success(function(response) {
                    $scope.items = response.data;
                });
        };
        $scope.addToCart = function(productId) {
            $http.put('/add/'+ productId)
                .then(function(response) {
                    $scope.refreshCart();
                });
        };
    });

app.controller('HelloTwo', function($scope, $http, items) {
    $scope.items = items;
    $scope.refreshCart = function () {
        $http.get('http://localhost:8080/rest/cart').then(function (response) {
            $scope.items = response.data;
        });
    };
    $scope.removeFromCart = function(productId) {
        $http.delete('/delete/' + productId)
            .then(function (data) {
                $scope.refreshCart();
            });
    };
});

Ale items w drugim kontrolerze nadal jest puste ;/ Wcześniej przygotowałem w mniejszej skali i wzorowałem się na:

https://www.w3schools.com/code/tryit.asp?filename=FOWUJM7O7T4B

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
shagrin
shagrin
shagrin
shagrin
  • Rejestracja:prawie 17 lat
  • Ostatnio:ponad 6 lat
  • Lokalizacja:Norwegia, Stavanger
0

To nie jest kwestia samych kontrolerow, ale powiazan miedzy modulami. Majac jeden modul "demo" i dwa ng-app="demo" tworzysz nie jedna, ale dwie oddzielne aplikacje. Powienes miec jeden glowny modul, ktory powinien byc przekazywany jako zaleznosc do pozostalych.
Tu masz szkielet takiej aplikacji https://github.com/jesion/angularjs-mpa-skeleton

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Tomasz Kozłowski
Tomasz Kozłowski
Tomasz Kozłowski
Tomasz Kozłowski
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 5 lat
  • Postów:6
0

Przede wszystkich oba kontrolery posiadają izolowany $scope więc wymiana danych pomiędzy nimi może odbywać się poprzez eventy w angularze poczytaj o $on, $broadcast oraz $emit lub serwis/fabrykę.
$emit działa w zasięgu jednego konkretnego $scope
$broadcast wyzwala event listenery globalnie - nieznależnie od kontrolera i jego umiejscowienia. Czasem może wystąpić konieczność wyzwolenia event'u z poziomu $rootScope.

Co chodzi o funkcję then to serwis $http zwraca Ci obietnicę (promise) więc wykonanie funkcji then jest koniecznością. Jeżeli nie ma potrzeby aby robić cokolwiek w funkcji zwrotnej przekazanej do wywołania then możesz zrobić coś takiego: $http.get().then(angular.noop);

edytowany 1x, ostatnio: Tomasz Kozłowski
shagrin
W przypadku jednej aplikacji...
Tomasz Kozłowski
Oczywiście. Ale de facto nie mogę wyobrazić sobie potrzeby zastosowania 2óch aplikacji angulara w jednym projekcie. Dla MPA/SPA Wystarczy DI.
shagrin
Przeczytaj dokladnie post. Autor ma dwa pliki HTML (dwie oddzielne strony), w obu plikach definiuje ng-app="demo", co przeklada sie na to, ze przekierowujac z jednej strony na druga, uzytkownik laduje w nowej aplikacji
S9
Serio z dzieleniem jednego kontrolera dla dwóch widoków jest tyle roboty ? -.-
S9
@shagrin: mam dwa ng-app="demo", ale dlatego, że w ten sposób próbowałem dojść do celu. To oczywiście nie jest konieczność, że muszą być dwa ng-app="demo" w obu plikach. Ja jedynie chce mieć 1 kontroler i móc korzystać z jego zmiennych w dwóch plikach HTML.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Tomasz Kozłowski
Tomasz Kozłowski
Tomasz Kozłowski
Tomasz Kozłowski
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 5 lat
  • Postów:6
0

Widzę, że używasz bootstrap'a polecam korzystać z tej biblioteki jeżeli piszesz w angularze: https://angular-ui.github.io/bootstrap/
W oknie modalnym chcesz wylistować przedmioty dodane do koszyka oraz dać możliwość użytkownikowi na usunięcie tych przedmiotów tak?

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
slayer9
S9
slayer9
S9
  • Rejestracja:prawie 13 lat
  • Ostatnio:8 miesięcy
  • Postów:415
0

Tak, dokładnie. Na stronie produktu dodaje do koszyka wysyłając request (funkcja addToCart w 3. poście). A na stronie koszyka chce je wylistować i móc usuwać (funkcja removeFromCart). To drugie udało mi się zrobić. Po prostu gdy dodaję produkt i pobieram JSONa do zmiennej items (funkcja refreshCart), to nie mogę się odwołać do tej zmiennej na stronie koszyka (jest pusta).

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Treść
Podgląd
Kliknij, aby dodać treść...
Kliknij, aby dodać załącznik lub wklej ze schowka.
Instrukcja obsługi Markdown
Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)