Routes in angular & php/mysql

Question

I have a code with AngularJS that should receive data in a form in a partial and then return a table with the corresponding results in a database mysql any idea how to fix it

First partial form:

    <form>
          <div class="row">
              <div class="input-field col s12">
                <input id="seacrh" autofocus type="text" class="validate" ng-model="searching.name" required>
                <label for="search">Search</label>
              </div>
          </div>
          <div class="row">
              <div class="col s12">
                <button class="waves-effect waves-yel btn btnSearch col s12" ng-click="searchingElement()"><i class="fa fa-search icoSrch"></i></button>
              </div>
          </div>
        </form>

Second partial table:

    <tr ng-repeat="element in elements">
                <td>{{element.name}}</td>
                <td>5</td>
                <td><button class="waves-effect waves-light btn blue">Details</button></td>
              </tr>

Is that the php code works because the probe by console, but here is:

    <?php
      $data = json_decode(file_get_contents("php://input"));
      $name = $data->name;
      $conn = new mysqli("localhost", "user", "pass","DBName");
      $sql = "SELECT `elements`.name FROM `elements` WHERE `elements`.name='$name'";
      $result = $conn->query($sql);
      $array = array();

      while($row = $result->fetch_assoc()) {
       $array[] = array(
       'name' => $row['name']
      );}
      echo json_encode($array);
  ?>

app.js here is routes and the controller that I am using:

    var app = angular.module('haku_app',['ngRoute'])

    app.config(function($routeProvider){
      $routeProvider
      .when('/',{
        templateUrl: "partials/home.html",
        controller: 'srchCtrl'
      })
      .when('/results',{
        templateUrl: "partials/results.html",
        controller: 'srchCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
    });

    app.controller('srchCtrl',function($scope, $http){
      $scope.serchingElemento= function(){
        $http.post("php/search.php",{'name':$scope.searching.name}).success(function(data){
          $scope.tiendas= data;
          location.href += 'results';
        }).error(function(response){
          console.log(response);
        });
      }
    });

3 Questions: Is the result table part of the partial, or does the partial close and the table in the regular view? What error message are you getting in the console? Are you sure your php function is returning data? (This last questions is especially helpful when debugging, i.e., is the problem in the server or the client.) — Paul, Jun 03 '16 at 05:41
The table is in a partial called results , the form is in a partial called home, when I press the button at home with the function searching element the performs the function of this function through the php and changing the partial results , showing there the information (which does not). The console no show errors. Php function returns the information , I tried a consol.log () and setInterval to see if the information is not erased when loading the other partial, and always displays the information. — Raúl Venegas Ugalde, Jun 03 '16 at 15:56
Since I haven't seen all your code, I'm just guessing here. I believe that the controller srchCtrl is only scoped in the form, not the table. So the data is returning, but by the time it gets back, the view is already on the table, so the data is never displayed. The best solution is probably to write a service to share data across 2 controllers. (form and table). That would be the most 'angular' way to do it. Are you using ui-bootstrap? — Paul, Jun 06 '16 at 23:44
I added to the question all the js code, I am using the same controller for the 2 partial — Raúl Venegas Ugalde, Jun 09 '16 at 20:00

score 0 · Answer 1 · edited May 23 '17 at 12:31

I think there's two things going on. The first is, since you're using ngRoute, you should use $location.path() to change views. So in your case: $location.path() = '/results'; instead of location.href = 'results';. Check out the examples in the documentation: https://docs.angularjs.org/api/ngRoute/service/$route.

BEFORE you do that, you need to save the values of the result of the post call to a service. Services in Angular are singletons, meaning you can save data between views, whether or not you're using the same controller. There are numerous examples of how to write an Angular service, so I won't repeat it. Here's a great example: AngularJS - Passing data between pages.

So your logic would go:

Make post call
In callback, save post data to your service
Change views using $location.path()
In the new view, fetch the data from the service into the controller, and render in the view.

If you really want to do multiple views and nested views, check out ui-router: https://github.com/angular-ui/ui-router. It's more complicated than ngRoute. I don't think you need it, however. But if you work on a more complicated application you may find it helpful.

Finally, I noticed your controller says $route.tiendas = data, but your view says element in elements. Make sure you're using the right variable names.

Hope this helps.

Routes in angular & php/mysql

1 Answers1