Starting up an AngularJS controller with varying sets of data

Question

Starting up an AngularJS controller with varying sets of data

In my Angular app, I am utilizing $routeProvider for routing purposes. There are 2 routes where I am using the same HTML template and controller.

        when('/products, {
            templateUrl: 'views/products.html',
            controller: 'ProductListCtrl'
        }).
        when('/myProducts', {
            templateUrl: 'views/products.html',
            controller: 'ProductListCtrl'
        }).

The only variation lies in the data that needs to be displayed. Specifically, for the products path, I want an AJAX request to myserver:8080/products, whereas for the myProducts path, I need to retrieve data from an AJAX request to myserver:8080/products/my.

Currently, I am using the $location service to determine the current page (products or myProducts) and load the appropriate information.

I am curious if there is a more elegant solution to achieve this. Is it possible to utilize the resolve method of $routeProvider?

javascript ajax angularjs

Answer 1

Answer №1

To effectively reuse a controller name in the present scenario, utilizing resolve with $routeParams is highly recommended.

You can make modifications to your code as shown below

when('/products, {
                templateUrl: 'views/products.html',
                controller: 'ProductListCtrl',
    resolve: {
            product: function($http) {
              return $http.get('/products')
            },
              needToShowFilter:function($q){
               var showfilter = $q.defer();
                   showfilter.resolve(false);
               return showfilter.promise
            }
          }
            }).
            when('/myProducts', {
                templateUrl: 'views/products.html',
                controller: 'ProductListCtrl',
    resolve: {
            product: function($http) {
              return $http.get('/products/my')
            },
            needToShowFilter:function($q){
               var showfilter = $q.defer();
                   showfilter.resolve(true);
               return showfilter.promise
            }
          }
            }).

Afterwards, you can inject the product into the controller code.

Answer 2

To effectively reuse a controller name in the present scenario, utilizing resolve with $routeParams is highly recommended.

You can make modifications to your code as shown below

when('/products, {
                templateUrl: 'views/products.html',
                controller: 'ProductListCtrl',
    resolve: {
            product: function($http) {
              return $http.get('/products')
            },
              needToShowFilter:function($q){
               var showfilter = $q.defer();
                   showfilter.resolve(false);
               return showfilter.promise
            }
          }
            }).
            when('/myProducts', {
                templateUrl: 'views/products.html',
                controller: 'ProductListCtrl',
    resolve: {
            product: function($http) {
              return $http.get('/products/my')
            },
            needToShowFilter:function($q){
               var showfilter = $q.defer();
                   showfilter.resolve(true);
               return showfilter.promise
            }
          }
            }).

Afterwards, you can inject the product into the controller code.

Answer 3

Answer №2

Consider including $route in your controller and then output

$route.current

to inspect the content, this should help you retrieve the information

Answer 4

Consider including $route in your controller and then output

$route.current

to inspect the content, this should help you retrieve the information

Starting up an AngularJS controller with varying sets of data

Answer №1

Answer №2

Similar questions

Sending numerous HTML forms using a sole submit button through AJAX

Requesting data download via AJAX for a CSV file

What is the best way to extract data using Angular from the backend and then transfer it to the frontend using Node.js?

What steps should I take to resolve npm start issues within my Node.js application?

Prevent button from functioning after loading specific div using Jquery

Experiencing difficulties when trying to input text into a React text field

Accessing variables in subfunctions proves challenging for Node.js

What would be your approach to incorporating code highlighting while scrolling?

Submitting Forms using AJAX in Razor with MVC3

Guide on incorporating dxTreeView with AngularJS

EINVAL: the argument provided is invalid for reading

Struggling to dynamically update the URL within a "a href" tag, JavaScript is failing to reflect the changes in the output

Leveraging String Interpolation for Retrieving Array Values in Angular2 Application

ASP.NET Core Ajax response is empty

What is the process for generating an HTML document from start to finish with the 'html-element' node module?

Can a single static variable be shared among all connections on the server?

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I am interested in running JavaScript code on a page that has been loaded through AJAX

Utilize ASP.net to efficiently store and retrieve events in a SQL database

Having trouble setting the locale in momentJS?