Problema With AngularJs NgRoute

Question

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>

If you use `html5Mode` you have to configure server to account for the virtual directories — charlietfl, May 28 '18 at 15:26
See [HTML5 mode requires URL rewriting](https://stackoverflow.com/a/49316671/5535245). — georgeawg, May 28 '18 at 16:14

score 0 · Accepted Answer · edited May 28 '18 at 17:48

0

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) {}

edited May 28 '18 at 17:48

SherylHohman

16,580
17
88
94

answered May 28 '18 at 15:09

Wayrex

2,027
1
14
25

Do you means, inside MainController? – rcoelho_6 May 28 '18 at 15:24
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) {} ``` – Wayrex May 28 '18 at 15:35
Thanks, it works well. – rcoelho_6 May 28 '18 at 16:46

Problema With AngularJs NgRoute

1 Answers1