There seems to be a problem with the functionality of Angular Routes

Error in app.js: I am facing an issue while setting up routes in my AngularJS application. When I click on 'Page 1', the URL should be '/employees' but it is showing as http://localhost:3000/#!#employees. Can someone please help me debug this problem?

var myapp = angular.module('myapp',['ngRoute'])
myapp.config(function($routeProvider){
console.log('in the routes')
$routeProvider
    .when('/employees' ,{
        templateUrl: 'templates/index.html',
        controller: 'empController'
    })
    .when('/employees/create' ,{
        templateUrl: 'templates/create.html',
        controller: 'empController'
    })
    .when('/employees/:id/show' ,{
        templateUrl: 'templates/show.html',
        controller: 'empController'
    })
    .when('/employees/:id/edit' ,{
        templateUrl: 'templates/edit.html',
        controller: 'empController'
    })
})

Error in index.html:

<body ng-app='myapp' ng-controller='empController'>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="">Home</a></li>
      <li><a href="#/employees">Page 1</a></li>
      <li><a href="#/employees/create">Page 2</a></li>
      <li><a href="#/employees/:id/edit">Page 3</a></li>
      <li><a href="#/employees/:id/show">Page 3</a></li>
    </ul>
  </div>
</nav>
<hr>

<div ng-view></div>

Answer №1

Consider trying this approach:

let myapp = angular.module('myapp',['ngRoute'])
myapp.config(function($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
console.log('updating the routes')
$routeProvider
    .when('/users' ,{
        templateUrl: 'templates/index.html',
        controller: 'userController'
    })
    .when('/users/create' ,{
        templateUrl: 'templates/create.html',
        controller: 'userController'
    })
    .when('/users/:id/show' ,{
        templateUrl: 'templates/show.html',
        controller: 'userController'
    })
    .when('/users/:id/edit' ,{
        templateUrl: 'templates/edit.html',
        controller: 'userController'
    })
})

Answer №2

If you want to make changes to your app.js to address this issue, consider the following modification:

.config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider

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

Acquire the value of ant-design Select dropdown upon hover

How can we detect the selected option in an ant-design dropdown when it is hovered? <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}> <Option value="jack">Jack</Option> <Option value=& ...

Is Angular UI's data binding more of a push or pull mechanism? How can I optimize its speed?

Suppose I have a variable a that is displayed in HTML as {{a}}. If I then update its value in TypeScript using a = "new value";, how quickly will the new value be reflected in the user interface? Is there a mechanism that periodically checks all bound var ...

Matching numbers that begin with zero or are completely optional using Regex

Attempting to come up with a regex pattern that will allow the entry of the specified input into an HTML input field: The input must begin with 0 The input can be left empty and characters may be deleted by the user ^[^1-9]{0,1}[0-9\\s-\& ...

Error: Query is not valid

I'm encountering an error when trying to run this query, and I'm not sure why it's returning a bad request. My goal is to fetch a specific user from the database using the accountId. Can someone assist me with this issue? Below is the funct ...

A guide on showcasing images retrieved from Azure Blob Storage using React

Initially, I have thoroughly checked this question and can confirm that it is not a duplicate of How to display an image saved as blob in React Although I am unsure of their approach, our code is distinct and unrelated. My process involves following the ...

DiscordJS: updating specific segment of JSON object

I am currently working on a Discord bot using discord.JS that involves creating a JSON database with specific values. I'm wondering how I can modify the code to edit a particular object within the JSON instead of completely replacing it. if (message.c ...

Tips on modifying the content of a Material UI Card

I have a Material UI card displaying some details, along with an 'Edit' button. When the Edit button is clicked, I want to update the content of the card within the same layout. Below is the code snippet: <Card className={classes.root} variant ...

What is the best way to execute multiple functions simultaneously in an AngularJS application?

$scope.PrintOWTickets = function (TicketNo, MobilNo) { $http({ method: "GET", url: $scope.ip + '/getPrintTicekt?TicketNo=' + TicketNo + '&PassengeMobile=' + MobilNo + '&PassengeEmail=' + ...

Tips on making the form validation script operational

After developing a form alongside a form validation script to ensure that all fields are completed, the name and city sections only contain letters, while the age and phone sections solely include numbers, issues have arisen. It seems that despite the cons ...

Modifying CSS style according to the contents of an HTML element

Creating a room allocation page with multiple panel boxes using Bootstrap. Each box represents a bed - highlighted in red if occupied and green if vacant. Clicking on a green panel redirects to the room allocation page, while clicking on a red panel goes t ...

Having trouble accessing a JSON object with Typescript in an Angular 2 project

Something strange is happening with my code. I am working with a JSON object: {"login":"admin","name":"Admin"} And this is the relevant part of my code: private _userData: User; ... private getUserData() { this._userInfoService.getUserInfo() ...

Guide on transferring control from a successful jQuery event to an HTML form

I am currently using the following jQuery code to validate user details. $.ajax({ type: "POST", url: "Login", data:'uname='+encodeURIComponent(uname)+'&'+'pass='+encodeURIComponent(pass), ...

Tips for invoking an external JavaScript function using AJAX

I find myself a bit confused. In my project, there is an external javascript file called Hierarchy.js located in the Scripts folder. This file contains several functions, one of which is KeySelected. I need to call this function in the OnClientItemSelected ...

Manipulating variables from the main Node.js file within exported Express routes

Currently, I am working on the backend of a home automation program in Node.js with express as my router. The frontend communicates with the backend through about 50 routes that cover various aspects of the program such as querying device states, updating ...

IframeResizer.js is automatically readjusting its position to the top left corner (0,0) when a javascript event or

Within our internal web environment, I have implemented IframeResizer.js in a rather basic manner. The child page contains a table generated by a third-party application with mouseover/hidden and javascript tags associated with the TH elements (including a ...

Tips for incorporating Jquery forms with PHP in multiple iterations of a while loop

I am attempting to run a while loop with jQuery form processing to prevent the page from refreshing. The current code seems to be working, however, the jQuery function is only applied to the first loop, with subsequent loops opening a new page instead. I ...

Unsure about the commit hash referenced in the tsd.json file

Explore the history of angular-ui-router d.ts file using the commit hash Within my tsd.json file, I have the following details: { "version": "v4", "repo": "borisyankov/DefinitelyTyped", "ref": "master", "path": "typings", "bundle": "typings/tsd ...

Presenting information on an HTML webpage using the slidetoogle feature

< script > $(document).ready(function() { $("#flip").click(function() { $("#panel").slideToggle("fast"); }); }); < /script> When a button in a particular panel is clicked, I aim to display the details of that specific tuple ...

Middleware for automatically populating a Jade variable in all app.get() routes

I have a unique setup with my Jade file system where all templates extend layout.jade. In this main template, I need to include a logout button only when the user is logged in (this information is stored in req.session). So within layout.jade, there will ...

Client-side image upload problem in Next.js API routes

I've been banging my head against this bug for a couple of hours now and I just can't seem to figure out the reason behind it. The issue is with an API route I'm trying to set up in next.js where I need to modify an image and then upload it ...