Struggling with setting up Angular.js routes

Here is a glimpse of my app.js and controllers.js files:

angular.module('RayAuth', ['RayAuth.filters', 'RayAuth.services', 'RayAuth.directives']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/index.html',
        controller: IndexCtrl
      }).
      when('/users', {
        templateUrl: 'partials/users.html',
        controller: UserCtrl
      }).
      when('/controlpanel', {
        templateUrl: 'partials/controlpanel.html',
        controller: ControlCtrl
      }).
      when('/modules/', {
        templateUrl: 'partials/modules.html',
        controller: ModuleCtrl
      }).
      when('/resources/', {
        templateUrl: 'partials/resources.html',
        controller: ResourceCtrl
      }).
      when('/privileges/', {
        templateUrl: 'partials/privileges.html',
        controller: PrivilegeCtrl
      }).
      when('/roles/', {
        templateUrl: 'partials/roles.html',
        controller: RoleCtrl
      }).
      when('/userroles/', {
        templateUrl: 'partials/userroles.html',
        controller: UserRoleCtrl
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }]);

Also, this is how my controllers.js looks like:

'use strict';

function IndexCtrl() {
    IndexCtrl.$inject = [];
}

function UserCtrl() {
    UserCtrl.$inject = [];
}

function ControlCtrl() {
    ControlCtrl.$inject = [];
}

function ModuleCtrl() {
    ModuleCtrl.$inject = [];
}

function ResourceCtrl() {
    ResourceCtrl.$inject = [];
}

function PrivilegeCtrl() {
    PrivilegeCtrl.$inject = [];
}

function RoleCtrl() {
    RoleCtrl.$inject = [];
}

function UserRoleCtrl() {
    UserRoleCtrl.$inject = [];
}

I have included ng-app and ng-view in my index file. However, upon loading it in the browser, instead of redirecting to http://localhost/ray-auth/, it keeps going back to http://localhost/. What am I missing here? Any help would be appreciated.

Answer №1

Give this a shot:

angular.module('RayAuth', ['RayAuth.filters', 'RayAuth.services', 'RayAuth.directives']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/index.html',
        controller: IndexCtrl
      }).
      when('/users', {
        templateUrl: 'partials/users.html',
        controller: UserCtrl
      }).
      when('/controlpanel', {
        templateUrl: 'partials/controlpanel.html',
        controller: ControlCtrl
      }).
      when('/modules/', {
        templateUrl: 'partials/modules.html',
        controller: ModuleCtrl
      }).
      when('/resources/', {
        templateUrl: 'partials/resources.html',
        controller: ResourceCtrl
      }).
      when('/privileges/', {
        templateUrl: 'partials/privileges.html',
        controller: PrivilegeCtrl
      }).
      when('/roles/', {
        templateUrl: 'partials/roles.html',
        controller: RoleCtrl
      }).
      when('/userroles/', {
        templateUrl: 'partials/userroles.html',
        controller: UserRoleCtrl
      });
    $locationProvider.html5Mode(true);
  }]);

I have taken out the 'otherwise' directive, which instructs it to redirect to '/' in all other scenarios.

Additionally, a quick note,

function PrivilegeCtrl() {

}
PrivilegeCtrl.$inject = [];

As depicted above, remember to do the injection outside of the controller.

Answer №2

Possibly

<!DOCTYPE html>
<html lang="en" ng-app="RayAuth">

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

Modify the div class depending on the date

I am in the process of creating a simple webpage where I can keep track of all my pending assignments for college. Take a look at the code snippet below: <div class="assignment"> <div class="itemt green">DUE: 28/03/2014</div> </d ...

The array position with the index of "0" will be accessed after using JSON.parse

