Learn how to switch between search and results views in Angular while also transferring data

Question

Learn how to switch between search and results views in Angular while also transferring data

Currently, I'm attempting to tackle a common task that I've yet to encounter an example of.

Display 1 and Control 1 :

In this view, there is a basic textbox with ng-model="searchTerm" and ngSubmit event. After the user enters their search term, a webservice call is made to retrieve results for display on the next screen.

Display 2 and Control 2

Upon hitting submit, the view transitions to a results screen where the data fetched from the webservice is shown.

1) What would be the typical method for visually changing screens in this scenario - employing routing and view manipulation? Or is it better to use ng-show/ng-hide?

2) How can I effectively pass the search term from control 1 to control 2?

javascript angularjs web-services

Answer 1

Answer №1

If implemented, the code structure would resemble the following (not tested):

View 1 and Controller 1:

View:

<form ng-submit="showResults(searchTerm)">
    <input type="text" ng-model="searchTerm">
</form>

Controller:

$scope.showResults = function (searchTerm) {
     // Redirect to another page for query handling
     // Make sure to include $location in your controller
     $location.url('/results?q=' + encodeURIComponent(searchTerm));
});

View 2 and Controller 2:

Assuming this view is linked to /results route.

Controller:

app.controller('SearchResultsCtrl', ['$scope', '$location', '$http', function ($scope, $location, $http) {
    // Watch the query string parameter for changes to update and rerun the query
    $scope.$watch(function () {
        return ($location.search() || {}).q;
    }, function (searchTerm) {
        // Call web service using $http or other methods, e.g.
        $http.get('/api/search?q=' + searchTerm).then(function (data) {
            $scope.results = data;
        });
    });
 }]);

Then manipulate the results scope property as needed within your view.

Answer 2

If implemented, the code structure would resemble the following (not tested):

View 1 and Controller 1:

View:

<form ng-submit="showResults(searchTerm)">
    <input type="text" ng-model="searchTerm">
</form>

Controller:

$scope.showResults = function (searchTerm) {
     // Redirect to another page for query handling
     // Make sure to include $location in your controller
     $location.url('/results?q=' + encodeURIComponent(searchTerm));
});

View 2 and Controller 2:

Assuming this view is linked to /results route.

Controller:

app.controller('SearchResultsCtrl', ['$scope', '$location', '$http', function ($scope, $location, $http) {
    // Watch the query string parameter for changes to update and rerun the query
    $scope.$watch(function () {
        return ($location.search() || {}).q;
    }, function (searchTerm) {
        // Call web service using $http or other methods, e.g.
        $http.get('/api/search?q=' + searchTerm).then(function (data) {
            $scope.results = data;
        });
    });
 }]);

Then manipulate the results scope property as needed within your view.

Answer 3

Answer №2

When it comes to routing, your page will undergo changes and there will be interactions between the client and server. This interaction may lead to increased overhead if bandwidth is limited. On the other hand, using ng-show and ng-hide will simply toggle the display of an existing page, essentially creating a single-page application. The choice between the two depends on the specific requirements of your project.

Consider what functionality you want your application to have. If storing search strings is crucial for your application, utilizing a service might be the way to go. However, keep in mind that this approach won't retain values across different sessions.

As mentioned by GregL in the comments, appending search strings to the URL might not be ideal for handling multiple search hits or navigating previous searches. In such scenarios, using a service would be more efficient. But if storage and retaining previous values are not necessary, sticking with routeParams could suffice.

Answer 4

When it comes to routing, your page will undergo changes and there will be interactions between the client and server. This interaction may lead to increased overhead if bandwidth is limited. On the other hand, using ng-show and ng-hide will simply toggle the display of an existing page, essentially creating a single-page application. The choice between the two depends on the specific requirements of your project.

Consider what functionality you want your application to have. If storing search strings is crucial for your application, utilizing a service might be the way to go. However, keep in mind that this approach won't retain values across different sessions.

