Problema With AngularJs NgRoute

Issue

I am having a problema using ngRoute on angularjs, version 1.6.9.

I made a simple route like “/test/:yourname” where “yourname” should be a variable, the problema is:

1) If I try the adsress like “http://localhost:8080/test/rafael” I got the message:

“JBWEB000065: HTTP Status 404 – /test/rafael”

2) If I try yhe address like “http://localhost:8080/#/test/rafael“, it changes to “http://localhost:8080/#!#%2Ftest%2Frafael” and just show a blank page.

When debugging I can see that module with the route is loaded but the controller is never called.

Index:

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src="MainController.js"></script>
    <script src="ByName/ByNameModule.js"></script>
    <script src="ByName/ByNameController.js"></script>
</head>
<body ng-app="ProjectX" ng-controller="MainController">
    <ng-view></ng-view>
</body>

MainController:

    var app = angular.module("ProjectX", ["ByName"]);

    app.controller('MainController', MainController);
    MainController.$inject = ['$scope', '$rootScope', '$location'];

    function MainController($scope, $rootScope, $location) {

    }

ByName Module:

var app = angular.module('ByName', ['ngRoute']);

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

    $routeProvider.when('/test/:yourname', {
            templateUrl : 'ByName/ByNameView.html',
            controller : 'ByNameController',
            controllerAs : 'vm'
    });
});

ByName Controller:

var app = angular.module("ByName");

app.controller('ByNameController', ByNameController);
ByNameController.$inject = ['$scope', '$routeParams'];

function ByNameController($scope, $routeParams) {
    var vm = this;
    vm.yourname = $routeParams.yourname;
    $scope.firstName = "John1";
    $scope.lastName = "Doe2";
}

ByName View:

<div>
    {{vm.yourname}}
</div>

Solution

Seems like a duplicate for AngularJS: route provider changes "/" into %2F

Maybe setting

$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);

On your main module config would solve your problem.

EDIT from OP’s comment:
Something like this:

var app = angular.module("ProjectX", ["ByName"]); 
app.config(function($routeProvider, $locationProvider) {     
  $locationProvider.hashPrefix(''); 
  $locationProvider.html5Mode(true); 
}); 
app.controller('MainController', MainController); 
function MainController($scope, $rootScope, $location) {}

Answered By – Wayrex

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.