Having difficulty with redirecting through angular's routeprovider

Hi there, I'm new to Angular and I'm running into an issue where I can't redirect to the signup.html page when I hit localhost:port/projectname/

Even though I have specified the template URL for signup in app.js, I keep getting a 404 error.

However, when I try hitting localhost:port/projectname/signup.html directly, the file opens without any problems. Am I missing something here?

I really need to be able to access the signup.html page when visiting localhost:port/projectname/

Here's the relevant code from app.js:

var app = angular.module('pollApp', ['ngRoute']);
  app.config(['$routeProvider',function($routeProvider){
    $routeProvider
     .when('/Welcome', {
         templateUrl: '/Welcome.html',
         controller: 'submitCtrl'
       })
      .when('/', {
        templateUrl: '/signup.html',
        controller: 'submitCtrl'
       })
       .otherwise({
         redirectTo: '/Welcome.html'
       });
}]);

And below is submitController.js:

app.controller('submitCtrl',['$scope', '$http', '$location',

  function ($scope, $http, $location) {
    $scope.timeZones =      [
     { label: '(GMT-09:00) Alaska', value: 'Alaska' },
     { label: '(GMT-08:00) Pacific Time (US & Canada)', value: 'Pacific Time (US & Canada)' }
    ];  

    $scope.submit=function()    {
        var userDetails=new Object();
        userDetails.firstname=$scope.firstname;
        userDetails.lastname=$scope.lastname;
        userDetails.Companyname=$scope.Companyname;
        userDetails.Email=$scope.Email;
        userDetails.timezone=$scope.timezone;
        console.log(userDetails);
        $http({
          method: 'POST',
          data: userDetails,
          url:'/mongopractise/rest/signup/userdata',
          headers: {'Content-Type':'application/json'}
        }).success(function(data, status, headers, config) {
            console.log("success data"+JSON.stringify(data));
            $scope.username=data;
            $location.url('/Welcome.html').replace();;

          }).
          error(function(data, status, headers, config) {
              console.log("Failure data"+data);
          });
}

 }]);

Lastly, this is part of the content from Signup.html:

 // The HTML content for the signup form goes here...

Answer №1

Ensure to add '/projectname' in your routes as it is part of your application context. This step is essential for the proper functioning of your routes.

Answer №2

After setting up your port, make sure to define the paths in the routeProvider configuration of your server. The server should properly serve the projectName folder before implementing the code below:

.when('/', {templateUrl: '/signup.html',  
controller: 'submitCtrl'
 })

By following these steps, everything should function as intended.

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

Dots are used to indicate overflow of title in React Material UI CardHeader

Is there a way to add ellipsis dots to the title in my Cardheader when it exceeds the parent's width (Card width)? Here is what I have attempted so far: card: { width: 275, display: "flex" }, overflowWithDots: { textOverflow: &apo ...

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...

How can I prevent links from being deleted in a UML state diagram using Jointjs?

My UML state diagram created with jointjs features interconnected states linked through lines. When the links are hovered over, a cross symbol appears, allowing users to delete the link by clicking on it. I am looking to prevent the cross symbol from sho ...

Error: Trying to access the 'tags' property of an undefined object in Angular

Currently, I am in the process of developing a vocabulary application that will organize words based on various criteria such as authors, books, and tags. Below is an example snippet from my JSON data: { "expression": "mithrandir", "meaning": "language of ...

Tips for adjusting the starting day of the date picker in AngularJS ui-bootstrap

Does anyone know how to customize the starting day for the ui-bootstrap date picker in AngularJS? Currently, the days are displayed from Monday to Sunday, but I need them to start from Saturday and end on Friday. Check out this plunker <p class="inpu ...

What is the best way to pass the anchor's Id as a parameter to a function?

Update: Apologies folks, I found the issue - Misspelled class name :( Hey there, I have a question that I need some help with. I have a series of anchor tags, each linking to a user's profile by using their username as the link id. All these links ...

Update the JSON data following deletion

I have received the following JSON data: "memberValidations": [ { "field": "PRIMARY_EMAIL", "errorCode": "com.endeavour.data.validation.PRIMARY_EMAIL", "createdDateTime": null }, ...

Cease animation if the page has already reached its destination

In my current setup, I am using a JavaScript code snippet to navigate users to the specific location of the information they click on in a side navigation menu. However, one issue that arises is if they first click on one item and then another quickly, t ...

Object undergoes alterations even without any direct interaction from me

Can anyone explain why the value of ColumnNames changes at the debugger breakpoint in the code snippet below? It seems to take on the same value as tempColumns after tempColumns[k] = modi[i].data[k];. var addRecords= []; var columns = ["Column1","Colu ...

Backend framework

Currently, I am in the process of developing a robust web application that heavily relies on JavaScript and jQuery, with ajax functionality included. Additionally, there will be a database in place, managed using mySQL with several tables. I'm undeci ...

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

The content in tinymce cannot be edited or removed

Is there a method to prevent certain content within the tinyMCE Editor from being edited or removed? While I know that adding a class "mceNonEditable" can make a div non-editable, it can still be deleted. Is there a way to make it unremovable as well? ...

The type of jQuery selector

I came across jQuery code that looks like this return 13 == t.keyCode ? (t.preventDefault(), !1) : void 0 Can someone explain what the ? and : mean in this context? Please provide a reference for further reading, as I am still new to jQuery. Thank you ...

CodeIgniter: Redirecting Made Easy

I'm attempting to redirect to a specific page using the code below: window.location.href="'<?php echo base_url() ?>'/index.php/user/view_cart/viewCart"; However, the URL it's being sent as is: http://localhost/CI/index.php/user ...

I am interested in updating the content on the page seamlessly using Angular 6 without the need to reload

As a newcomer to Angular, I am interested in dynamically changing the page content or displaying a new component with fresh information. My website currently features cards, which you can view by following this Cards link. I would like to update the page ...

The loading time for the NextJS production build is unacceptably sluggish

Recently, I started working with NextJS and deployed my project on Netlify as a production build. However, I've noticed that there is a significant delay of around 3-4 seconds when navigating to a specific page using the next router. Surprisingly, thi ...

Tips for eliminating the menu bar in the external window generated by an Electron application's URL

Looking for a solution to remove the menu bar from a window that opens with an external URL in an Electron application? Check out the code snippet below: windowObject.webContents.setWindowOpenHandler(() => ({ action: 'allow', overrideBrows ...

Issue with AngularJS: Dynamically generated tab does not become active or selected

Exploring an AngularJS code snippet that generates tabs upon clicking the new button. However, there's an issue where the newly created tab doesn't become active or selected automatically after creation. It seems like the one before the last tab ...

Guide on showcasing an array of objects in HTML with the help of the template element

My goal was to populate the HTML page with an array of objects using the template element. However, I made a mistake and only the last object in the array was displayed correctly on the page. Can anyone help me identify my error and suggest a correction? I ...

Improving collision detection in Three.js using raycasting

Struggling to navigate my way through this problem on my own, my usual Google search skills are coming up short. In the midst of developing a WebGL game, I have turned to raycasting for collision detection. The creation of levels is done in Clara.io, with ...