When I use the AngularJS otherwise function, it sends me to the incorrect route

My routes are defined in the following way:

$routeProvider
    .when('/settings', { templateUrl: 'settingsTemplateURL', controller: settingsCtrl })
    .when('/profile', { templateUrl: 'profileTemplateURL', controller: profileCtrl })
    .otherwise({ redirectTo: '/settings' });

I access my website using addresses like localhost/testapp/#/settings or localhost/testapp/#/profile and so on.

The issue arises when I type in the address: localhost/testapp. At this point, the otherwise function redirects me to localhost/testapp#/settings where the slash after 'testapp' is missing. This discrepancy occurred after updating AngularJS from version 1.0.7 to 1.2.13.

Could someone provide assistance with this problem? Thank you in advance. Sincerely, David

javascriptangularjsangularjs-routing

Answer №1

the issue lies with localhost. consider using: http://127.0.0.1/ instead of localhost

You may also encounter difficulties when the $.route is attempting to retrieve the templates, as sometimes it fails due to incorrect headers being sent, but this varies based on your configurations.

Have you tried implementing these changes?

Answer №2

If you want to make it function in localhost, you need to access the routes remotely like shown below: 

    $routeProvider.when('/home',      {   
             templateUrl: 'http://yoururl.com/model/app/whatever.php',       
             controller: 'Dashboard'      
    })

Make sure to include trusted sources: 

$sceDelegateProvider.resourceUrlWhitelist(['self','http://yoururl.com/model/app/**']);

Also add the following to your PHP code: 

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: origin, content-type, accept');

This method is essential for making it work with localhost

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

Tips for preventing a Wistia video from playing in a tab when moving away from the tab

Hey everyone, I'm facing an issue with a jsp page that contains multiple tabs. One of the tabs has a wistia video embedded in it. In Firefox and Chrome, when I switch away from the video tab, the video stops playing as expected. However, in Internet ...

javascriptjquerytabs

Issues with AngularJS edit functionality for records not functioning as expected

I have implemented a feature on my page where users can add objects to an array. These objects are then displayed on the page along with links for editing each item in the array. Each added item is assigned a primary key, allowing users to edit it later e ...

javascriptangularjsangular-ngmodel

Are Twitter Bootstrap buttons compatible with iPad devices?

Have you ever tried using the attractive buttons provided by Twitter? They can be a great alternative to standard radio/checkbox options. If you have used them in your production, how effective were they? I am particularly curious about their compatibilit ...

javascripthtmltwitter-bootstrap

Organizing a Collection of Likes within an AngularJS Service

I have a like button on my profile page that, when clicked, should add the user's like to an array and store it in the database. Within my profile controller, I have the following code: $scope.likeProfile = UserService.likeProfile(loggedInUser,$stat ...

javascriptarraysangularjs

How can changes be spread to other stores within the react flux flow?

My project has a simple structure consisting of 1 store, 2 components (parent and child, with the parent acting as a controller), actions, and constants. Currently, I am not making any API calls; all data is passed to the parent component as props. The fl ...

javascriptreactjsflux

What is the best way to send information from App.js to components?

In my project, I am working with App.js and a functional component called "uploadlist". The goal is to pass a 'custid' value from App.js to the uploadlist component. Here's what I have attempted: app.js: export default class App extends Com ...

javascriptreactjs

My findOne() function seems to be malfunctioning - could there be an issue with my syntax?

I have created a database called 'rodrigo-contatos' using the following code: var mongojs = require('mongojs'); var db = mongojs('rodrigo-contatos', ['rodrigo-contatos']); In an attempt to search the database, I am ...

javascriptmongodbmongojs

Enhance user experience with Angular Material and TypeScript by implementing an auto-complete feature that allows

Currently facing an issue with my code where creating a new chip triggers the label model to generate a name and ID. The problem arises when trying to select an option from the dropdown menu. Instead of returning the label name, it returns an Object. The ...

javascriptangularjstypescriptangular-material

Update the table with information from a designated URL every 5 seconds

So here's the situation: I've got a dynamic HTML table <table id="example"></table>. The data displayed in this table changes according to the URL. Normally, my default URL looks like this: index.php?action=add To handle this, I&a ...

javascriptphpjqueryhtmlajax

Using the scope attribute with $watch does not effectively monitor changes to the model

I'm currently developing a directive designed for <input> that monitors user input. The goal is to reformat the input model object and set a variable as true once a valid phone number has been entered. CountryISO is injected as a constant depen ...

angularjsangularjs-directive

Unable to submit /api/sentiment

I'm currently troubleshooting the /api/sentiment endpoint in postman and encountering a "cannot POST" error. I have confirmed that the routes are correct and the server is actively listening on port 8080. Interestingly, all other endpoints function wi ...

javascriptnode.jsexpress

Utilizing nested routes in Node.js with express.js framework!

index.js const AuthRouter = require("./Routes/Auth/signup") app.use("/account", AuthRouter) signup.js router.post("/", async (req, res) => { res.send("Signup") }) It's functioning correctly... H ...

javascriptnode.jsexpressexpress-router

Await the reply from Angular while using Selenium WebDriver

I am currently automating an Angular-based application using Selenium WebDriver (Java). After selecting an option from a dropdown in the Application Under Test (AUT), data is loaded onto the page through an AJAX call to a web service. However, there is no ...

javascriptjavajqueryangularselenium-webdriver

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...

javascriptcssnode.jsexpressejs

Error encountered while using AngularJS and Node.js with the 'phantom' node module. The application is throwing an injection error as AngularJS attempts to load a directive with a suffix

Upon loading an AngularJS page, everything proceeds smoothly with no console errors and the content displays as expected. However, encountering a different scenario where attempting to load the same page from another application using the Node module &apo ...

javascriptangularjsnode.jsangularjs-directivephantomjs

Can a cross-browser extension be developed that integrates with a Python backend for a web application?

Present State I am currently in the initial stages of planning a web application that users will access through a browser extension designed as a horizontal navigation bar. My initial plan was to utilize Pylons and Python for this project, but I am uncert ...

javascriptpythonbrowsercross-browser

Container holding a Material-UI drawer

Is it possible to set the material-ui drawer inside a container in reactjs? I have wrapped my app page in a container with a maximum width of 600px. I want the drawer to start within that container instead of on the body page (picture). The app bar positi ...

javascriptreactjsmaterial-uidrawer

Having trouble pinpointing the issue with this particular if statement?

I am currently working on creating a form that compiles all entered data when the user fills out all fields. The form is connected to a PHP file and functions properly, but I encountered issues when implementing validation logic. The "Validation" section ...

javascriptphphtmlformsif-statement

What is the issue with the character set?

Attempting to send request data from JavaScript to Java using JSON format. In JavaScript, the request body appears as: { "id": "3", "name": "Chicken pasta", "description": "Lets make chicken pasta", "category": "Unassigned", "favorite" ...

javascriptjavajsoncharacter-encoding

Parsing XML to JSON using JavaScript

I came across this JavaScript function on Stack Overflow that I've been using to convert XML to JSON: function xmlToJson(xml) { try { var obj = {}; if (xml.nodeType == 1) { if (xml.attributes.length > 0) { ...

javascriptjqueryjson