I have api for search functionality which has written in Laravel PHP.When I type some string in input tag and click on search button, then I am geeting the json response.
Now what I have to do is on ngClick a new html page should open say "search.html" with display the json response using angularjs.
I am not able to do, may be my lake of knowledge:). Can anybody tell me how can I do this.
Here is my code:
// Search Controller
QAApp.controller('SearchCtrl', function ($scope, $http) {
$scope.search = function (searchtag) {
var request = $http({
method: 'GET',
url: server + 'api/question/tagged/' + searchtag,
});
request.success(function(data, status, headers, config) {
console.log(data);
$scope.qa = data;
});
}
});
html page is :
<div class="collapse navbar-collapse navbar-ex1-collapse" ng-controller = "SearchCtrl">
<div style = "float: right; margin-top: 7px;" class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...." name = "tag" ng-model = "tag">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary" ng-click = "search(tag);">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
Over here you have two different pages and whenever you are moving from one page to other (no SPA) the page will complete refresh....so if one is thinking of having it in global variables, services or even $rootScope that will not work as these variables will get refreshed.
In order to cope up then we either need to work with cookies, querystring or the browser localStorage.
In order to use local Storage in Angularjs you need to include a script in both the pages for angular-local-storage Github Link
Code Example how to use it:
angular.module('yourModule', ['LocalStorageModule'])
.controller('yourCtrl', [
'$scope',
'localStorageService',
function($scope, localStorageService) {
// Start fresh
localStorageService.clearAll();
// Set a key
localStorageService.set('Favorite Sport','Ultimate Frisbee');
// Delete a key
localStorageService.delete('Favorite Sport');
}]);
/*
To set the prefix of your localStorage name, you can use the setPrefix method
available on the localStorageServiceProvider
*/
angular.module('yourModule', ['LocalStorageModule'])
.config(['localStorageServiceProvider', function(localStorageServiceProvider){
localStorageServiceProvider.setPrefix('newPrefix');
}]);
Library main functions:
Reference of what local Storage is actually about
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments