Navigating in AngularJS with various URL parameters

Question

Navigating in AngularJS with various URL parameters

Within my application, I am in need of using routes that require multiple attributes from the URL to be passed into PHP.

The current setup that is functioning correctly is as follows:

.when('/jobs/:type', {
        templateUrl: function(attrs){ return '/pages/jobs.php?_type=' + attrs.type; },
        controller  : 'jobsController'
    })

This allows me to access _type using a $_GET request in jobs.php.

I am attempting to modify it so that I can include multiple attrs in my template Url. Here's an example of what I have tried:

.when('/page/:data1/:data2', {
        templateUrl: function(attrs){ return '/pages/page.php?data1=' + attrs.data1 + '&data2=' + attrs.data2; },
        controller  : 'mainController'
    })

However, this adjustment is causing issues with my application. I believe there must be a simple solution to this problem, but due to my limited experience with Javascript and Angular, I cannot seem to figure it out.

Any help would be greatly appreciated. Thank you.

javascript angularjs routes

Answer 1

Answer №1

It is not recommended to assign a PHP file as a templateUrl in AngularJS, as it may limit the use of AngularJS features within the PHP file. A better approach would be to call the PHP file through a service and manipulate the data using Angular on the front-end. One way to achieve this could be:

ROUTER

.when('/page/:data1/:data2', {
    templateUrl: views/page.html,
    controller  : 'mainController'
})

CONTROLLER

app.module('myApp').controller('mainController', function(pageService, $scope){
  var init = function(){
  var data1 = '1234';
  var data2 = '4567';
 pageService.getPageData(data1, data2)
            .success(function(data){
                $scope.data = data;
             //
             })
}
init();
})

SERVICE

app.module('myApp').controller('pageService', function($http){
    var factory = {};

    factory.getPageDetails(data1, data2){
        return $http({
            url: '/pages/page.php?data1=' + data1 + '&data2=' + data2;,
            method: 'GET'
        });
    }
return factory;
});

Answer 2

It is not recommended to assign a PHP file as a templateUrl in AngularJS, as it may limit the use of AngularJS features within the PHP file. A better approach would be to call the PHP file through a service and manipulate the data using Angular on the front-end. One way to achieve this could be:

ROUTER

.when('/page/:data1/:data2', {
    templateUrl: views/page.html,
    controller  : 'mainController'
})

CONTROLLER

app.module('myApp').controller('mainController', function(pageService, $scope){
  var init = function(){
  var data1 = '1234';
  var data2 = '4567';
 pageService.getPageData(data1, data2)
            .success(function(data){
                $scope.data = data;
             //
             })
}
init();
})

SERVICE

app.module('myApp').controller('pageService', function($http){
    var factory = {};

    factory.getPageDetails(data1, data2){
        return $http({
            url: '/pages/page.php?data1=' + data1 + '&data2=' + data2;,
            method: 'GET'
        });
    }
return factory;
});

Answer 3

Answer №2

I made a minor error by accidentally referring to the incorrect file.

.when('/page/:data1/:data2', {
    templateUrl: function(attributes){ return '/pages/page.php?data1=' + attributes.data1 + '&data2=' + attributes.data2; },
    controller  : 'mainController'
})

This solution is effective.

Answer 4

I made a minor error by accidentally referring to the incorrect file.

.when('/page/:data1/:data2', {
    templateUrl: function(attributes){ return '/pages/page.php?data1=' + attributes.data1 + '&data2=' + attributes.data2; },
    controller  : 'mainController'
})

This solution is effective.

Navigating in AngularJS with various URL parameters

Answer №1

Answer №2

Similar questions

Encountering problems with createMediaElementSource in TypeScript/React when using the Web Audio API

Creating an infinite loop using Jquery's append and setTimeout functions

I am unable to generate a vite application within WSL

Wait until the user submits the form before activating Angular validations, and do not display any validation messages if the user deletes text from a text box

Deleting an item from a Vue.js list

"Unable to locate the specified file or directory" error message pops up while attempting to save a file

What is the best way to identify the property of an object that holds a specific value?

Encountering a 404 error while accessing my meticulously crafted express server

Can a custom directive with dynamic behavior be crafted in AngularJS?

Establish a table containing rows derived from an object

How to retrieve the chosen option from a drop-down menu created within a loop in a React application

Discovering the function responsible for styling a DOM elementDiscovering how to identify the

The silent button malfunctioning - Ionic

Adjusting the filter location in React-admin

Learn the process of dynamically loading scripts and their functions in Angular

Employing require.js, one can integrate a distinctive form of non-concatenated dat.gui source. This allows for the seamless

Prevent $.ajax with jQuery when a button is clicked

Enhance DataTables functionality by including the ability to select which script to execute

I'm struggling to solve a straightforward jQuery sliding issue

"Navigate back to a previous page in Vue Router without having to