Search Engine in AngularJS

Question

i make straight search engine. Get data from Google Api. My first view is home page and here is only form search and list results. My two view contain player.

My route provider:

$routeProvider.
    when('/home', {
        templateUrl: 'view/home.html',
        controller: 'ZippyListCtrl'
    }).
    when('/mp3/:wwwId/:zippyId', {
        templateUrl: 'view/mp3.html',
        controller: 'Mp3DetailCtrl'
    }).
    otherwise({
        redirectTo: '/home'
    });
}])

My controllers:

zippycatControllers.controller('ZippyListCtrl', ['$scope', '$http', function($scope, $http) {
$scope.dane = {};
$scope.ladowanie = 0;
var url = "http://ajax.googleapis.com/ajax/services/search/web?callback=JSON_CALLBACK";
$scope.search = function() {
    if ($scope.dane) {
        $scope.ladowanie = 1;
        $http({
            url: url,
            params: {q: $scope.dane.q, "start": 0, v: "1.0", rsz: "large", "pws": 0},
            method: 'JSONP'
        }).success(function (responseData) {
            //console.log(responseData);
            $scope.ladowanie = 0;
            $scope.message = responseData;
        })
    }
}}]);

and:

zippycatControllers.controller('Mp3DetailCtrl', ['$scope', '$routeParams', '$sce', function($scope, $routeParams, $sce) {
$scope.player = $sce.trustAsHtml(
    'code player');}]);

My question is: how search on two view?

Sorry, how to improve it , to search work on the second view ? — Garsi
– Garsi, Commented Nov 23, 2014 at 21:13
if you want to use it in multiple places create a directive for it — charlietfl
– charlietfl, Commented Nov 23, 2014 at 21:14
I understand. and that if I am on the second view , this after searching redirect me to the home page with a list of search results ? — Garsi
– Garsi, Commented Nov 23, 2014 at 21:19
can store the results in a service that makes them available anywhere in the app — charlietfl
– charlietfl, Commented Nov 23, 2014 at 21:32

Kop4lyf · Accepted Answer · 2014-11-23 21:40:02Z

For different actions on different pages, you can create a factory whose purpose is to get the data and perform a callback function passed to it.

.factory('getResults', ['$http', function($http) {     
    return function(requestObj, callBackFunc){
        var url = "http://ajax.googleapis.com/ajax/services/search/web?callback=JSON_CALLBACK";
        $http({
            url: url,
            params: {q: requestObj.q, "start": 0, v: "1.0", rsz: "large", "pws": 0},//setting to be done based on requestObj params,
            method: 'JSONP'
        }).success(function (responseData) {
            callBackFunc(responseData);
        })
    }
}])

Now when you call it from the home controller, you can use:

getResults($scope.dane, function(resonseData){
            $scope.messageObj.ladowanie = 0;
            $scope.messageObj.message = responseData;
});

while in other view you can use:

getResults($scope.dane, function(resonseData){
            $scope.messageObj.ladowanie = 0;
            $scope.messageObj.message = responseData;
            //redirection to home page.
});

Here messageObj should be in the main controller(means attached to html element containing the views , it is usually body level controller) so that the it is available in both the view and both the views are just changing the attributes so the main Object and not the copy is getting changed. In your code, $scope.message is different for different controllers as it creates a seperate copy for each controller. Now when you get redirected to the home page, you have a search result list already so you can just populate that there.

Hope this helps...

Collectives™ on Stack Overflow

Search Engine in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related