Problem with URL in Angularjs

Question

I have a system running locally, done in Spring boot Java on the back end and Angular on the front end. But I have a problem occurring in front-end which is as follows:

When I lift my app and access the localhost/clinica/ I am redirected to my index that loads my home.html; so far so good. The page is loaded right with the menus and information. The url is presented like this: http://localhost/ultravitae/#!/

In the menu I have a Profile option; when I click I should list the profiles but nothing appears. It is on the same previous page. However the url changes, so: http://localhost/ultravitae/#!/#%2Fperfil

From what I can see, it’s like concatenating the url. Someone has been there and knows how to solve?

Man index.js is like this:

'use strict';

angular.module('clinica',['ngRoute'])
.config(function($routeProvider){

    $routeProvider
    .when('/', {
        templateUrl: 'src/home/home.html',
        controller: 'HomeCtrl'
    })
    .when('/perfil', {
        templateUrl: 'src/perfil/perfil.html',
        controller: 'PerfilCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
});

My home.js like this:

'use strict';

angular.module('clinica')
  .controller('HomeCtrl', function() {
  });

And my.js profile like this:

'use strict';

angular.module('clinica')
.controller('PerfilCtrl', function($scope, $http){
    $scope.perfils = [];

    $http.get('http://localhost:8080/api/private/perfil').then(function(response){
            $scope.perfils = response.data;
        });
});

In my index.html have a div that should present the content

<div id="main">
    <ng-view />
</div>

The folder structure looks like this: ultravitae (arquivos: index.html e index.js)

|-> src
|-> home (arquivos: home.html e home.js)
|-> perfil (arquivos: perfil.html e perfil.js)

Note: I did the following test. No index.js I put to my index to call the perfil.html instead of home.html and listed the right profiles: angular.module('clinical',['ngRoute']) . config(Function($routeProvider){

    $routeProvider
    .when('/', {
        templateUrl: 'src/perfil/perfil.html',
        controller: 'PerfilCtrl'
    })
    .when('/perfil', {
        templateUrl: 'src/home/home.html',
        controller: 'HomeCtrl'

    })
    .otherwise({
        redirectTo: '/'
    });
});

Answer 1

I know the topic is old, but it’s good to always help others.

Anyway, you can use in your href= "#! /profile" do not use href= "#/profile", because it will pick up from the table ASCII %2 which is the space.

And leave your . config the way it is! just change your HTML link.

.when('/profile', { templateUrl: 'src/home/home.html', controller: 'Homectrl'`

Answer 2

You have to put the base href="/" tag on index or home.html and put the $locationProvider parameter inside the config function on the route and call the parameter like this:

$locationProvider.html5Mode(true);

with this # will no longer be shown.

Answer 3

Have you tried the $urlRouteProvider? it seems to me that he performs a different call, basically assisted, while $routeProvider runs everything internally, follows an example that worked for me in a past project...

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home') //Página principal

  $stateProvider

  .state('home', {

    url: '/home',
    templateUrl: 'templates/home/home.html'

  })

  .state('detalhes', {

    url: '/detalhes/:resId',
    templateUrl: 'templates/conteudo/detalhes.html',
    controller: 'detalhesCtrl'

  })

})