Laravel with angularJS load template after $http call

Question

I am using Laravel with AngularJs trying to fetch data using $http method of angularJS

I got data successfully but the problem is that I want to redirect to another page to show the result how can I achieve this using AngularJs?

Here is my jobs.js controller

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

A service to get data from database

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 from where I got the data

<?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;
        }


    }

This is my search form

@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

I want when user clicks search button it should redirect to another page and display data got from Ajax call.

Also please suggest is this the correct way of achieving this using AngularJS.

I am new to AngularJs and Laravel.

Answer 1

There are multiple ways to achieve this. 1. Load data in a service. After get data from http

 $scope.homepageSearch = function(search) {
        homepagesearchService.getData(search).then(function(data) {
            $scope.result = data;
            DataService.set(data);
    // and move to another page using $state.go('whatever page you want')
                console.log(data);
        });
    }
    //in that page load data from service
   var data =  DataService.get()// and here you can use that data

//in service
//make a var holdingdata; like
set(data){
 holdingdata = data;
}
get(){
 return holdingdata;
}

1. you can use localStorage after http success save data in local storage, and move to another page and get data from localStorage

2. you can also use $state service of angular like $state.go('toState', { 'data':httpData}); and from that page get data from param using $stateParam service of anguar.

   ***From my point of view method 1 and 3 is good. you can use any of them.

Answer 2

I consider another page means ANOTHER VIEW OF 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/');
        });
    }