Question

我正在使用Laravel和AngularJs尝试使用$ http的angularJS方法获取数据

我成功获得了数据，但问题是我想重定向到另一个页面以显示结果如何使用AngularJs实现此目的？

这是我的jobs.js控制器

app.controller('JobsController', function($scope, homepagesearchService) {
    $scope.opts = [];
    $scope.city = ["All", "Dubai", "Abu Dhabi", "sharjah", "ras al khaimah", "ajman", "umm al quwain", "fujairah", "Al Ain"];
    for (var i = 0; i <= 30; i++) {
        $scope.opts.push(i);
    }
    $scope.homepageSearch = function(search) {
        homepagesearchService.getData(search).then(function(data) {
            $scope.result = data;
            console.log(data);
        });
    }
});

从数据库获取数据的服务

angular.module('jobs').factory('homepagesearchService', function($http){
    return {
        getData: function(search){
            if(angular.isUndefined(search.keyword)){
                search.keyword = 'search-job';
            }
            return $http({
                      method  : 'POST',
                      url     : '/search/'+angular.lowercase(search.keyword).replace(/[^a-zA-Z0-9_]/g,'-')+'-'+'jobs',
                      data    :  search, //forms user object
                      headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
            }).then(function(result){
                return result.data;
            });
        }
    }
});

我从中获取数据的JobsController

<?php
/*
*Developer: Kritika Shrivastava
*Jobs Controller to Fetch All Jobs
*
*/

namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
use App\Jobs;

class JobsController extends Controller
{
    /**
     * Show the application welcome.
     *
     * @return \Illuminate\Http\Response
     */
    public function welcome(){
        return view('welcome'); 
    }

        /*
        *
        *Ajax Call to search Home Page
        *
        */

        public function homepageSearch(){
            $_POST = json_decode(file_get_contents('php://input'), true);
            $jobs =  Jobs::latest('created_at')->search()->get();
            echo $jobs;
        }


    }

这是我的搜索表单

@extends('layouts.app')
@section('content')
<div ng-app="jobs">
<div class="m-banner-1" ng-controller="JobsController">
   <div class="main ui container m-banner-1-cover" >
      <form ng-submit="homepageSearch(search)">
          <div class="ui grid">
            <div class="sixteen wide mobile five wide tablet five wide computer column auto-k">
               <p style="color:#ffffff;font-size:20px;">Enter Keywords</p>
                <div class="ui fluid icon input">
                  <input type="text" placeholder="Search a very wide input..." ng-model="search.keyword">
                </div>
              </div>
            <div class="sixteen wide mobile five wide tablet five wide computer column ui fluid">
               <p style="color:#ffffff;font-size:20px;">Location</p>
               <select class="ui fluid normal dropdown" 
               ng-options="cit for cit in city" ng-model="search.city">
               </select>
            </div>
            <div class="sixteen wide mobile five wide tablet five wide computer column">
              <p style="color:#ffffff;font-size:20px;">Experience</p>
               <select class="ui fluid normal dropdown" ng-model="search.experience"
                 ng-options="opt as opt for opt in opts">
                 <option value="">Years</option>
               </select>
            </div>
            <div class="sixteen wide column align center">
                  <button class="ui massive button orange-btn wide-bt">Find Jobs</button>
            </div>
         </div><!--ui grid-->
      </form>
   </div><!--ui container-->
</div><!--m-banner-1-->

</div>
<br>
<br>
@endsection

我希望当用户点击搜索按钮时，它应该重定向到另一个页面并显示从Ajax调用获得的数据。

另请注意，这是使用AngularJS实现此目的的正确方法。

我是AngularJs和Laravel的新手。

Answer 1

有多种方法可以实现这一目标。 1.在服务中加载数据。从http

获取数据后

lexer = MyGrammarLexer(FileStream(path))
stream = CommonTokenStream(lexer)
parser = MyGrammarParser(stream)
return parser.start().object

您可以在http成功后使用localStorage将数据保存在本地存储中，然后移动到另一个页面并从localStorage获取数据
你也可以使用角状的$ state服务 $ state.go（＆＃39; toState＆＃39;，{＆＃39; data＆＃39;：httpData}）; 并从该页面使用$ stateParam anguar服务从param获取数据。

***从我的观点来看，方法1和3是好的。你可以使用它们中的任何一个。

Answer 2

我认为另一页意味着ANGULAR APP的另一种观点：

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
    .when('/router-url', {
        controller: 'AnotherController',
        templateUrl: 'Partials/ViewStart.html'
    })

    $scope.homepageSearch = function(search) {
        homepagesearchService.getData(search).then(function(data) {
            $scope.result = data;
            console.log(data);
             $location.path('/router-url/');
        });
    }

$ http call

2 个答案: