Mam chyba bardzo oczywiste pytanie, ale nigdzie nie mogłem znaleźć odpowiedzi.
Po prostu próbuję załadować dane JSON z mojego serwera do klienta. W tej chwili używam JQuery do załadowania go z wywołaniem AJAX (kod poniżej).
<script type="text/javascript">
var global = new Array();
$.ajax({
url: "/json",
success: function(reports){
global = reports;
return global;
}
});
</script>
Znajduje się w pliku html. Jak dotąd działa, ale problem polega na tym, że chcę używać AngularJS. Teraz, podczas gdy Angular może używać zmiennych, nie mogę załadować całej rzeczy do zmiennej, więc mogę użyć dla każdej pętli. Wydaje się, że jest to związane z „$ Scope”, który zwykle znajduje się w pliku .js.
Problem polega na tym, że nie mogę załadować kodu z innych stron do pliku .js. Każdy przykład Angular pokazuje tylko takie rzeczy:
function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
Jest to więc przydatne, jeśli IA) Chcesz wpisać to wszystko ręcznie ORAZ B) Jeśli z góry wiem, jakie są moje dane ...
Nie wiem z góry (dane są dynamiczne) i nie chcę tego wpisywać.
Tak więc, kiedy próbowałem zmienić wywołanie AJAX na Angular za pomocą $ Resource, wydaje się, że nie działa. Może nie mogę tego rozgryźć, ale jest to stosunkowo proste żądanie GET dla danych JSON.
tl: dr Nie mogę uruchomić wywołań AJAX w celu załadowania danych zewnętrznych do modelu kątowego.
źródło
Odpowiedzi:
Jak wspomina Kris, możesz wykorzystać
$resource
usługę do interakcji z serwerem, ale mam wrażenie, że zaczynasz swoją przygodę z Angularem - byłem tam w zeszłym tygodniu - więc polecam zacząć bezpośrednio eksperymentować z$http
usługą. W takim przypadku możesz wywołać jegoget
metodę.Jeśli masz następujący plik JSON
Możesz to załadować w ten sposób
get
Metoda zwraca obietnicę przedmiot, który pierwszy argument jest sukces zwrotna a druga błąd zwrotna.Kiedy dodajesz
$http
jako parametr funkcji, Angular robi to magicznie i wstrzykuje$http
zasób do twojego kontrolera.Podałem tutaj kilka przykładów
źródło
code
$ http.get ('/ json'). sukces (funkcja (odpowiedź) {$ scope.reports = response; getData ();code
co jest dla mnie interesujące, to obiekt obietnicy ... Naprawdę chcę dowiedzieć się więcej na ten temat. Podoba mi się ten pomysł. Innym problemem, który miałem, jest po prostu wykonywanie pętli na żądanie Ajax, więc mogę stale "automagicznie" odświeżać stronę. $ timeout nie działa dla mnie.config
,data
,headers
istatus
. Wartości wedata
właściwości są tym, czego chcesz.$scope.todos = res;
lub$scope.todos = res.data;
- różnica polega na tym, czy jesteś w a,.then(response)
czy w..success(result)
The.success
jest dane,response.data
podczas gdy.then
jest dane w całościresponse
.Oto prosty przykład ładowania danych JSON do modelu Angular.
Mam usługę sieciową JSON „GET”, która zwraca listę danych klienta z internetowej kopii bazy danych Microsoft Northwind SQL Server .
http://www.iNorthwind.com/Service1.svc/getAllCustomers
Zwraca niektóre dane JSON, które wyglądają następująco:
..i chcę wypełnić listę rozwijaną tymi danymi, aby wyglądała tak ...
Chcę, aby tekst każdego elementu pochodził z pola „CompanyName”, a identyfikator pochodził z pól „CustomerID”.
Jak bym to zrobił?
Mój kontroler Angular wyglądałby tak:
... który wypełnia zmienną „listOfCustomers” tym zestawem danych JSON.
Następnie na mojej stronie HTML użyłbym tego:
I to wszystko. Teraz możemy zobaczyć listę naszych danych JSON na stronie internetowej, gotową do użycia.
Klucz do tego znajduje się w tagu „ng-options”:
To dziwna składnia, aby się poruszać!
Gdy użytkownik wybierze pozycję z tej listy, zmienna „$ scope.selectedCustomer” zostanie ustawiona na identyfikator (pole CustomerID) tego rekordu Customer.
Pełny skrypt dla tego przykładu można znaleźć tutaj:
Dane JSON z Angular
Mikrofon
źródło
Używam następującego kodu, znalezionego gdzieś w internecie, nie pamiętam jednak źródła.
źródło