Jak połąłczyć laravel z angularem?

0

Czesc, chodzi mi o konkretna sprawe. A mianowicie. Chcialbym, zeby skrypty angulara, jak na frameworka front endu przystalo, zeby pobieral te dane jakie daje back-end. Niestety natrafilem na komplikacje, poniewaz pobierajac dane czysto z laravela w takim routingu

Route::get('/demo/{id}','democontroller@show');

Robie sobie w metodzie show widok + zapytanie z bazy i dodaje do zmiennej + compact w View::make. Wtedy tworze plik blade.php i @foreach lapie dane wszystkie z urla o okreslonym id. Jesli id z urla = id z bazy to wyswietla wyniki z tego id, wszystko fajnie. Ale chcialem, zeby zrobil to angular. Generalnie na pobranie wszystkich danych nie ma problemu. Wystarczy metoda

$http.get('/demo').success(function(){ });

Ale nie wiem jak pobrac dane z danym id. Restfulowo bym to zrobil, ale nie chce w ten sposob to robic. Probowalem cos z routeparam, ale cos mi nie wyszlo. Wiem, ze jest cos takiego jak parametry w http.get, ale nie wiem jak to zaimplementowac, zeby to bylo dynamiczne, po zmianie urla bierze odpowiedni parametr. Sa jakies pomysly? Czy po prostu faktycznie lepiej pomieszac moc obu jezykow ?

0

Jeśli chodzi o angulara i wysyłanie parametrów to albo robisz to tak, że przypisujesz sobie id do jakiejś zmiennej i np. twórz url dynamicznie wklejając:

$http.get(url).success(function(){ });

a drugi sposób to:

$http.get(url path, {
    params: { id: id }
});
0

Dziex, poradzilem sobie z tym. Zrobilem cos takiego w kontrolerze:

$scope.get = function(parameters) {
					$http.get("http://localhost/laravel/public/demo/"+parameters).success(function(data){
					$scope.data = data;
				
				});
			};
 

A pozniej w widoku:

<div ng-repeat="n in data">
 <p><a class="btn btn-primary btn-lg" ng-click="get({{n.id}})" href="#/getdata" role="button">Learn more &raquo;</a></p>
</div>

Pozniej chce sprobowac zrobic z routeparam, zobaczymy jak to wyjdzie.

0

Borykam sie teraz z takim problemem. Jest mozliwosc wyswietlenia kilku wynikow poprzez route param? Bo jak wiadomo, on bierze jakies id i wyswietla. A w moim pliku wyglada to tak.

[{"id":1,"idpost":1,"postname":"General Example","postsender":"General Example","postcont":"General Example"},{"id":3,"idpost":2,"postname":"Hobby Example","postsender":"Hobby Example","postcont":"Hobby Example"},{"id":5,"idpost":1,"postname":"Mu mu Cow Cow","postsender":"Mu mu Cow Cow","postcont":"Mu mu Cow Cow"},{"id":6,"idpost":2,"postname":"Mu mu Cow Cow2","postsender":"Mu mu Cow Cow2","postcont":"Mu mu Cow Cow"}]
 

Chce dawac a hrefy do idpost, a pozniej wszystkie wyniki np. z idpost1 wyswietlac i tak dalej. Nie jeden wynik tylko kilka wynikow o tym id. A oto moj kod:
Controller:



angular.module('myapp',[]).
    config(function($routeProvider ){
      $routeProvider.
      when('/routeparam',{templateUrl:'../app/views/routeparam.php'}).
      when('/routeparam/:idpost',{templateUrl:'../app/views/routeparamdetail.php',controller:'viewController'})
    }).

    controller('ctrl',['$scope','$http','$window', function($scope,$http,$window){
      $http.get('http://localhost/laravel/public/demo').success(function(data){
        $scope.information=data;
        console.log($scope.information);

    
  
    
      })
    }]).
    controller('viewController',['$scope','$routeParams',function($scope,$routeParams){

       $scope.person=$scope.information[$routeParams.idpost]

    }])
 

A to widok


<!doctype html>
<html lang="en" ng-app="myapp">
<head>
	<meta charset="UTF-8">
	<title>Laravel + Angular</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
	<!-- <script src="https://code.angularjs.org/1.1.5/angular-resource.min.js"></script> -->
	<script src="../app/angular/app.js"></script>
</head>
<body>
<div class="container">
<div ng-controller="ctrl">
<div ng-include="'../app/views/navbartop.html'">
</div>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">

      <div class="container">

      	  <ng-view></ng-view>
    </div>




	
		</div>
	</div>
</body>
</html>

 

routeparam.php

 
<div ng-repeat="n in information">
	<a href="#/routeparam/{{n.idpost}}">{{n.postname}}</a>{{n.idpost}}
</div>

routeparamdetail.php

<div ng-repeat="e in person ">
	{{e.postname}}
</div>
0

Jeśli dobrze zrozumiałem to po prostu zrobiłbym tak samo jak z ID tylko, że podajesz idpost i po stronie serwera zwracasz listę obiektów które mają taki idpost, przypisujesz do zmiennej i wyświetlasz ng-repeat.

