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.

javascriptangularjsroutes

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Keep the multiselect dropdown list of the select component open

I am currently utilizing the Select component from material-ui-next. Overall, it functions quite smoothly. One scenario where I implement it is within a cell element of an Ag-Grid. Specifically, in this use case, I am making use of the multiselect feature ...

javascriptreactjsreact-reduxmaterial-ui

Preventing users from navigating away from the page without choosing an answer in a React application

My dilemma involves the implementation of a question component, where I aim to prevent users from leaving a page without selecting an answer. Below is my question component: import React, { Component } from 'react'; import { Link } from 're ...

javascriptreactjsreact-router

Determine the precise location of a screen element with jQuery

Can anyone help me determine the precise position of an element on the current visible screen using jQuery? My element has a relative position, so the offset() function only gives me the offset within the parent. Unfortunately, I have hierarchical divs, ...

javascriptjqueryhtmlcss

Issue with Accordion Panel Content Scroll Bar

Hello there, I've encountered a puzzling problem with my website. My objective is to insert a Time.ly Calendar widget into one panel of my accordion. On this page, "TOURNAMENTS: , the widget appears exactly as desired. However, when I replicate the c ...

javascripthtmlcssscrollaccordion

Is it possible to alter the JSON file being loaded in AngularJS by passing a variable?

I am in need of loading the content from either food1.json or food2.json, and I am attempting to achieve this within the html template: <body ng-controller="MainCtrl" ng-init="init('food1')"> Subsequently, in the JavaScript code: $scop ...

javascriptjsonangularjs

Codeigniter PHP is failing to recognize controllers when routing

Routing Issue While trying to access other routes, I encountered the following error: The requested URL was not found on this server Why am I getting this error? In the routes.php file, setAutoRoute is set to "true" but the routes are not connecti ...

phpcodeigniterroutescontroller

Pass information from a row to an AngularJS controller upon clicking the checkbox within the row

I need help with some HTML code that utilizes AngularJS to display a table. Each row in this table contains a checkbox. Here is a snapshot of the table layout: https://i.sstatic.net/ibDor.jpg Below is the actual HTML code: <div ng-app ng-controll ...

htmlangularjscheckbox

Preventing jQuery from loading a div if it already exists: a step-by-step guide

I've encountered an issue with a mock console on my website - every time the same input value is submitted more than once, jQuery reloads the div due to its specific id. Instead of cloning the div, I decided to append a message indicating that it alr ...

javascriptjqueryajax

When clicked, the onClick feature will reduce the number each time instead of initiating the timer

Currently, I am working on a meditation application using React. As a starting point, I implemented a 25-minute countdown feature. The challenge I am facing is that the timer starts counting down each time the button is clicked, rather than triggering it ...

javascripthtmlcssreactjsjsx

Creating an interactive webpage with Javascript and HTML

I'm facing a challenge with my component setup, which is structured as follows: import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ ...

javascripthtmlangular

What is the best way to ensure that messages stay saved in my app for an extended

I am looking for a way to store messages sent through my small messaging app in a persistent manner. Currently, the messages are transferred from the front-end to a Node, Socket.io, and Express back-end. A friend recommended using Enmaps (), but unfortuna ...

javascriptnode.jsexpresssocket.iolocal-storage

Methods to prompt a user to select an option using Bootstrap

I have been struggling with this problem for hours and it's really starting to frustrate me! Currently, I am incorporating Twitter Bootstrap along with bootstrap-min.js. This is the code snippet in question: <select id="assettype" name="assettyp ...

javascriptjquerytwitter-bootstrap

Achieving a Full-Screen Three.js Canvas in React: A step-by-step guide on spanning the view height and width of a webpage

I've been working on tweaking the code found in this particular example: How to connect Threejs to React? This is the snippet of code I am focusing on: import React, { Component } from 'react' import * as THREE from 'three' clas ...

javascriptcssreactjsthree.js

What additional requirements are needed for Rails and remote AJAX with the "true" setting?

I'm a bit confused about the purpose of remote:true in Rails forms. I initially thought that it required some Javascript to enable asynchronous functionality, but instead it seems to be causing issues with my page. Below is a simple index.html.haml f ...

javascriptruby-on-railsajax

Displaying a preloaded image on the canvas

Once again, I find myself in unfamiliar territory but faced with the task of preloading images and then displaying them on the page once all elements (including xml files etc.) are loaded. The images and references are stored in an array for later retrie ...

javascripthtmlcanvas

How to style TextInput to display dollar amounts when using onChangeText and Redux in React Native

Struggling to format number input in a TextInput using the onChangeText function in React Native with Redux. Tried using .toFixed(2) function, but encountering an issue where it interprets the next digit as the first decimal and rounds back to 0 due to Re ...

javascriptreactjsreact-nativereduxformatting

Having trouble with radio button validation in JS?

I'm having difficulty understanding why the radio button is not staying checked when I select another option. To demonstrate, I created a fiddle where initially the "diy" button is selected but switching to "paid" causes the radio button to jump back ...

javascriptjquery

Having trouble accessing AngularJS Modal dialog pop-up through clicking

I am trying to interact with a dialog box in Selenium Webdriver by clicking on the 'Yes' button. I have attempted to use Actions, window handles, and even switchTo.alert() method but haven't had any success so far. Here is a screenshot of th ...

javaangularjsseleniumwebdriver

What is the process for implementing a fallback image in Material UI?

Hey there! I'm currently looking to customize the fallback image of a Material UI Avatar with my own original image. Does anyone have any tips on how I can achieve this? const fallbackImage = "../../fallback/img.png" const AvatarWithBadge = ...

javascriptreactjsmaterial-ui

Adjust the template within a directive to dynamically include an additional directive

Challenge Create a custom directive that dynamically adds the ng-bind attribute, allowing for the use of ng-bind, ng-bind-html, or ng-bind-html-unsafe without needing to manually add it to the template definition throughout. Illustrative Example http://j ...

javascriptangularjsangularjs-directive