I need help parsing this type of data: { "roads": [{ "road": "*IndustrialArea1", "house_number_required": true }, { "road": "Turnoff Kienbaum", "house_number_required": true }, { "road": "Maple Avenue (Eggersdorf)", "house_numb ...

Encountering a Vue syntax error following the binding of a session variable

Encountering a syntax error while attempting to bind a session variable as a prop of my Vue component. Scrutinizing my code did not reveal any mistakes, but perhaps another set of eyes may catch something. This is where I have registered my components: V ...

Protractor - Utilizing randomized data to enhance test capabilities

Currently, I am running multiple test suites simultaneously and hard coding the data for testing. For instance: element(by.name('email')).sendKeys(xxxxxx) element(by.name('password')).sendKeys('password') The email field in ...

Execute a function once the jQuery slide has finished running

I have a jquery slide function that I want to follow with another function once it's completed. <script> $('.button').click(function () { $('#iframehide').toggle('slide'); }); </script> The next function I w ...

Is there a way to incorporate an image as a texture onto a ply model using three.js?

Can someone help me figure out how to properly load a texture for a 3D model in a ply format? I'm working on an HTML file where I'm using three.js along with plyloader.js to load the model. However, I'm having trouble loading the texture co ...

Establish validation parameters for uploading multiple files

I need to implement client-side validation for my FileUpload control to ensure that users can only select up to 10 images. While I already have the server-side code in place, I now want to add client-side validation as well. Sample Code: <asp:FileUplo ...

AngularJS successfully retrieves the XSRF-TOKEN from the Spring Boot application, but it neglects to include the X-XSRF-TOKEN

I have successfully configured Spring Boot 1.5.x for CSRF protection. When testing on Spring, everything works fine: (1) the server generates the token and sends it to the client, (2) the client sends the token back and everything is validated. However, w ...

On the loading of a page, access the JSON file and store its content as

Looking to incorporate data from a JSON file into JavaScript for use in various functions triggered by user interactions on the page. Attempted implementation with jQuery and JS: var products = null; $.getJSON("products.json", function(data) { ...

Nunjucks failing to render the template

My folder structure is organized like this: /app |-routes.js /public |-index.html server.js Within server.js, the code is as follows: var nunjucks = require('nunjucks'); var express = require('express'); var app ...

When the "/" button is clicked, display a menu and highlight the menu choices for selection

I have been working on developing a similar concept to Notion, and I am facing a challenge with a specific feature. I want a menu to appear when the user clicks "/", providing options to change the current block to their preferred style. Currently, I can c ...

What is the best way to ensure my dropdown menu closes whenever a user clicks anywhere on the page? (javascript)

I have created a dropdown that appears when the user clicks on the input field, but I would like to remove the active class so that the dropdown disappears if the user clicks anywhere else on the page. Here is my code snippet: // drop-down menu functi ...

Troubles encountered in retrieving data from Axios with the help of Redux

I have been attempting to make an axios request to my ecommerce API using axios, but it keeps returning empty. I have tried multiple solutions, but none seem to be working. Below are the relevant files: Store.js (I attempted to use configureStore but ran ...

Evaluating the highest value within a continuous stream of data using idiomatic RxJS methods

When it comes to calculating the maximum value of a fixed stream, the process is quite simple. For example: var source = Rx.Observable.from([1,3,5,7,9,2,4,6,8]).max(); However, this only outputs a single value (9 in this case). What I aim to achieve is ...

Highcharts' labels on the x-axis do not automatically rotate

One issue I am facing is that my custom x-axis labels on the chart do not rotate upon window resize. I would like to have them rotated when the screen size is less than 399px. Check out the code here $(function () { $('#container').highchart ...

The attempt to access storage.get resulted in an error: TypeError - Unable to retrieve the property 'dataset' of null

While working on my options.html file, I encountered an issue where I am setting a value in chrome.storage.local, but I am unable to retrieve the value using get() when attempting to do so from within my popup.html. It seems like the value can't be re ...

Changing div height based on the height of another dynamic div

Looking to create a box that matches the height of the entire page, live height minus another dynamic div called #wrapping. I have code that offsets it instead of removing the height of the div... function adjustBoxHeight() { var viewPortHeight = $(wind ...

Utilize the datepicker function in jQuery version 1.6.3 to select a range of dates

I need help adding a jQuery datepicker to my JSP page for selecting a date range. Below is the current code I am working with. $(function() { $( "#createdAtFrom" ).datepicker({ defaultDate: "+1w", changeMonth: true, ...

Ways to delete a header from the req object in Express

Can anyone help me understand how to remove a header from the req object in Express? I've heard that using res.disable("Header Name") can do this for the res object, but it doesn't seem to work for req.headers. ...

JavaScript array reformatting executed

I have an array object structured like this. [ {student_code: "BBB-002-XRqt", questions: "Length (in inches)", answer: "8953746", time: "00:00:08:15"}, {student_code: "CCC-003-TYr9", questions: "He ...