0

Hm, nie bardzo rozumiem. Chyba wlasnie tak zrobilem na gorze. Ale przy uzyciu routeparam zwraca mi wyniki, ale nie takie jak chce. Tylko leci pokolei z bazy numerujac od 0.

0

Ok już widzę.

$scope.person=$scope.information[$routeParams.idpost]

Tutaj jest błąd bo bierzesz routeParams.idpost np. 1, to wygląda to tak że $scope.information[$routeParams.idpost] zwraca Ci element nr 1 z tablicy $scope.information. Najprostszy sposób to zrobić pętle po $scope.information i ze $scope.information pobierać tylko elementy których idpost jest równy routeParams i pushować (dodawać) do tablicy $scope.person.

0

Cos takiego?

      $scope.array = [];
            for(var i =1; i<= $scope.information.length; i++){
    if($scope.information[i].idpost == $routeParams.idpost)
    {
     var info = $scope.information[i];
      $scope.array.push({id: info[i].id, idpost: info[i].idpost, postname: info[i].postname, postsender: info[i].postsender, postcont: info[i].postcont});
      break;
    }
  }

Sugerujac sie moim kodem

0

Osobiście troche inaczej bym to zrobił:

      $scope.array = [];
    for(var i =0; i < $scope.information.length; i++){
    if($scope.information[i].idpost == $routeParams.idpost)
    {
      $scope.array.push($scope.information[i];);
    }
  }

Pamietaj zaczynać od 0 bo numerowanie tablic zaczyna się od 0! Czyli tablica[0] = pierwszy element z tablicy.

0

No tak masz racje, juz zglupialem przez to wszystko. Mega propsy dla Ciebie ! Ogolnie mogblym to bez problemu odczytywac plikami blade.php od laravela, ale pomyslalem sobie, ze moze kiedys takie cos w przyszlosci mi sie przyda. Temat do zamkniecia. Jeszcze raz dzieki. :)

0

Mam jeszcze pytanie na szybko. Wiesz moze dlaczego jak odswiezam strone to nie moze odczytac tych danych?

0

Niestety ciężko mi powiedzieć, F12 w przeglądarce i debuguj tyle Ci mogę pomóc. A dane wczytujesz z bazy czy z pliku czy jak?

0

Dane wczytuje z urla, w laravelu mam napisany kodzik zeby pobieral z bazy tabelke i zwracal wartosc do urla. Taki error pocztkowy:

TypeError: Cannot read property 'length' of undefined
at new <anonymous> (routeparam.js:24)
at d (angular.min.js:28)
at Object.instantiate (angular.min.js:28)
at $get (angular.min.js:53)
at k (angular.min.js:166)
at Object.$get.e.$broadcast (angular.min.js:94)
at angular.min.js:85
at j.promise.then.i (angular.min.js:79)
at j.promise.then.i (angular.min.js:79)
at angular.min.js:80

Wiec pomyslalem, ze zrobie cos takiego :
W pierwszym kontrolerze, tam gdzie byl http.get

$rootScope.leng = $scope.information.length;

, rootscope, zeby go widzial inny kontroler,a pozniej podmienilem na:

 $scope.array = [];
    for(var i =0; i < $rootScope.leng; i++){
    if($scope.information[i].ide == $routeParams.idpost)
    {
      $scope.array.push($scope.information[i]);
    }
  };
  console.log($scope.array)

Co dziwne, bo kiedys bawilem sie z routingiem i tam wszystko jest okej. Analizuje caly czas, czy moze czegos nie zabraklo, ale jak na razie wszystko jest tak samo, procz tego, ze tam wczytuje dane z pliku json z dysku.

0

Obstawiam, że błąd wynikał z asynchroniczności bo ładowałeś http.get równocześnie z pętlą i angular nie miał dostępu do danych bo były w trakcie ładowania.

0

W takim razie jak tego uniknac? Moze pobieranie w factory?

0

Najpierw spróbowałbym przenieść kod w którym masz pętle do tego http.get i zobaczyć czy wtedy ruszy. Jeśli wtedy ruszy to musisz kombinować coś jak tutaj: http://stackoverflow.com/questions/16286605/initialize-angularjs-service-with-asynchronous-data

Niestety sam nie do końca czuje się pewnie z asynchornicznością więc Ci nie pomogę.

0

Owszem, dziala. Ale tylko jesli odswieze strone. Bezposrednio jak wejde w link nic nie widze, ale console.log widzi te elementy ale nie ma ich, dopiero jak odswieze to sie pojawia. Dzieki bede probowal

W sumie to konsola ich nie widzi, przepraszam.

Musi byc odswiezenie strony, albo wejscie od razu w ten link, bo asynchroniczie on nie zmieni tych danych.

Ok, naprawilem to. Temat do zamkniecia postaram sie rozwiazac to przy pomocy linku od kolegi. Dziekuje serdecznie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1