how to pass json response from one html page to another html page using angularJs? -
i have api search functionality has written in laravel php.when type string in input tag , click on search button, geeting json response.
now have on ngclick new html page should open "search.html" display json response using angularjs.
i not able do, may lake of knowledge:). can tell me how can this.
here 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 :
<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 have 2 different pages , whenever moving 1 page other (no spa) page complete refresh....so if 1 thinking of having in global variables, services or $rootscope not work these variables refreshed.
in order cope either need work cookies, querystring or browser localstorage.
in order use local storage in angularjs need include script in both pages angular-local-storage github link
code example how use it:
angular.module('yourmodule', ['localstoragemodule']) .controller('yourctrl', [ '$scope', 'localstorageservice', function($scope, localstorageservice) { // start fresh localstorageservice.clearall(); // set key localstorageservice.set('favorite sport','ultimate frisbee'); // delete key localstorageservice.delete('favorite sport'); }]); /* set prefix of localstorage name, can use setprefix method available on localstorageserviceprovider */ angular.module('yourmodule', ['localstoragemodule']) .config(['localstorageserviceprovider', function(localstorageserviceprovider){ localstorageserviceprovider.setprefix('newprefix'); }]);
library main functions:
- .set : set key value in localstorage space
- .clearall: clear keys in localstorage
- .delete: delete key
- .get: key localstorage
reference of local storage about
Comments
Post a Comment