Having trouble configuring Angular-UI Router to work properly with Apache server

My web app is running on my PC through an Apache server, but I'm having issues with the routing provided by ui.route. It seems that the simple state I defined is never being reached.

To troubleshoot, I added a wildcard to catch all paths and found that the path ui.routing keeps receiving is: "".

Why is this happening?

Here's what my app.js looks like:

angular.module('populaApp', [
  'populaApp.controllers','ui.bootstrap','ngEmbedApp','ui.router',
]).config( function($stateProvider, $urlRouterProvider) {
        $stateProvider
    .state('state1', {
            url: "*path",
      templateUrl: "http://localhost/popula/app/html/tagsview.html",
            controller: "listsController"
    });
});

And here is my .htaccess file:

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

In my controller, I have written:

console.log($stateParams);

which always outputs:

Object {path: ""}

No matter what the actual path is.

Any suggestions on how to resolve this issue?

Answer №1

Make sure to activate html5Mode

$locationProvider.html5Mode(true);

In your configuration, do the following:

angular.module('populaApp', [
  'populaApp.controllers','ui.bootstrap','ngEmbedApp','ui.router',
]).config( function($stateProvider, $urlRouterProvider,$locationProvider) {
    $locationProvider.html5Mode(true);
        $stateProvider
    .state('state1', {
            url: "*path",
      templateUrl: "http://localhost/popula/app/html/tagsview.html",
            controller: "listsController"
    });
});

Why is this necessary? If you don't enable html5mode, angular will only recognize urls with a # prefix by default. For example, myserver.com/#home.

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

Increase and decrease thumbnail size using an onclick event

I've been experimenting for hours to try and create a functionality where the thumbnail image on my HTML page enlarges when clicked, and then shrinks back down when clicked again. However, I'm encountering an issue where it only gets bigger and d ...

Setting a variable equal to user input

When using a jQuery script, the elements for the details are dynamically created inside a jQuery function. However, there seems to be an issue with assigning the value from the variable "startLocation" to the input "detail_startLocation[]". Only the firs ...

Utilizing AngularJS to calculate elapsed time and continuously update model and view accordingly

Situation Currently, I am interested in developing a web application that tracks a specific data set based on the time since the page was loaded. For example, "how many calories have you burned since opening this webpage?" I am still trying to grasp the ...

Tips for showing ng-repeat items solely when filters are applied by the user

Is there a way to only display elements when a user uses a filter? For instance: $scope.elements = [{name : 'Pablo', age : 23}, {name : 'Franco', age : 98}]; <input type="text" ng-model="searchText" /> <div ng-repeat="elemen ...

Unable to show the name of the chosen file

After customizing the input [type = file], I successfully transformed it into a button with a vibrant green background. Here is the code snippet that enabled this transformation: <style> #file { height:0px; opacity:0; } ...

Curved lines on canvas

I am currently using the stroke and path features in the canvas to create two lines, with the intention of giving them a curved, wave-like effect. I would like to achieve this without having to create an actual image in Photoshop. Is there anyone who can ...

Literal Route Waypoints Guidance Service

I am currently working on an angularjs directive that utilizes the Google Maps Direction Service. In my controller, I have a getFunction that watches for changes in a scope variable. Once the scope variable changes, it triggers the calculateAndDisplayRoute ...

Unable to retrieve the value of a key from a node object

I'm baffled by how this is even possible For example, when I execute this code: console.error(order.Items[i]); The output is: { ItemURL: '', IsBundle: false, GiftTaxPrice: '0', GiftPrice: '0', GiftNotes: null ...

JavaScript strangeness

I am currently working on a dynamic page loaded with ajax. Here is the code that the ' $.get' jQuery function calls (located in an external HTML page): <script type="text/javascript"> $(function() { $('button').sb_animateBut ...

Transform a log file into a JSON structure

In my log file titled request.log, the following entries are present: [2022-06-30T09:56:40.146Z] ### POST https://test.csdf/auth/send_otp { "method": "POST", "headers": { "User-Agent": "testing&q ...

Setting up Geolocation

I have been utilizing an APM tool for my work. The tool currently requires a pop-up in order to capture the user's location. However, there is now a need to capture the user's location without the pop-up appearing. Is there a method or workaroun ...

Highlighting syntax on the server side

I have some code blocks that I want to emphasize. Currently, I am using prismjs for this purpose. However, when I try to highlight several code blocks, the page takes more than 5 seconds to load on my somewhat slow PC. Interestingly, if I remove the prism ...

Contrast between utilizing filter_input and accessing $_POST directly following an asynchronous AJAX request

When I use filter_input(INPUT_POST, 'attribute') and $_POST['attribute'], I get different results and I can't figure out why. The Post-Request is sent by a JavaScript script built with JQuery and it looks like this: // type javaS ...

Manage the material-ui slider using play and pause buttons in a React JS application

I have a ReactJS project where I am utilizing the continuous slider component from material-ui. My goal is to be able to control the slider's movement by clicking on a play button to start it and stop button to halt it. Below is the code snippet of th ...

Using AngularJS to pass authorization headers during redirection using the $window.open method

In the title, I mentioned my intention to redirect from an angularJs application located in localhost:port1 to another angularJs application in localhost:port2. Both applications are secured using a openid-connect server and the angualrjs directive foun ...

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

I am working with two arrays in my code: bookingHistory: Booking[] = []; currentBookings: any[] = []; Both arrays are populated later in the code. The bookingHistory array consists of instances of Booking, while currentBookings contains arrays of Booking ...

Bug found in React Native when navigating between screens causing the screen size to shrink

Check out the image below. https://i.stack.imgur.com/t04Vv.png Issue: Whenever I switch to a new scene, the previous screen appears to shrink or move upwards. This behavior is not consistent with the usual user experience seen on Apple apps - any thought ...

Deactivate a <tr> element if any of its <td> cells contain a value

In my table, there are various trs and tds with different element names. I need to determine if there is text in a specific field. If there is text, I want to disable or hide the entire tr to prevent user interaction. Unfortunately, I am unable to provide ...

How much memory is being used by a loop script?

I have developed a script in both PHP and Javascript that goes through a million iterations, breaking down a string into an array and storing the first element of that array into a new variable. Here is the PHP code: class First { public function Iterate ...

"Learn how to transfer a selected value from a parent ASP.NET dropdownlist to a textbox in a popup window using JavaScript

I'm struggling to pass the value from a dropdown list in the parent ASPX form to a textbox in the child ASPX form. Parent JavaScript: The first script is used to open the popup window <script type="text/javascript"> var popup; ...