CODEWITHSUNDEEP
javascriptangularjs
Garsi
Garsi

Reputation: 3

Search Engine in AngularJS

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?

Upvotes: 0

Views: 95

Answers (1)

Kop4lyf
Kop4lyf

Reputation: 4590

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...

Upvotes: 1

Related Questions