在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);
        });
      }
    });

Answer 1

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:

1. Make post call
2. In callback, save post data to your service
3. Change views using $location.path()
4. 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.