As mentioned by GregL in the comments, appending search strings to the URL might not be ideal for handling multiple search hits or navigating previous searches. In such scenarios, using a service would be more efficient. But if storage and retaining previous values are not necessary, sticking with routeParams could suffice.

Answer 5

Answer №3

One effective method of working with search functionality is by incorporating the search query into the URL as a corresponding GET parameter. This approach is commonly seen in traditional websites as well as in single page applications. The key advantage is that the search results screen should accurately reflect the current search term and be easily bookmarked.

To implement this, you can utilize the ngRoute module to create a simple routing system.

Here's a basic example:

// Define routes
app.config(function($routeProvider) {
    $routeProvider.when('/home', {
        controller: 'HomeController',
        templateUrl: 'home.html'
    })
    .when('/search-results', {
        controller: 'SearchResultsController',
        templateUrl: 'results.html'
    })
    .otherwise('/home');
});

// HomeController manages form submission and navigates to SearchResultsController
app.controller('HomeController', function($scope, $location) {
    $scope.search = function() {
        $location.path('/search-results').search({query: $scope.query});
    };
});

// SearchResultsController retrieves search query from URL and executes search request
app.controller('SearchResultsController', function($scope, $routeParams, $location) {
    $scope.query = $routeParams.query;
    $scope.url   = $location.absUrl();

    // perform search operation using $scope.query
});

Try out a Simple Demo here: http://plnkr.co/edit/FMRTTbxdNv0pGSYpfwve?p=preview

Answer 6

One effective method of working with search functionality is by incorporating the search query into the URL as a corresponding GET parameter. This approach is commonly seen in traditional websites as well as in single page applications. The key advantage is that the search results screen should accurately reflect the current search term and be easily bookmarked.

To implement this, you can utilize the ngRoute module to create a simple routing system.

Here's a basic example:

// Define routes
app.config(function($routeProvider) {
    $routeProvider.when('/home', {
        controller: 'HomeController',
        templateUrl: 'home.html'
    })
    .when('/search-results', {
        controller: 'SearchResultsController',
        templateUrl: 'results.html'
    })
    .otherwise('/home');
});

// HomeController manages form submission and navigates to SearchResultsController
app.controller('HomeController', function($scope, $location) {
    $scope.search = function() {
        $location.path('/search-results').search({query: $scope.query});
    };
});

// SearchResultsController retrieves search query from URL and executes search request
app.controller('SearchResultsController', function($scope, $routeParams, $location) {
    $scope.query = $routeParams.query;
    $scope.url   = $location.absUrl();

    // perform search operation using $scope.query
});

Learn how to switch between search and results views in Angular while also transferring data

Answer №1

View 1 and Controller 1:

View 2 and Controller 2:

Answer №2

Answer №3

Try out a Simple Demo here: http://plnkr.co/edit/FMRTTbxdNv0pGSYpfwve?p=preview

Similar questions

Physically eliminate (and obliterate) a component from keep-alive

XPath using JScript

Differences Between JavaScript and TypeScript Classes

Steer clear of performing DOM manipulation with jQuery within an ng-repeat directive

Tips for dynamically updating the div class based on the model's value

Problem encountered while using AJAX to load a PHP script, triggered by an onclick event;

What causes Angular to automatically add 'localhost' to the URL when using $location.path?

Discover the correct steps to transition from using particles.js to the react-tsparticles package

Guide to invoking a method in the child window using AngularJS

Creating an attractive image carousel using jQuery or YUI for your website

Discover the way to retrieve PHP SESSION variable within JavaScript

Is it feasible to implement multiple selection columns in ng-grid, such as columns with checkboxes and radio buttons?

What is the sequence in which Jest executes its tests?

Awaiting fulfillment - Promise remains pending as loop executes queries

Show ng-message when email is invalid in Angular Material without using ng-pattern

Trigger a notification from one webpage to another (PHP, JavaScript, HTML)

Interconnected realms communication

Using GSAP to create a staggered animation with a negative delay

Is it Better to Perform Manual Change Detection in AngularJS or Angular 2?

Integrating data binding within a .append function using AngularJS